var Product = {
	element : null,
	items : null,
	previous : null,
	next : null,
	direction : null,
	effect : null,
	totalHeight : 0,
	totalWidth : 0,
	currentItemIndex : -1,
	isMouseOver : false,
	isCloseing : false,
	isSlideing : false,
	
	init : function(element,items,previous,next,direction) {
		window.addEvent('load', function(){
			Product._init(element,items,previous,next,direction);
		});
	},
	_init : function (element,items,previous,next,direction) {
		this.element = $(element);
		this.items = $$(items);
		this.previous = $(previous);
		this.next = $(next);
		this.direction = direction;

		if (!this.element || !this.items || !this.previous || !this.next) return false;
		
		this.previous.addEvent('click', Product.Previous);
		this.next.addEvent('click', Product.Next);
		this.previous.addEvent("mouseenter", function(){
			Product.isMouseOver = true;
	    });	    
	    this.previous.addEvent("mouseleave", function(){
			Product.isMouseOver = false;
	    });
	    this.next.addEvent("mouseenter", function(){
			Product.isMouseOver = true;
	    });
	    this.next.addEvent("mouseleave", function(){
			Product.isMouseOver = false;
	    });
		
		this.element.setStyles({'position' : 'relative'});
		
		var allContainer = new Element('div',{'id' : 'allContainer'});

		if (this.direction == 'vertical') {
			this.totalHeight = 110*(this.items.length+1);			
			allContainer.setStyles({'height' : this.totalHeight + 'px','width' : '165px'});
		}else if (this.direction == 'horizontal') {
			this.totalWidth = 165*(this.items.length+1);
			allContainer.setStyles({'width' : this.totalWidth + 'px','height' : '110px'});
		}
		
		if (this.items.length <= 4) {
		    this.next.addClass("inactive");		    
		    if (this.direction == 'horizontal') {
		        var remainWidth = (660 - this.totalWidth)/2;		        
		        allContainer.setStyles({'margin-left' : remainWidth + 'px'});
		    }
		}
		
		allContainer.injectInside(this.element);
		
		this.items.forEach(function(item,index) {
		    item.detail = null;
		    item.cancelEvent = false;
		    item.effect = null;
		    
		    var textElement = item.getLast();
		    textElement.targetHeight = textElement.scrollHeight;
		    if (textElement.targetHeight<110)
		        textElement.targetHeight = 110;
		        
            textElement.setStyles({'position' : 'absolute','top' : '0px', 'left' : '0px','z-index' : '1','padding' : '0px','height' : '0px'});
            textElement.source = item;
            textElement.displaying = false;
            textElement.onClose = false;
            textElement.injectInside(Product.element.getParent());
            
            textElement.addEvent('mouseenter',Product.textRollOver.bindWithEvent(textElement));
            textElement.addEvent('mouseleave',Product.textRollOut);
            
			item.detail = textElement;
			
			item.addEvent('mouseenter',Product.itemRollOver.bindWithEvent(item));
			item.addEvent('mouseleave',Product.itemImageRollOut.bindWithEvent(item));
			item.addEvent('completeleave',Product.itemCompompleteRollOut);

			//container.injectInside(item);
			
			item.injectInside(allContainer);
						
			$ES('a',textElement).forEach(function(link,index) {			    
		        if (window.location.pathname.test(link.pathname))
		            link.addEvent("click",Product.linkClick.bindWithEvent(link));		        			    
			});
		});
	},
	linkClick : function(event) {
	    if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		
		if (this.hash != '') {
	        var element = $$(this.hash);    	    
	        if (element != null) {
	            element.fireEvent('click');
	        }
	    }
	},
	
	itemRollOver : function() {
	    Product.isMouseOver = true;
	    if (Product.isSlideing)
	    {		    
		    Product.itemRollOver.delay(200, this)
		    return false;
		}
		
	    var startLeft = 0;
	    var startTop = 0;	    
	    this.cancelEvent = false;
	    
	    if (Product.direction == 'vertical')
        {
           startLeft = Product.element.offsetLeft;
           startTop = 55 + this.offsetTop + Product.element.offsetTop;
        }
        else if (Product.direction == 'horizontal') 
        {	    
           startLeft = 18 + this.offsetLeft;
           startTop = this.offsetTop + Product.element.offsetTop + (this.offsetHeight/2);
        }   	    
	    
	    var tagetPos,targetHeight,currentHeight;    	    
        currentHeight = this.detail.offsetHeight;
        targetHeight = this.detail.targetHeight;	        
        tagetPos = startTop - (targetHeight/2);	    
	        
	    if (!this.detail.displaying) {
	        
    	    
	        this.detail.setStyles({'left' : startLeft,'width' : '165px','top' : startTop + 'px'});
	        this.detail.displaying = true;
    	    
	        this.effect = new Fx.Styles(this.detail, {duration: 1000, transition: Fx.Transitions.linear});
	        this.effect.start({
	            'top' : [startTop,tagetPos],
		        'height': [0, targetHeight]
		    });
		}else {
		    if (this.effect.stop != null) {
		        this.effect.stop();
		    }
		    
		    //console.log(this.detail);
		    //console.log('Position = ' + this.detail.offsetTop + ' ' + this.detail.targetTop);
		    //console.log('Height = ' + this.detail.offsetHeight + ' ' + this.detail.targetHeight);
		    
		    this.effect = new Fx.Styles(this.detail, {duration: 1000, transition: Fx.Transitions.linear});
	        this.effect.start({
	            'top' : [this.detail.offsetTop,tagetPos],
		        'height': [this.detail.offsetHeight, targetHeight]
		    });
		}
	},
	itemImageRollOut : function() {
	    this.fireEvent("completeleave",this,200);
	},
	itemCompompleteRollOut : function () {
	    //console.log('completed leave with cancel = ' + this.cancelEvent);
	    if (!this.cancelEvent) {
	        this.detail.fireEvent("mouseleave");
	    }
	},
	textRollOver : function() {
	    Product.isMouseOver = true;
	    this.source.cancelEvent = true;
	    //console.log('Text Roll Over');
	    if (this.onClose)
	    {
	        if (this.source.effect != null) 
		        this.source.effect.stop();		        
		    var startTop = 0;
		    if (Product.direction == 'vertical')
               startTop = 55 + this.source.offsetTop + Product.element.offsetTop;
            else if (Product.direction == 'horizontal')
               startTop = this.source.offsetTop + Product.element.offsetTop + (this.source.offsetHeight/2);               	    
            
            var tagetPos,targetHeight;           
            targetHeight = this.targetHeight;	        
            tagetPos = startTop - (targetHeight/2);
        
		    this.source.effect = new Fx.Styles(this, {duration: 1000, transition: Fx.Transitions.linear});
	        this.source.effect.start({
	            'top' : [this.offsetTop,tagetPos],
		        'height': [this.offsetHeight, targetHeight]
		    });
	    }	    
	},
	textRollOut : function() {
	    Product.isMouseOver = false;
	    Product.isCloseing = true;
	    //console.log('Text Roll Out ' + this);
	    var startTop = 0;	    
	    //console.log(this.detail.scrollHeight);
	    
	    if (Product.direction == 'vertical')
	    {	      
	       startTop = 55 + this.source.offsetTop + Product.element.offsetTop;
	    }
	    else if (Product.direction == 'horizontal') 
	    {  
	       startTop = this.source.offsetTop + Product.element.offsetTop + (this.source.offsetHeight/2);
	    }
	    
	    if (this.source.effect != null) {
	        this.source.effect.stop();
	    }	    
	    this.onClose = true;
	    this.source.effect = new Fx.Styles(this, {duration: 700, transition: Fx.Transitions.linear, onComplete : Product.CompletedHideText});	                
        this.source.effect.start({
            'top': startTop,
            'height': 0
        });
	},
	CompletedHideText : function() {
	    //console.log('CompletedHideText');
	    this.element.displaying = false;
	    this.element.onClose = false;	
	    Product.isCloseing = false; 
	},
	Previous : function(event) {
	    if (event!=null)
	    {
		    if (!window.ie) {
			    event = new Event(event);
			    event.preventDefault();
		    }else {
		        event.cancelBubble = true;
		        event.returnValue = false;
		    }
		}
		
		if (Product.isCloseing || Product.isSlideing)
	    {		    
		    Product.Previous.delay(200);
		    return false;
		}
		
		Product.isSlideing = true;
		if (Product.direction == 'vertical') {
			var beginMargin = Product.element.getFirst().offsetTop;
			var endMargin = beginMargin + 110;
			
			if (beginMargin < 0) {
				Product.effect = new Fx.Styles(Product.element.getFirst(), {duration: 500, transition: Fx.Transitions.Quad, onComplete : Product.CompletedSlide});
				Product.effect.start({
				    'margin-top': [beginMargin, endMargin]
				});
			}
			else
			{
			    var lastElement = Product.items[Product.items.length-1];
			    var firstElement = Product.items[0];
			    lastElement.setStyles({'margin-top' : '-110px'});
			    lastElement.injectBefore(firstElement);		
			    	    
			    Product.effect = new Fx.Styles(lastElement, {duration: 500, transition: Fx.Transitions.Quad, onComplete : Product.CompletedSlide});
				Product.effect.start({
				    'margin-top': 0
				});
				
				Product.ReIndex('previous');
			}
			
			
		} else if (Product.direction == 'horizontal') {
			var beginMargin = Product.element.getFirst().offsetLeft;
			var endMargin = beginMargin + 165;
			
			if (beginMargin < 0) {
				Product.effect = new Fx.Styles(Product.element.getFirst(), {duration: 500, transition: Fx.Transitions.Quad, onComplete : Product.CompletedSlide});
				Product.effect.start({
				    'margin-left': [beginMargin, endMargin]
				});
			}
			else
			{
			    var lastElement = Product.items[Product.items.length-1];
			    var firstElement = Product.items[0];
			    lastElement.setStyles({'margin-left' : '-165px'});
			    lastElement.injectBefore(firstElement);		
			    	    
			    Product.effect = new Fx.Styles(lastElement, {duration: 500, transition: Fx.Transitions.Quad, onComplete : Product.CompletedSlide});
				Product.effect.start({
				    'margin-left': 0
				});
				
				Product.ReIndex('previous');
			}
			
			
		}
		return false;
	},
	Next : function(event) {
	    if (event != null) {
		    if (!window.ie) {
			    event = new Event(event);
			    event.preventDefault();
		    }else {
		        event.cancelBubble = true;
		        event.returnValue = false;
		    }
		}		
		
		if (Product.isCloseing || Product.isSlideing)
	    {		    
		    Product.Next.delay(200);
		    return false;
		}
		
		Product.isSlideing = true;		
		if (Product.direction == 'vertical') {
			var beginMargin = Product.element.getFirst().offsetTop;
			var endMargin = beginMargin - 110;
			//console.log(Product.totalHeight);
			if (beginMargin + Product.totalHeight > 440+110) {
				Product.effect = new Fx.Styles(Product.element.getFirst(), {duration: 500, transition: Fx.Transitions.Quad, onComplete : Product.CompletedSlide});
				Product.effect.start({
				    'margin-top': [beginMargin, endMargin]
				});
			}			
			else
			{
			    var lastElement = Product.items[Product.items.length-1];
			    var firstElement = Product.items[0];			    
			    var tempElement = Product.items[1];			    
			    firstElement.injectAfter(lastElement);
			    if(window.ie6)
			        tempElement.setStyles({'margin-top' : '55px'});
			    else
			        tempElement.setStyles({'margin-top' : '110px'});			    
			    Product.effect = new Fx.Styles(tempElement, {duration: 500, transition: Fx.Transitions.Quad, onComplete : Product.CompletedSlide});			    
				Product.effect.start({
				    'margin-top': 0
				});			    
				Product.ReIndex('next');
			}
			//console.log(endMargin + Product.totalHeight);			
		} else if (Product.direction == 'horizontal') {
			var beginMargin = Product.element.getFirst().offsetLeft;
			var endMargin = beginMargin - 165;
			//console.log(Product.totalHeight);
			if (beginMargin + Product.totalWidth > 660+165) {
				Product.effect = new Fx.Styles(Product.element.getFirst(), {duration: 500, transition: Fx.Transitions.Quad, onComplete : Product.CompletedSlide});
				Product.effect.start({
				    'margin-left': [beginMargin, endMargin]
				});
			}
		    else
		    {
		        var lastElement = Product.items[Product.items.length-1];
			    var firstElement = Product.items[0];			    
			    var tempElement = Product.items[1];			    
			    firstElement.injectAfter(lastElement);
			    if(window.ie6)
			        tempElement.setStyles({'margin-left' : '82px'});
			    else
			        tempElement.setStyles({'margin-left' : '165px'});
			    
			    Product.effect = new Fx.Styles(tempElement, {duration: 500, transition: Fx.Transitions.Quad, onComplete : Product.CompletedSlide});			    
				Product.effect.start({
				    'margin-left': 0
				});			    
				Product.ReIndex('next');
		    }	
			
		}
		return false;
	},
	CompletedSlide : function() {	  
	    Product.isSlideing = false; 
	},
	Slide : function() {
	    if (!Product.isMouseOver && !Product.isCloseing)	    
	        Product.next.fireEvent('click');
	},
	SlidePause : function() {	     
	    Product.isMouseOver = true;
	},
	SlideResume : function() {
	    Product.isMouseOver = false;
	},
	ReIndex : function(state) {	    
	    if (state == 'previous')
	    {
	        var tempArray = new Array(Product.items.length);	        
	        var firstElement = Product.items[Product.items.length-1];
		    tempArray[0] = firstElement;
		    
	        for(var i=0;i<Product.items.length-1;i++)
	        {	            
		        tempArray[i+1] = Product.items[i];
	        }	        
	        
	        Product.items = tempArray;
	    }
	    else
	    {
	        var tempArray = new Array(Product.items.length);	        
	        var lastElement = Product.items[0];
		    tempArray[Product.items.length-1] = lastElement;
		    
	        for(var i=1;i<Product.items.length;i++)
	        {	            
		        tempArray[i-1] = Product.items[i];
	        }
	        
	        Product.items = tempArray;
	    }	        
	}
}