var ImageSlider = {
    element : null,
    items : null,
    allContainer : null,
    effect : null,
    totalWidth : 0,
    isMouseOver : false,
    isFixMargin : false,
    
    init : function() {
        window.addEvent('load', function(){
			ImageSlider._init();
		});
    },    
    _init : function () {
        this.element = $('categoryList');
        this.items = $$('#categoryList .categoryItem');
        
        if (!this.element || !this.items) return false;
        
        this.allContainer = new Element('div',{'id' : 'allContainer'});
        
        this.totalWidth = (this.items.length + 1)* 150;
        this.allContainer.setStyles({'width' : this.totalWidth + 'px','height' : '150px'});
        this.allContainer.inject(this.element, 'bottom');
        var divClear = new Element('div',{'class' : 'clear'});
        divClear.inject(this.element, 'bottom');

        this.items.forEach(function(item,index) {
            item.injectInside(ImageSlider.allContainer);
            item.addEvent('mouseenter',ImageSlider.itemRollOver.bindWithEvent(item));
            item.addEvent('mouseleave',ImageSlider.itemRollOut.bindWithEvent(item));
        });
    },
    Slide : function() {
        ImageSlider.Next();
    },
    Next : function(event) {
        if (!ImageSlider.isMouseOver && ImageSlider.items.length > 5)
        {
            ImageSlider.isSlideing = true;
            var beginMargin = ImageSlider.allContainer.offsetLeft;
            if (!ImageSlider.isFixMargin && beginMargin == 363)
                ImageSlider.isFixMargin = true;
            if (ImageSlider.isFixMargin)
            {
                beginMargin = beginMargin - 363;
            }
		    var endMargin = beginMargin - 150;
		    if (beginMargin + ImageSlider.totalWidth > 750+150) 
		    {			
			    ImageSlider.effect = new Fx.Morph(ImageSlider.allContainer, {duration: 'normal', transition: Fx.Transitions.Quad});
		        ImageSlider.effect.start({
		            'margin-left': [beginMargin, endMargin]
		        });
		    }
	        else
	        {
                var lastElement = ImageSlider.items[ImageSlider.items.length-1];
		        var firstElement = ImageSlider.items[0];			    
		        var tempElement = ImageSlider.items[1];			    
		        firstElement.injectAfter(lastElement);
		        var margin = '150px';
		        if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
                    var ieversion = new Number(RegExp.$1);
                    if (ieversion==6)
                    {
                        margin = '75px';
                    }
                }
		        tempElement.setStyles({'margin-left' : margin});		    
			    ImageSlider.effect = new Fx.Morph(tempElement, {duration: 'normal', transition: Fx.Transitions.Quad});
		        ImageSlider.effect.start({
		            'margin-left': 0
		        });		    
			    ImageSlider.ReIndex();
	        }
	    }
	},
	ReIndex : function() {
	    var tempArray = new Array(ImageSlider.items.length);	        
        var lastElement = ImageSlider.items[0];
	    tempArray[ImageSlider.items.length-1] = lastElement;
        for(var i=1;i<ImageSlider.items.length;i++)
        {	            
	        tempArray[i-1] = ImageSlider.items[i];
        }        
        ImageSlider.items = tempArray;
	},
	itemRollOver : function() {
		ImageSlider.isMouseOver = true;
		var element = this.getChildren();
		ImageSlider.effect = new Fx.Morph(element[0], {duration: 'normal', transition: Fx.Transitions.Quad});
        ImageSlider.effect.start({
            'width': 150,
            'height': 150,
            'margin-top': 0
        });
	},
	itemRollOut : function() {
		ImageSlider.isMouseOver = false;
		var element = this.getChildren();
		ImageSlider.effect = new Fx.Morph(element[0], {duration: 'normal', transition: Fx.Transitions.Quad});
        ImageSlider.effect.start({
            'width': 130,
            'height': 130,
            'margin-top': 10
        });
	}
}
ImageSlider.init();
ImageSlider.Slide.periodical(3000);