/* <![CDATA[ */
window.addEvent('domready', function(){

	var currentDetailPane = 0;
	var currentProductPane = 0;
	
	/* Product Detail Logic */
	
	var detailScroll = new Fx.Scroll('detail_viewport', {
		wait: false,
		duration: 600,
		transition: Fx.Transitions.Quad.easeInOut
	});

	detailScroll.toElement('product' + currentDetailPane);

	var detailElements = $$('.product_detail_container');
	

	/* ******** Left and right arrows ********* */
	$('db_right').addEvent('click', function(event) {
		if (currentDetailPane < (detailElements.length-1)) {currentDetailPane++;} else {currentDetailPane = 0;}
		var pane = 'product' + currentDetailPane;
		
		event = new Event(event).stop();
		detailScroll.toElement(pane);
	});
	
	$('db_left').addEvent('click', function(event) {
		if (currentDetailPane > 0) {currentDetailPane--;} else {currentDetailPane = detailElements.length -1;}
		var pane = 'product' + currentDetailPane;

		event = new Event(event).stop();
		detailScroll.toElement(pane);
	});
	
	
	/* Specifications Logic */
	
	var specButtons = $$('.product_specs');
	
	$('specifications').setStyles({
		opacity:0
	});

	specButtons.each(function(element) {
		element.addEvent('click', function(event) {
			var btnIndex = element.getProperty('id').substring(10);
			var newSpecHtml = $('specs_' + btnIndex).innerHTML;
			
			event = new Event(event).stop();
			$('specs_content').innerHTML = newSpecHtml;
			$('specifications').setStyles({
				opacity:1
			});
		});
	});
	
	$('specs_close_button').addEvent('click', function(event) {
		event = new Event(event).stop();
		$('specifications').setStyles({
			opacity:0
		});
	});
	
	
	/* Product Browser Logic */

	var browserScroll = new Fx.Scroll('product_viewport', {
		wait: false,
		duration: 600,
		transition: Fx.Transitions.Quad.easeInOut
	});

	browserScroll.toElement('product_link' + currentProductPane);
	
	var productBrowseElements = $$('#pb_list li');
	
	/* ******** Left and right arrows ********* */
	$('pb_right').addEvent('click', function(event) {
		event = new Event(event).stop();
		if (currentProductPane < (productBrowseElements.length - 3)) {
			currentProductPane = currentProductPane + 3;
		} 
		else {
			currentProductPane = 0;
		}
		var pane = 'product_link' + currentProductPane;
		
		browserScroll.toElement(pane);
	});
	
	$('pb_left').addEvent('click', function(event) {
		event = new Event(event).stop();
		if (currentProductPane > 3) {
			currentProductPane = currentProductPane - 3;
		} 
		else if (currentProductPane > 0) {
			currentProductPane = 0;
		}
		else {
				currentProductPane = productBrowseElements.length -1;
		}
		var pane = 'product_link' + currentProductPane;

		browserScroll.toElement(pane);
	});
	
	
	productBrowseElements.each(function(element) {
		element.addEvent('click', function(event) {
			var liIndex = element.getProperty('id').substring(12);
			var pane = 'product' + liIndex;

			event = new Event(event).stop();
			detailScroll.toElement(pane);
			currentDetailPane = liIndex;
		});
	});
	
	
	/* ******** Range Selection Droplist logic for product page ********* */
	
	var expanded = false;
	
	var solutionsMask = $('range_droplist_mask');
	var solutionsButton = $('range_droplist_heading');
	var solutionsDroplist = $('range_droplist');
	var solutionsLinks = $$('.range_link');
			
	var showDroplist = new Fx.Styles('range_droplist', {duration: 300, transition: Fx.Transitions.Sine.easeOut});
		
	// Initialise Styles
	solutionsMask.setStyles({
		height:0
	});
	
	solutionsDroplist.setStyles({
		top:-200
	});
	
	//Button Logic
	solutionsButton.addEvent('click', function(event) {
		event = new Event(event).stop();
		
		if (expanded == false) {
			solutionsMask.setStyles({
				height:500
			});
			showDroplist.start({
				'top': 0
			});
			expanded = true;
		}
/*		else {
			showDroplist.start({
				'top': -200
			});
			solutionsMask.setStyles({
				height:0
			});
			expanded = false;
		}
*/		
	});

	// * Close Droplist
	document.addEvent('click', function(event) {
		event = new Event(event);
		
		if (expanded == true) {
			posx = solutionsDroplist.getPosition().x;
			posy = solutionsDroplist.getPosition().y;
			droplistWidth = 265;
			droplistHeight = solutionsDroplist.getStyle('height');
			
			//alert('Pos x: ' + posx + '\nPos y: ' + posy + '\nWidth: ' + droplistWidth + '\nHeight: ' + droplistHeight);
			
			if (
				((event.page.x < posx) || (event.page.x > (posx + droplistWidth))) ||
				((event.page.y < posy) || (event.page.y > (posy + droplistHeight)))
				) {
				showDroplist.start({
					'top': -200
				});
				solutionsMask.setStyles({
					height:0
				});
				expanded = false;
			}
		}
		
	});


});
/* ]]> */