/*global $, $$, active*/
var active = false;

var MoreInfo = Class.create({
	
	initialize: function() {		
		this.updateMoreInfoList();
		this.insertHTML();		
	},
	
	insertHTML: function() {
		var objBody = $$('body')[0];
		if (!$('overlay')) {
			objBody.appendChild(Builder.node('div', {id:'overlay'}));
		}
		objBody.appendChild(Builder.node('div', {id:'infoBox'}, [
			Builder.node('div', {id:'infoBoxInner'}, [
				Builder.node('div', {id:'infoBoxHeader'}, [
					Builder.node('div', {id:'infoBoxHeaderLeft'}),
					Builder.node('div', {id:'infoBoxHeaderRight'})
				]),
				Builder.node('div', {id:'infoBoxMiddle'}, [
					Builder.node('div', {id:'infoBoxMiddle1'}, [
						Builder.node('div', {id:'infoBoxMiddle1Left'}), 
						Builder.node('div', {id:'infoBoxMiddle1Right'}, [
							Builder.node('img', {id:'infoBoxMiddle1RightImage'})
						])
					]),
					Builder.node('div', {id:'infoBoxMiddle2', style:'display: none'}, [
						Builder.node('div', {id:'infoBoxMiddle2Left'}), 
						Builder.node('div', {id:'infoBoxMiddle2Right'}, [
						  Builder.node('img', {id:'infoBoxMiddle2RightImage'})
						])
					]),
					Builder.node('div', {id:'infoBoxMiddle3', style:'display: none'}),
					Builder.node('div', {id:'infoBoxMiddle4', style:'display: none'}),
					Builder.node('div', {id:'infoBoxMiddle5', style:'display: none'})
				]),
				Builder.node('div', {id:'infoBoxPrice'}),
			  Builder.node('div', {id:'infoBoxBottom'}, [
				  Builder.node('div', {id:'infoBoxBottomInner'}, [
				    Builder.node('div', {id:'infoBoxBottomButton1'}),
				  	Builder.node('div', {id:'infoBoxBottomButtonWrapper'}, [
				  		Builder.node('div', {id:'infoBoxBottomButton2'}),
				  		Builder.node('div', {id:'infoBoxBottomButton3'}),
				  		Builder.node('div', {id:'infoBoxBottomButton4'}),
				  		Builder.node('div', {id:'infoBoxBottomButton5'})
				  	])
		  	  ])
			  ])
		  ])
		]));			
		
		var th = this;
    (function(){
      var ids = 'overlay infoBox infoBoxInner infoBoxHeaderLeft infoBoxHeaderRight ' + 
                'infoBoxMiddle1 infoBoxMiddle1Left infoBoxMiddle1Right infoBoxMiddle1RightImage ' +
                'infoBoxMiddle2 infoBoxMiddle2Left infoBoxMiddle2Right infoBoxMiddle2RightImage ' + 
                'infoBoxMiddle3 infoBoxMiddle3Left infoBoxMiddle3Right ' + 
                'infoBoxMiddle4 infoBoxMiddle4Left infoBoxMiddle4Right ' +      
                'infoBoxMiddle5 infoBoxMiddle5Left infoBoxMiddle5Right ' +   
                'infoBoxPrice infoBoxBottomButton1 infoBoxBottomButton2 infoBoxBottomButton3 infoBoxBottomButton4 infoBoxBottomButton5';   
      $w(ids).each(function(id){ th[id] = $(id); });
    }).defer();
    
    $('overlay').hide().observe('click', (function() { this.end(); }).bind(this));
		$('infoBox').hide().observe('click', (function(event) { if (event.element().id == 'infoBox') this.end(); }).bind(this));
		$('infoBoxHeaderRight').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));		
		$('infoBoxBottomButton1').observe('click', (function(event) { event.stop(); this.showInfo(this.infoBoxMiddle1); }).bind(this));
		$('infoBoxBottomButton2').observe('click', (function(event) { event.stop(); this.showInfo(this.infoBoxMiddle2); }).bind(this));
		$('infoBoxBottomButton3').observe('click', (function(event) { event.stop(); this.showInfo(this.infoBoxMiddle3); }).bind(this));
		$('infoBoxBottomButton4').observe('click', (function(event) { event.stop(); this.showInfo(this.infoBoxMiddle4); }).bind(this));
		$('infoBoxBottomButton5').observe('click', (function(event) { event.stop(); this.showInfo(this.infoBoxMiddle5); }).bind(this));		
	},
	
	updateMoreInfoList: function() {
		this.moreInfoList = Prototype.emptyFunction;
		
		document.observe('click', (function(event){
			var target = event.findElement('a[rel=moreinfo]');
			if (target) {
				event.stop();
				this.start(target);	
			}
		}	).bind(this));
	},
	
	start: function(infoLink) {
		
		var node = infoLink.parentNode;
		
		// Test to see if we display this info
		if (infoLink.parentNode.parentNode.getElementsByTagName('input')[0].value == '') {
			return;	
		}
		
		var arrayPageSize   = this.getPageSize();
		var arrayPageScroll = document.viewport.getScrollOffsets();
		var infoBoxTop      = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
		var infoBoxLeft     =  arrayPageScroll[0];
		
		$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
		
		this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
		
		new Effect.Appear(this.overlay, { duration: 0.2, from: 0.0, to: 0.8 });

		// get data for the info box
		
		// Header
	  var header = node.select('.moreInfoData_Header')[0];
		if (header) {
			this.infoBoxHeaderLeft.update(header.innerHTML);
		}
		
		// Info 1
		this.infoBoxBottomButton1.update('Click here to View Specification Details');	
		var marketing = node.select('.moreInfoData_Marketing')[0];
		if (marketing) {
			this.infoBoxMiddle1Left.update(marketing.innerHTML);	
		}

		// Info 2
		var techMarketing = node.select('.moreInfoData_TechMarketing')[0];
		if (techMarketing) {
			this.infoBoxMiddle2Left.update(techMarketing.innerHTML);	
		}
		
		// Info 3
		this.infoBoxMiddle3.update('Not available');
			
		// Info 4
		this.infoBoxMiddle4.update('Not available');
			
		// Info 5
		this.infoBoxMiddle5.update('Not available');
				
		// Images
		var image = node.select('.moreInfoData_Image')[0];
		if (image) {
			var imgPreloader = new Image();
			imgPreloader.onload = (function(){
				this.infoBoxMiddle1RightImage.src = image.innerHTML + '?height=320';
				this.infoBoxMiddle2RightImage.src = image.innerHTML + '?height=320';
			}).bind(this);	
			imgPreloader.src = image.innerHTML + '?height=320';
		}
		
		// Price
		var price = node.select('.moreInfoData_Price')[0];
		if (price) {
			this.infoBoxPrice.update(price.innerHTML);	
		}
				
		this.infoBox.setStyle({ top: infoBoxTop + 'px', left: infoBoxLeft + 'px' }).show();		
		
		this.currentInfoBoxMiddle = this.infoBoxMiddle1;
	},
	
	showInfo: function(fadeIn) {
		if (active === false) {			
			if (fadeIn !== this.currentInfoBoxMiddle) {
				active = true;
				new Effect.Appear(fadeIn, { duration: 0.2 });
				new Effect.Fade(this.currentInfoBoxMiddle, { duration: 0.2 });
				this.currentInfoBoxMiddle = fadeIn;
				setTimeout(function() {
					active = false;					
				}, 0.2);
			}
		}
	},	
	
	end: function() {
		this.infoBox.hide();
		this.currentInfoBoxMiddle.hide();
		this.infoBoxMiddle1.show();
		new Effect.Fade(this.overlay, { duration: 0.2 });
		$$('select', 'object', 'embed').each(function(node){ node.style.visablity = 'visible' });
	},
	
	getPageSize: function () {
		var xScroll, yScroll, windowWidth, windowHeight;		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else {
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}			
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}
		return [pageWidth,pageHeight];
	}	
});

document.observe('dom:loaded', function () { new MoreInfo(); });