var Accordion = Class.create({
	initialize: function( element ){
		this.element = $(element);
		this.id = element.id || 'accordion';
		this.tabs = this.element.select( '.tab' );
		this.toggles = this.element.select( '.tab .toggle:first');
		this.contents = this.element.select( '.tab .content:first');
		this.current = this.contents[0];
		this.toExpand = null;
		this.isAnimating = false;
		this.contentHeights = {};
		
		this.initialHide();
		this.element.observe('click', this.clickHandler.bindAsEventListener(this) );
	},
	
	initialHide: function() {
		for(var i=0; i<this.tabs.length; i++){  
			var content = this.contents[i];
			var id = content.id;
			if( !id || ''==id ) {
				id = this.id + '_' + i;
				content.id = id;
			}
			this.contentHeights[id] = content.scrollHeight;
			
	        if(content != this.current) {
	            content.setStyle( {height: '0px'} );
	            content.hide();  
	        }
	        else {
	        	content.parentNode.addClassName( 'active' );
	        }
	    }
	},
	
	clickHandler: function(e) {  
	    var element = e.findElement('.toggle');
	    if( !this.isAnimating && element!=null && !element.parentNode.hasClassName('active') ) {  
	        this.expand(element);  
	    }
	    if( !this.isAnimating && element!=null && element.parentNode.hasClassName('active') ) {  
	        this.expand(null);  
	    }
	},
	
	expand: function(element) {
	    this.toExpand = element!=null ? element.next('.content') : null;
	    if(this.current != this.toExpand){
	    	if( this.toExpand != null ) {
	    		this.toExpand.show();
	    	}
	        this.animate();  
	    }
	},
	
	animate: function() {  
	    var effects = new Array();  
	    
	    if( null!=this.toExpand ) {
		    var options = {  
		        sync: true,  
		        scaleFrom: 0,  
		        scaleContent: false,  
		        transition: Effect.Transitions.sinoidal,  
		        scaleMode: {  
		            originalHeight: this.contentHeights[this.toExpand.id],  
		            originalWidth: this.element.getWidth()  
		        },  
		        scaleX: false,  
		        scaleY: true  
		    };  
		  
		    effects.push(new Effect.Scale(this.toExpand, 100, options));  
	    }
	    if( null!=this.current ) {
		    options = {  
		        sync: true,
		        scaleFrom: 100,
		        scaleContent: false,  
		        transition: Effect.Transitions.sinoidal,  
		        scaleX: false,  
		        scaleY: true  
		    };
		  
		    effects.push(new Effect.Scale(this.current, 0, options));
	    }
	  
	    new Effect.Parallel(effects, {  
	        duration: 0.7,  
	        fps: 35,  
	        queue: {  
	            position: 'end',  
	            scope: 'accordion'  
	        },  
	        beforeStart: function() {  
	            this.isAnimating = true;
	            if( this.toExpand != null ) {
	            	this.toExpand.parentNode.addClassName( 'active' );
	            }
	        }.bind(this),  
	        afterFinish: function() {
	            this.isAnimating = false;
	        	if( this.current!=null ) {
		            this.current.parentNode.removeClassName( 'active' );
		            this.current.hide();
		            this.current.setStyle( {height: '0px'} );
	        	}
	            this.current = this.toExpand;
	            if( this.current!=null ) {
		            this.current.setStyle( {height: 'auto'} );
		            var box = Selector.findElement( this.current.ancestors(), '.borderbox2' );
		            if( null!=box ) {
		            	box.toggleClassName( 'ieUpdate' );
		            }
	            }
	        }.bind(this)  
	    });  
	}
});

var productDetails = Class.create({

	varHandler: null,
	recommendationAccordion: null,
	imageCarousel: null,
	zoomImage: null,

	initialize: function() {
		tabHandlerInit();
		this.varHandler = new variationHandler(this.reloadCallback, this, 'availability');
		this.initRecommendations();
	},
	
	initRecommendations: function() {
		if( $('recommendation-accordion') != null ) {
			this.recommendationAccordion = new Accordion( $('recommendation-accordion') );
			$('recommendation-accordion').observe( 'mouseover', this.recommendationMoveHandler.bindAsEventListener(this) );
			$('recommendation-accordion').observe( 'mouseout', this.recommendationOutHandler.bindAsEventListener(this) );
		}
	},

	shownRecommendation: null,
	recommendationEffect: null,
	
	recommendationMoveHandler: function(ev) {
		var recommendedProduct = ev.findElement('.recommendedProduct');
		if( recommendedProduct == null || this.shownRecommendation == recommendedProduct ) {
			return;
		}
		if( null != this.recommendationEffect ) {
			this.recommendationEffect.cancel();
		}
		this.shownRecommendation = recommendedProduct;
		
		// set large image of recommendation //
		var image = recommendedProduct.select('.largeImage img')[0];
		if (image.hasClassName('noImageSet')) {
			var pref = image.getConfiguration('ImgLink', true);
			if (pref != null) {
				image.setAttribute('src', pref.img);
				image.removeClassName('noImageSet');
			}
		}
		
		var overlay = $('jsAllDetailsOverlay');
		overlay.update( recommendedProduct.select('.largeImage')[0].innerHTML );
		this.recommendationEffect = new Effect.Appear( overlay, { duration: 0.3 } );
	},
	
	recommendationOutHandler: function(ev) {
		if( null==this.shownRecommendation ) {
			return;
		}
		var toE = $(ev.toElement || ev.relatedTarget);
		if( toE!=null && toE.descendantOf(this.shownRecommendation) ) {
			return;
		}
		if( null!=this.recommendationEffect ) {
			this.recommendationEffect.cancel();
		}
		var overlay = $('jsAllDetailsOverlay');
		this.recommendationEffect = new Effect.Fade( overlay, { duration: 0.3 } );
		this.shownRecommendation = null;
	},
	
	reloadCallback: function(callbackContext) {
		callbackContext.varHandler.reinit();
		tabHandlerInit();
		initializePopupLinkHandler()
		MiniCart.registerAddToCartButton($('addToCartButton'));
	}
});

if ('observe' in document) {
	document.observe('dom:loaded', function() {
		new productDetails();
	});
}