var clicker;

Event.observe(window, 'load', function() {

	var optionLists = document.getElementsByClassName('product-colours-and-options-list', 'ul');
	for(var i = 0; i < optionLists.length; i++) {

		var colourLinks = optionLists[i].getElementsBySelector('a');
		for(var j = 0; j < colourLinks.length; j++) {

			Event.observe(colourLinks[j], 'mouseover', showSwatch.bindAsEventListener(colourLinks[j]));
			Event.observe(colourLinks[j], 'mouseout', hideSwatch);
			Event.observe(colourLinks[j], 'click', function(e) { Event.stop(e) });

			// preload images
			var image = new Image();
			image.src = colourLinks[j].href;
		}
	}

	var openers = document.getElementsByClassName('opener', 'p');
	var extendedOptions = document.getElementsByClassName('product-colours-and-options-extended-content');

	for(var i = 0; i < openers.length; i++) {

		Event.observe(openers[i], 'click', openOptions.bindAsEventListener(openers[i]));

		/* Because IE6 doesn't support the :hover pseudoclass on anything but 'a' elements */
		Event.observe(openers[i], 'mouseover', function() {

			this.addClassName('hover');
		}.bindAsEventListener(openers[i]));
		Event.observe(openers[i], 'mouseout', function() {

			this.removeClassName('hover');
		}.bindAsEventListener(openers[i]));
	}

	if(openers && openers.length > 0 && extendedOptions && extendedOptions.length > 0) {

		var productAccordion = new fx.Accordion(openers, extendedOptions,
				{
					opacity: true,
					onComplete: function() {

						var extendedOptions = document.getElementsByClassName('product-colours-and-options-extended-content');
						for(var i = 0; i < extendedOptions.length; i++) {

							if(extendedOptions[i].style.visibility == 'visible') {

								var openLink = extendedOptions[i].previous('.opener');
								openLink.style.visibility = 'hidden';
							}
						}

						clicker.windowResized();
					}.bind(clicker)
				}
		);
	}


	var dimensionsOpeners = document.getElementsByClassName('product-dimensions-opener', 'p');
	var dimensionsContent = document.getElementsByClassName('product-dimensions-content');

	for(var i = 0; i < dimensionsOpeners.length; i++) {

		Event.observe(dimensionsOpeners[i], 'click', openOptionsDimensions.bindAsEventListener(dimensionsOpeners[i]));
		/* Because IE6 doesn't support the :hover pseudoclass on anything but 'a' elements */
		Event.observe(dimensionsOpeners[i], 'mouseover', function() {

			this.addClassName('hover');
		}.bindAsEventListener(dimensionsOpeners[i]));
		Event.observe(dimensionsOpeners[i], 'mouseout', function() {

			this.removeClassName('hover');
		}.bindAsEventListener(dimensionsOpeners[i]));
	}

	if(dimensionsOpeners && dimensionsOpeners.length > 0 && dimensionsContent && dimensionsContent.length > 0) {
		var dimensionsAccordion = new fx.Accordion(dimensionsOpeners, dimensionsContent,
				{
					opacity: true,
					onComplete: function() {

						var extendedOptions = document.getElementsByClassName('product-dimensions-content', 'div');
						for(var i = 0; i < extendedOptions.length; i++) {

							if(extendedOptions[i].style.visibility == 'visible') {
								if(extendedOptions[i].style.height == '1%') {								
									/* Stops some ridiculous behaviour in IE6 that causes the open
									content to suddenly snap back closed */
									if(Prototype.Browser.IE) {
										var height = 0;
										if(extendedOptions[i].down().tagName == 'P') {
											height = Element.getHeight(extendedOptions[i].down());
										}
										extendedOptions[i].style.height = height + Element.getHeight(extendedOptions[i].down('img')) + 'px';
									}
								}

								var openLink = extendedOptions[i].previous('.product-dimensions-opener');
								//openLink.style.visibility = 'hidden';
							}
						}

						clicker.windowResized();
					}.bind(clicker)
				}
		);
	}
	
	// var downloadOpeners = document.getElementsByClassName('download-opener', 'a');
	// var downloadContent = document.getElementsByClassName('download-content');
// 	
	// for(var i = 0; i < downloadOpeners.length; i++) {
		// Event.observe(downloadOpeners[i], 'click', function(e) {
			// document.getElementsByClassName('download-active').each(function(el) {
				// el.removeClassName('download-active');
			// });
// 			
			// Event.element(e).addClassName('download-active');
// 			
			// Event.stop(e);
		// });
	// }
// 	
	// if(downloadOpeners && downloadOpeners.length > 0 && downloadContent && downloadContent.length > 0) {
		// var downloadAccordion = new fx.Accordion(downloadOpeners, downloadContent,
			// {
				// opacity: true,
				// alwaysHide: true,
				// onComplete: function() {	
					// var extendedOptions = document.getElementsByClassName('download-content');
					// for(var i = 0; i < extendedOptions.length; i++) {
// 					
						// if(extendedOptions[i].style.visibility == 'visible') {
							// if(extendedOptions[i].style.height == '1%') {		
								// /* Stops some ridiculous behaviour in IE6 that causes the open
								// content to suddenly snap back closed */
								// if(Prototype.Browser.IE) {
								    // // extendedOptions[i].style.height = Element.getHeight(extendedOptions[i].down('ul')) + 'px';
								// }
							// }
// 
							// var openLink = extendedOptions[i].previous('.product-dimensions-opener');
							// //openLink.style.visibility = 'hidden';
							// // openLink.style.display = 'none';
						// }
					// }				
// 							
					// clicker.windowResized();
				// }.bind(clicker)
			// }
		// );
	// }
// 	
    // var cadOpeners = document.getElementsByClassName('cad-opener', 'a');
    // var cadContent = document.getElementsByClassName('cad-content');
//     
    // for(var i = 0; i < cadOpeners.length; i++) {
        // Event.observe(cadOpeners[i], 'click', function(e) {
            // document.getElementsByClassName('cad-active').each(function(el) {
                // el.removeClassName('cad-active');
            // });
//             
            // Event.element(e).addClassName('cad-active');
//             
            // Event.stop(e);
        // });
    // }
//     
    // if(cadOpeners && cadOpeners.length > 0 && cadContent && cadContent.length > 0) {
//         
        // var cadAccordion = new fx.Accordion(cadOpeners, cadContent,
            // {
                // opacity: true,
                // alwaysHide: true,
                // onComplete: function() {
                    // var extendedOptions = document.getElementsByClassName('cad-content');
                    // for(var i = 0; i < extendedOptions.length; i++) {
//                     
                        // if(extendedOptions[i].style.visibility == 'visible') {
//                             
                            // if(extendedOptions[i].style.height == '1%') {                               
                                // /* Stops some ridiculous behaviour in IE6 that causes the open
                                // content to suddenly snap back closed */
                                // if(Prototype.Browser.IE) {
                                    // // extendedOptions[i].style.height = Element.getHeight(extendedOptions[i].down('ul')) + 'px';
                                // }
                            // }
// 
                            // var openLink = extendedOptions[i].previous('.product-dimensions-opener');
                            // //openLink.style.visibility = 'hidden';
                        // }
                    // }               
//                             
                    // clicker.windowResized();
                // }.bind(clicker)
            // }
        // );
    // }
	
	var galleryOpeners = document.getElementsByClassName('product-gallery-opener-link', 'a');
	var galleryContent = document.getElementsByClassName('product-gallery-content');	
	
	if(galleryOpeners && galleryOpeners.length > 0 && galleryContent && galleryContent.length > 0) {	
		var galleryAccordion = new fx.Accordion(galleryOpeners, galleryContent,
				{
					opacity: true,
					onComplete: function() {
						var extendedOptions = document.getElementsByClassName('product-gallery-content');
						for(var i = 0; i < extendedOptions.length; i++) {
							if(extendedOptions[i].style.height == '1%' && Prototype.Browser.IE) {
								/* Stops some ridiculous behaviour in IE6 that causes the open
								content to suddenly snap back closed */
								extendedOptions[i].style.height = Element.getHeight(extendedOptions[i].down('div')) + 'px';
							}
						}			
					
						clicker.windowResized();
					}.bind(clicker)
				}
		);

		galleryOpeners.each(function(element) {
			Event.observe(element, 'click', function(e) { 
				new Effect.ScrollTo($('product-information'), {duration: 0.01});
				Event.stop(e); 
			});
		});
	}	

	clicker = new Clicker('product-options', {topelement: 'product-category-nav', bottomelement: 'product-information', padding: 10, bottomOffset: 10, topOffset: 18});
}.bind(clicker));



function openOptions()
{
	hideAllOptions();

	var containingRow = this.up('tr');
	if(containingRow && containingRow.previous('tr')) {

		var descriptionText = containingRow.previous('tr').down('.product-colours-and-options-extended-description');
		descriptionText.addClassName('open');
	}
}



function hideAllOptions()
{
	var openRows = document.getElementsByClassName('open', 'td');
	for(var i = 0; i < openRows.length; i++) {

		openRows[i].removeClassName('open');
	}

	var openLinks = document.getElementsByClassName('opener', 'p');
	for(var i = 0; i < openLinks.length; i++) {

		openLinks[i].style.visibility = 'visible';
		openLinks[i].removeClassName('hover');
	}
}


function openOptionsDimensions(e)
{
	var openHeaders = document.getElementsByClassName('dimensions-open', 'h5');
	for(var i = 0; i < openHeaders.length; i++) {

		openHeaders[i].removeClassName('dimensions-open');
		openHeaders[i].next('.product-dimensions-opener').style.visibility = 'visible';
		openHeaders[i].next('.product-dimensions-opener').removeClassName('hover');
	}

	var header = this.previous('h5');
	if(header) {

		header.addClassName('dimensions-open');
	}
}




function showSwatch()
{
	hideSwatch();

	var swatchImage = this.href;
	var parentDiv = Element.up(this, 'div');

	var swatch = Builder.node('div', {id:'product-colours-and-options-swatch'}, [
			Builder.node('img', {src: swatchImage})
	]);

	/* Browser sniffing sucks, but so does IE. We need to take an extra 320 pixels off
	of the position of the 'a' element for some unfathomable reason */
	var wrongOffset = Prototype.Browser.IE ? 320 : 0;

	swatch.style.left = (Position.positionedOffset(this)[0] - 25) - wrongOffset + 'px';
	swatch.style.top = (Position.positionedOffset(this)[1] - 3) + 'px';

	this.addClassName('selected');

	parentDiv.appendChild(swatch);
}



function hideSwatch()
{
	var optionLists = document.getElementsByClassName('product-colours-and-options-list', 'ul');
	for(var i = 0; i < optionLists.length; i++) {

		var selectedAs = optionLists[i].getElementsBySelector('.selected');
		for(var j = 0; j < selectedAs.length; j++) {

			selectedAs[j].removeClassName('selected');
		}
	}

	if($('product-colours-and-options-swatch')) {
		$('product-colours-and-options-swatch').remove();
	}
}