window.addEvent('domready', function(){
    var carouselPlace = 0;
    var carouselTotal = 0;
    var carouselWidth = 0;
    var carouselMaskWidth = 0;
    var carouselMovement;
    var carouselFading;
    var carouselWaiting;
    var carouselContent;
    var carouselSeperator = 0;
    var carouselMoving = 0;
    function carouselInit(name){
		
		var itemn=$(name+'-next-ov');
		itemn.setStyle('opacity',0.01);
		itemn.f=new Fx.Morph(itemn, {
                duration: 150,
                wait: false
            });
		itemn.addEvents({
                'mouseleave': function(){
                    itemn.f.cancel();
                    itemn.f.start({
                        'opacity': [itemn.getStyle('opacity'), 0.01]
                    });
                }
            })
		itemn.addEvents({
                'mouseenter': function(){
                    itemn.f.cancel();
                    itemn.f.start({
                        'opacity': [itemn.getStyle('opacity'), 1]
                    });
                }
            })
		var itemp=$(name+'-prev-ov');
		itemp.setStyle('opacity',0.01);
		itemp.f=new Fx.Morph(itemp, {
                duration: 150,
                wait: false
            });
		itemp.addEvents({
                'mouseleave': function(){
                    itemp.f.cancel();
                    itemp.f.start({
                        'opacity': [itemp.getStyle('opacity'), 0.01]
                    });
                }
            })
		itemp.addEvents({
			'mouseenter': function(){
				itemp.f.cancel();
				itemp.f.start({
					'opacity': [itemp.getStyle('opacity'), 1]
				});
			}
		})
		
		
		
        $(name + '-prev').setStyle('opacity', 0);
        //vazei ti 8a kounaei
        carouselContent = $(name + '-content');
        var divs = $$('#' + name + '-content div');
        carouselTotal = divs.length;
        // vriskei poso einai to seperator apo to padding-right tou -next
        carouselSeperator = divs[0].getStyle('padding-right');
        carouselSeperator = parseInt(carouselSeperator.substr(0, carouselSeperator.length - 2));
        // to width tou ka8e div mazi me to seperator
        carouselWidth = divs[0].getStyle('width');
        carouselWidth = parseInt(carouselWidth.substr(0, carouselWidth.length - 2)) + carouselSeperator;
        //width ths maskas
        carouselMaskWidth = carouselWidth * 4 - carouselSeperator;
        $('carousel-mask').setStyle('width', carouselMaskWidth);
        // to width tou content
        carouselContent.setStyle('width', carouselWidth * carouselTotal);
        //actions
        $(name + '-prev').addEvent('click', function(){
            carouselPrev();
        });
        $(name + '-prev').fade = new Fx.Morph($(name + '-prev'), {
			duration: 150,
			wait: false,
			onComplete: function(){
				if ($(name + '-prev').getStyle('opacity') < 0.1) 
					$(name + '-prev').setStyle('display', 'none');
			}
		});
        $(name + '-next').addEvent('click', function(){
            carouselNext();
        });
        $(name + '-next').fade = new Fx.Morph($(name + '-next'), {
			duration: 150,
			wait: false,
			onComplete: function(){
				if ($(name + '-next').getStyle('opacity') < 0.1) 
					$(name + '-next').setStyle('display', 'none');
			}
		});
        
        carouselMovement = new Fx.Morph(carouselContent, {
            duration: 500,
            wait: false,
            onComplete: function(){
                if (carouselPlace == 0) {
					$(name + '-prev').fade.start({
						'opacity': [$(name + '-prev').getStyle('opacity'), 0.01]
					});
				}
				else {
					$(name + '-prev').setStyle('display', 'block');
					if ($(name + '-prev').getStyle('opacity') < 1) {
						$(name + '-prev').fade.start({
							'opacity': [$(name + '-prev').getStyle('opacity'), 1]
						});
					}
				}
                if (carouselPlace == carouselMaskWidth - carouselWidth * carouselTotal + carouselSeperator) {
					$(name + '-next').fade.start({
						'opacity': [$(name + '-next').getStyle('opacity'), 0.01]
					});
				}
				else {
					$(name + '-next').setStyle('display', 'block');
					if ($(name + '-next').getStyle('opacity') < 1) {
						$(name + '-next').fade.start({
							'opacity': [$(name + '-next').getStyle('opacity'), 1]
						});
					}
				}
            }
        });
        carouselFading = new Fx.Morph(carouselContent, {
            duration: 100,
            wait: false,
            onComplete: function(){
                if (carouselContent.getStyle('opacity') < 1) 
                    carouselWaiting.start();
                else 
                    carouselMoving = 0;
            }
        });
        carouselWaiting = new Fx.Morph(carouselContent, {
            duration: 300,
            wait: false,
            onComplete: function(){
                carouselFading.start({
                    'opacity': [carouselContent.getStyle('opacity'), 1]
                });
            }
        });
    }
    function carouselNext(){
        if (carouselMoving == 0) {
            carouselMoving = 1;
            var step = carouselWidth * 4
            var togo = carouselPlace - step;
            if (togo + carouselWidth * carouselTotal - carouselSeperator < carouselMaskWidth) 
                togo = carouselMaskWidth - carouselWidth * carouselTotal + carouselSeperator;
            carouselMovement.start({
                'left': [carouselPlace, togo]
            });
            carouselFading.start({
                'opacity': [carouselContent.getStyle('opacity'), 0.8]
            });
            carouselPlace = togo;
        }
    }
    function carouselPrev(){
        if (carouselMoving == 0) {
            carouselMoving = 1;
            var step = carouselWidth * 4
            var togo = carouselPlace + step;
            if (togo > 0) 
                togo = 0;
            carouselMovement.start({
                'left': [carouselPlace, togo]
            });
            carouselFading.start({
                'opacity': [carouselContent.getStyle('opacity'), 0.8]
            });
            carouselPlace = togo;
        }
    }
    carouselInit("carousel");
});