/*
	MooBlade - a Mootools blade navigation by Sander Sluis
*/

var MooBladeGallery = new Class({
	Implements: [Options, Events],
	showThisBlade: null,

	options: {
		'zindexStart' 			: 100,
		'zindexStop'			: 150,
		'zindexStep'			: 10,
		'imageSizeX'			: 1200,
		'imageSizeY'			: 800,
		'articleWidth'			: 422,
		'shadowWidth'			: 16,
		'buttonWidth'			: 16,
		'buttonHeight'			: 45,
		'buttonHeightExpanded'	: 148,
		'contentWidth'			: 930,
		'quoteHeightOffset'		: 98,
		'bladesElement'			: '',
		'browserWidth'			: '',
		'browserHeight'			: '',
		'showArticle'			: false,
		'blades'				: new Array,
		'numBlades'				: '',
		'bladeClones'			: new Array,
		'shadowImage'			: '/App_Themes/Dhv/Img/shadow-right-comhome2.png'
	},
	initialize: function(options){
		this.setOptions(options);
		this.initScrollBar();
		this.options.scrollBarWidth = this.options.scrollBarWidth;
		this.options.scrollRatio	= 0;
		this.options.browserWidth	= document.html.clientWidth - this.options.scrollBarWidth;
		this.options.browserHeight	= document.html.clientHeight;
		this.options.bladesElement	= $(this.options.bladesElement);
		this.options.numBlades		= this.options.bladesElement.getChildren().length;
		this.options.zindexStep		= Math.floor((this.options.zindexStop - this.options.zindexStart) / this.options.numBlades);

		//Set container style
		this.options.bladesElement.setStyles({
			'width': this.options.browserWidth,
			'height': this.options.browserHeight
		});			
		this.createBlades();
		
 		window.addEvent('resize', function(){
			this.resizeNow();
		}.bind(this));
		window.addEvent('focus', function(){
			this.resizeNow();
		}.bind(this));
		this.resizeNow();
	},
	initScrollBar: function(){
		var beforeX = document.html.clientWidth;
		$$('html').setStyle('overflow-y', 'hidden');
		$$('html').setStyle('overflow-x', 'hidden');
		var afterX = document.html.clientWidth;
		this.options.scrollBarWidth = afterX - beforeX;
		$(this.options.scrollElement).setStyle('width', this.options.scrollBarWidth + 1);
		$(this.options.scrollElement).setStyle('height', document.html.clientHeight);
		$(this.options.scrollElement).addEvent('scroll', function(){
			this.scrollScrollBar();
		}.bind(this));
	},
	setScrollBar: function(){
		$(this.options.scrollElement).getChildren('div.scrollspace')[0].setStyle('height', this.options.browserHeight*this.options.scrollRatio);
	},
	scrollScrollBar: function(){
		if($chk($$('div#blades div.active div.article div.contentholder')[0])){
			var ratio = $(this.options.scrollElement).getScroll().y / ($(this.options.scrollElement).getScrollSize().y - this.options.browserHeight);
			var contentHolder = $$('div#blades div.active div.article div.contentholder')[0];
			var scrollTo = (contentHolder.getScrollSize().y - contentHolder.getSize().y)*ratio;
			contentHolder.scrollTo(0, scrollTo);
		}
	},
	makeScrollBarScroll: function(amount){
		if($chk($(this.options.scrollElement))){
			$(this.options.scrollElement).scrollTo(0, $(this.options.scrollElement).getScroll().y -(amount*20));
		}
	},
	showArticle: function(){
		this.options.blades[0].showArticle();
	},
	toggleArticle: function(hideshow){
		if(hideshow == 'show'){
			if(Browser.Engine.trident == true){
				$('content-holder').setStyle('display', 'none');
			}
			else{
				$('content-holder').tween('opacity', '0');
			}			
		}
		else{
			if(Browser.Engine.trident == true){
				timeOut = function(){
					$('content-holder').setStyle('display', 'block');
				}.bind(this).delay(App.transDelay);				
			}
			else{
				$('content-holder').tween('opacity', '1');
			}				
		}
		try{
			if(hideshow == 'show'){
				var article = $$('div#blades div.active div.article')[0];
				var contentHolder = article.getChildren('div.contentholder')[0];
				contentHolder.addEvent('mousewheel', function(e){
					e.stop();
					this.makeScrollBarScroll(e.wheel);
				}.bind(this));
				
				var contentScrollHeight = contentHolder.getScrollSize().y;
				var contentHeight = contentHolder.getStyle('height').toInt();
				this.options.scrollRatio = contentScrollHeight / contentHeight;
				this.setScrollBar();
			}
			if(hideshow == 'hide'){
				this.options.scrollRatio = 1;
				this.setScrollBar();
			}
		}
		catch(e){
			console.log(e);
		}
	},
	resizeNow: function(){
		if(this.options.showArticle == true){
			var beforeY = $(this.options.scrollElement).getStyle('height').toInt();
			$(this.options.scrollElement).setStyle('height', document.html.clientHeight);
			var ratio = beforeY / $(this.options.scrollElement).getStyle('height').toInt();
			$(this.options.scrollElement).getChildren('div.scrollspace')[0].setStyle('height', $(this.options.scrollElement).getChildren('div.scrollspace')[0].getStyle('height').toInt() * ratio);
		}
		else{
			$(this.options.scrollElement).setStyle('height', document.html.clientHeight);
			$(this.options.scrollElement).getChildren('div.scrollspace')[0].setStyle('height', 1);
		}
		
		this.options.browserWidth	= document.html.clientWidth - this.options.scrollBarWidth;
		this.options.browserHeight	= document.html.clientHeight;
		this.options.bladesElement.setStyles({
			'width': this.options.browserWidth,
			'height': this.options.browserHeight
		});			
		$each(this.options.blades, function(blade,index){
			blade.options.parentOptions = this.options;
			blade.setBladeStyles();
			blade.scaleImage();
		}.bind(this));
	
	},
	createBlades: function(){
		$each(this.options.bladesElement.getChildren(), function(blade, index) {
			this.options.blades.push( new MooBlade( {
					bladeElement: blade,
					bladeIndex: index,
					parentOptions: this.options
				}
			) );
		}.bind(this) );
		this.setBladesEvents();
	},
	rebuildBlades: function(){
		//rebuild dom
		this.options.bladesElement.appendChild(this.options.blades[0].bladeDiv);

		//rebuild array
		var newBlades = new Array;
		for(var i = 1; i< this.options.blades.length; i++){
			newBlades.push(this.options.blades[i]);
		}
		newBlades.push(this.options.blades[0]);
		this.options.blades = newBlades;

		$each(this.options.blades, function(blade,index){
			blade.options.bladeIndex = index;
			blade.setBladeStyles();
			blade.unPeekBladeHelper();
		});
		this.showBlade();
	},
	removeBladesEvents: function(){
		$each(this.options.blades, function( blade, index){
			blade.buttonDiv.removeEvents(['click', 'mouseenter', 'mouseleave']);
			blade.imageButtonQuoteDiv.removeEvents(['mouseenter', 'mouseleave', 'click']);
			blade.shadowDiv.removeEvents(['mouseenter', 'mouseleave', 'click']);
			blade.shadowClickDiv.removeEvents(['click']);
			blade.removeEvents('moveOutComplete');
		})
	
	},
	setBladesEvents: function(){
		$each(this.options.blades, function( blade, index){
			blade.buttonDiv.addEvents({
				'click': function(e){
					if(this.options.blades.indexOf(blade) == 0){
						blade.toggleArticle();
					}
				}.bind(this),
				'mouseenter': function(e){
					e.stop();
					if(this.options.blades.indexOf(blade) == 0){
						blade.highlightLabel();
					}
				}.bind(this),
				'mouseleave': function(e){
					e.stop();
					if(this.options.blades.indexOf(blade) == 0){
						blade.lowlightLabel();
					}
				}.bind(this)
			});
			blade.imageButtonQuoteDiv.addEvents({
				'mouseenter': function(e){
					e.stop();
					if(this.options.blades.indexOf(blade) != 0){
						this.options.blades[this.options.blades.indexOf(blade) -1].peekBladeHelper();
						for(var i =0; i<this.options.blades.indexOf(blade); i++){
							//this.options.blades[i].peekBladeHelper();
						}
					}
				}.bind(this),
				'mouseleave': function(e){
					e.stop();
					if(this.options.blades.indexOf(blade) != 0){
						this.options.blades[this.options.blades.indexOf(blade) -1].unPeekBladeHelper();
						for(var i =0; i<this.options.blades.indexOf(blade); i++){
							//this.options.blades[i].unPeekBladeHelper();
						}
					}
				}.bind(this),
				'click': function(e){
					if(this.options.blades.indexOf(blade) != 0){
						this.showBlade(blade);
					}
				}.bind(this)
			});	
			blade.shadowDiv.addEvents({
				'mouseenter': function(e){
					e.stop();
					blade.peekBladeHelper();
				}.bind(this),
				'mouseleave': function(e){
					e.stop();
					blade.unPeekBladeHelper();
				}.bind(this),
				'click': function(e){
					e.stop();
					if($chk(this.options.blades[this.options.blades.indexOf(blade) +1])){
						this.options.showArticle = false;
						this.showBlade(this.options.blades[this.options.blades.indexOf(blade) +1]);
					}
				}.bind(this)
			});
			blade.shadowClickDiv.addEvents({
				'mouseenter': function(e){
					e.stop();
					if($chk(this.options.blades[this.options.blades.indexOf(blade) +1])){
						this.options.blades[this.options.blades.indexOf(blade) +1].buttonDiv.addClass('button-hover');
					}
				}.bind(this),
				'mouseleave': function(e){
					e.stop();
					if($chk(this.options.blades[this.options.blades.indexOf(blade) +1])){
						this.options.blades[this.options.blades.indexOf(blade) +1].buttonDiv.removeClass('button-hover');
					}
				}.bind(this),				
				'click': function(e){
					e.stop();
					if($chk(this.options.blades[this.options.blades.indexOf(blade) +1])){
						this.options.showArticle = true;
						this.showBlade(this.options.blades[this.options.blades.indexOf(blade) +1]);
					}
				}.bind(this)
			});			
			blade.addEvent('moveOutComplete', function(){
				this.rebuildBlades();
			}.bindWithEvent(this));
			blade.addEvent('hideArticle', function(){
				this.toggleArticle('hide');
			}.bindWithEvent(this));
			blade.addEvent('showArticle', function(){
				this.toggleArticle('show');
			}.bindWithEvent(this));				
		}.bind(this));
	},
	showBlade: function(blade){
		if($chk(blade)) this.showThisBlade = blade;
		//recursive function
		if(this.options.blades[0] != this.showThisBlade){
			this.options.blades[0].moveOut();
		}
		else{
			this.showThisBlade.bladeDiv.addClass('active');
			if(this.options.showArticle == true) this.showThisBlade.toggleArticle();
		}
	}
});

var MooBlade = new Class({
	Implements: [Options, Events],
	
	options: {},
	'bladeDiv'					:'',
	'shadowDiv' 				: '',
	'articleDiv' 				: '',
	'imageButtonQuoteDiv' 		: '',
	'buttonQuoteDiv' 			: '',
	'imageDiv' 					: '',
	'imageLink'					: '',
	'imageCanvas'				: '',
	'imageCanvasContent'		: '',
	'buttonDiv'					: '',
	'quoteDiv'					: '',
	'articleShown'				: false,
	'buttonDivMarginLeftSave'	: 0,
	'leftSave'					: 0,
	'quoteSave'					: 0,

	initialize: function(options){
		this.setOptions(options);
		this.bladeDiv					= this.options.bladeElement;
		this.shadowDiv 					= this.options.bladeElement.getChildren('div.shadow')[0];
		this.shadowClickDiv				= this.shadowDiv.getChildren('div.shadow-click')[0];
		this.articleDiv 				= this.options.bladeElement.getChildren('div.article')[0];
		this.articleContentDiv			= this.articleDiv.getChildren('div.contentholder')[0];
		this.imageButtonQuoteDiv 		= this.options.bladeElement.getChildren('div.image-button-quote')[0];
		this.buttonQuoteDiv 			= this.imageButtonQuoteDiv.getChildren('div.button-quote')[0];
		this.imageDiv 					= this.imageButtonQuoteDiv.getChildren('div.image')[0];
		this.quoteDiv 					= this.buttonQuoteDiv.getChildren('div.quote')[0];
		this.imageLink 					= this.imageDiv.getChildren('a')[0].get('href');
		this.imageCanvas 				= this.imageDiv.getChildren('canvas')[0];
		this.image 						= new Image();
		this.buttonDiv					= this.buttonQuoteDiv.getChildren('div.button')[0];
		this.articleShown				= false;
		this.buttonDivMarginLeftSave	= 0;
		this.leftSave					= 0;
		this.quoteTopSave				= this.quoteDiv.getStyle('margin-top').toInt();
		this.quoteLeftSave				= this.quoteDiv.getStyle('margin-left').toInt();
		this.setBladeStyles();
		if(Browser.Engine.trident == true){
			this.image.src = this.imageLink;
			this.imageCanvas.appendChild(this.image);
		}
		else{
			this.imageCanvasContent			= this.imageCanvas.getContext('2d');
		}
		this.scaleImage();
	},
	setBladeStyles: function(){
		this.bladeDiv.setStyles({
			'width': this.options.parentOptions.browserWidth + this.options.parentOptions.shadowWidth + this.options.parentOptions.articleWidth,
			'height': this.options.parentOptions.browserHeight,
			'z-index': this.options.parentOptions.zindexStart+(this.options.parentOptions.zindexStop-(this.options.bladeIndex*this.options.parentOptions.zindexStep)),
			'left': 0 - ((this.options.parentOptions.numBlades-this.options.bladeIndex-1) * this.options.parentOptions.buttonWidth) - this.options.parentOptions.articleWidth,
			'top': 0 - ((this.options.bladeIndex) * this.options.parentOptions.browserHeight)
		});
		this.leftSave = 0 - ((this.options.parentOptions.numBlades-this.options.bladeIndex-1) * this.options.parentOptions.buttonWidth) - this.options.parentOptions.articleWidth;
		this.imageButtonQuoteDiv.setStyles({
			'width': this.options.parentOptions.browserWidth,
			'height': this.options.parentOptions.browserHeight
		});
		this.shadowClickDiv.setStyles({
			'width': this.options.parentOptions.shadowWidth,
			'height': this.options.parentOptions.buttonHeight
		})
		this.imageDiv.setStyles({
			'width': this.options.parentOptions.browserWidth,
			'height': this.options.parentOptions.browserHeight,
			'z-index': this.options.parentOptions.zindexStart+(this.options.parentOptions.zindexStop-(this.options.bladeIndex*this.options.parentOptions.zindexStep))+1
		});
		this.buttonQuoteDiv.setStyles({
			'width': this.options.parentOptions.browserWidth - (Math.ceil((this.options.parentOptions.browserWidth-this.options.parentOptions.contentWidth) /2)),
			'height': this.options.parentOptions.browserHeight,
			'z-index': this.options.parentOptions.zindexStart+(this.options.parentOptions.zindexStop-(this.options.bladeIndex*this.options.parentOptions.zindexStep))+2,
			'margin-left': Math.ceil((this.options.parentOptions.browserWidth-this.options.parentOptions.contentWidth) /2)
		});
		this.quoteDiv.setStyles({
			'margin-top': this.quoteTopSave - this.options.parentOptions.buttonHeight + this.options.parentOptions.quoteHeightOffset,
			'margin-left': this.quoteLeftSave + (this.options.parentOptions.buttonWidth*(this.options.parentOptions.numBlades-1))
		});
		this.buttonDiv.setStyles({
			'margin-left': this.options.parentOptions.browserWidth - Math.ceil((this.options.parentOptions.browserWidth-this.options.parentOptions.contentWidth) /2) - this.options.parentOptions.buttonWidth,
			'height': this.options.parentOptions.buttonHeight
		});
		this.buttonDivMarginLeftSave = this.options.parentOptions.browserWidth - Math.ceil((this.options.parentOptions.browserWidth-this.options.parentOptions.contentWidth) /2) - this.options.parentOptions.buttonWidth;
		
		if($chk(this.articleContentDiv)){
			this.articleContentDiv.setStyles({
				'height': (this.options.parentOptions.browserHeight - this.articleContentDiv.getStyle('margin-top').toInt())
			});
		}
		
	},
	moveOut: function(){
		if(this.articleShown) this.toggleArticle();
		this.bladeDiv.removeClass('active');
		
		var myFx = new Fx.Tween(this.bladeDiv);
		var leftPos = 0- this.options.parentOptions.browserWidth - this.options.parentOptions.shadowWidth - this.options.parentOptions.articleWidth - ((this.options.parentOptions.numBlades-this.options.bladeIndex-1) * this.options.parentOptions.buttonWidth);
		myFx.start('left', leftPos).chain(function(){
			this.fireEvent('moveOutComplete');
		}.bind(this));
	},
	toggleArticle: function(){
		if(this.articleShown == false){
			this.articleDiv.tween('width', this.options.parentOptions.articleWidth);
			this.buttonDiv.addClass('button-active');
			this.articleShown = true;
			this.fireEvent('showArticle');
		}
		else{
			this.articleDiv.tween('width', 0);
			this.buttonDiv.removeClass('button-active');
			this.articleShown = false;
			this.fireEvent('hideArticle');
		}
	},
	showArticle: function(){
		if(this.articleShown == false){
			this.toggleArticle();
		}
	},
	highlightLabel: function(){	},
	lowlightLabel: function(){	},
	peekBlade: function(){
		//this.shadowDiv.setStyle('background-image', 'none');
		//this.buttonDiv.setStyle('margin-left', this.buttonDivMarginLeftSave - 16);
	},
	unPeekBlade: function(anim){
		//this.shadowDiv.setStyle('background-image', 'url('+this.options.parentOptions.shadowImage+')');
		//if($chk(anim)) this.buttonDiv.tween('margin-left', this.buttonDivMarginLeftSave);
		//else this.buttonDiv.setStyle('margin-left', this.buttonDivMarginLeftSave);
	},
	peekBladeHelper: function(){
		this.shadowDiv.setStyle('background-image', 'none');
	},
	unPeekBladeHelper: function(){
		this.shadowDiv.setStyle('background-image', 'url('+this.options.parentOptions.shadowImage+')');
	},	
	scaleImage: function(){
		var imageWidth				= this.options.parentOptions.imageSizeX;
		var imageHeight				= this.options.parentOptions.imageSizeY;
		var imageRatio				= imageHeight / imageWidth;		
		
		//When browser is taller	
		if (this.options.parentOptions.browserHeight > this.options.parentOptions.browserWidth){
			imageHeight = this.options.parentOptions.browserHeight;
			imageWidth = this.options.parentOptions.browserHeight/imageRatio;
			if (this.options.parentOptions.browserWidth > imageWidth){
				imageWidth = this.options.parentOptions.browserWidth;
				imageHeight = this.options.parentOptions.browserWidth * imageRatio;
			}
		}			
		//When browser is wider
		if (this.options.parentOptions.browserWidth >= this.options.parentOptions.browserHeight){
			imageWidth = this.options.parentOptions.browserWidth;
			imageHeight = this.options.parentOptions.browserWidth * imageRatio;
			if (this.options.parentOptions.browserHeight > imageHeight){
				imageHeight = this.options.parentOptions.browserHeight;
				imageWidth = this.options.parentOptions.browserHeight/imageRatio;
			}
		}
		if(Browser.Engine.trident == true){
			this.image.width = imageWidth;
			this.image.height = imageHeight;
		}
		else{
			this.image.onload = function(){
				this.imageCanvas.width = imageWidth;
				this.imageCanvas.height = imageHeight;
				this.imageCanvasContent.drawImage(this.image, 0, 0, imageWidth, imageHeight);
			}.bind(this);
			this.image.src = this.imageLink;
		}
	}	
});