// fires when the HTML have been loaded without the images
Element.observe(document, 'dom:loaded', function(){
	setPreviewClicks(); // set click events on preview elements
	previewMainSlideshow(); // activate preview slideshow
	setContactHeaderClicks(); // set click events on contact headers on product pages
});

// activate on the body "onload" - fires when all images have been loaded
Event.observe(window, 'load', function() {
	boxHeights.equalise("mainMenu", "mainMenuOuter", "mainContent", "mainContentExtras"); // equalise the height of the menu and the content - mainMenu and it's outer box are both resized to fix IE bug
	resizeFooter(); // resize the footer box, so the bottom always fills all the way to the bottom of the browser
});

// activate resize function on window resizing
Event.observe(window, 'resize', function() {
	resizeFooter();
});


// resize boxes/columns accordingly to which is the tallest 
var boxHeights = {
	maxh: 0,
	boxes: Array(),
	num: 0,
	equalise: function() {
		if (this.boxes.length == 0) {
			this.num = arguments.length;
			if (!arguments[this.num]) this.num = this.num-1; // check if the last item in the arg list is present, else do not include it (used on the frontpage to check for extras column
			for (var i=0;i<this.num;i++) if (!$(arguments[i])) return;
			this.boxes = arguments;
		}
		this.maxheight();
		for (var i=0;i<this.num;i++){
			$(this.boxes[i]).style.height = this.maxh+"px";
		}
	},
	maxheight: function() {
		var heights = new Array();
		for (var i=0;i<this.num;i++) {
			if (navigator.userAgent.toLowerCase().indexOf('opera') == -1) {
				heights.push($(this.boxes[i]).scrollHeight);
			} else {
				heights.push($(this.boxes[i]).offsetHeight);
			}
		}
		heights.sort(this.sortNumeric);
		this.maxh = heights[this.num-1];
	},
	sortNumeric: function(f,s) {
		return f-s;
	},
	reset: function() {
		for (var i=0;i<this.num;i++){
			$(this.boxes[i]).setStyle({
				height: "auto"
			});
		}
		this.equalise();
	}
}

function resizeFooter(){
	oFooter = $("mainFooter");
	iFooterHeightNormal = 65;
	iFooterPadding = 25
	if (oFooter){
		iBottomOffset = (Position.positionedOffset(oFooter)[1]) + (Element.getDimensions(oFooter).height);
		iBodyHeight = Element.getDimensions(document.body).height;
		if (iBottomOffset < iBodyHeight) {
			iNewHeight = Element.getDimensions(oFooter).height + (iBodyHeight-iBottomOffset) - iFooterPadding;
			oFooter.setStyle({height: iNewHeight + "px"})
		}
		else {
			if (iBottomOffset > iBodyHeight){
				if ((Position.positionedOffset(oFooter)[1] + iFooterHeightNormal) > iBodyHeight){
					oFooter.setStyle({height: iFooterHeightNormal + "px"})
				} else {
					iNewHeight = iBodyHeight-Position.positionedOffset(oFooter)[1]-iFooterPadding;
					oFooter.setStyle({height: iNewHeight + "px"})
				}
			}
		}
	}
}

// sets onclick events on preview elements (used on frontpage)
function setPreviewClicks(){
	var oUl = $("productPreviews");
	if(oUl){
		aLi = oUl.getElementsByTagName("li");
		for (var i=0,iLiMax=aLi.length;i<iLiMax;i++){
			// if we are on the main preview list element, set onclick events on its children
			if (i==0) {
				aSpan = Element.childElements(aLi[i]);
				for (var j=0,iSpanMax=aSpan.length;j<iSpanMax;j++){
					if (j != iSpanMax-1){
						aSpan[j].style.display = "none";
					}
					aSpan[j].style.cursor = "pointer";
					aSpan[j].onclick = function(){
						window.location = this.getElementsByTagName("a")[0];
					}
				}
			} else { // else set the onclick events on the actual list element
				aLi[i].style.cursor = "pointer";
				aLi[i].onclick = function(){
					window.location = this.getElementsByTagName("a")[0];
				}
			}
		}
	}
}

// activates slideshow on main preview element (used on frontpage)
function previewMainSlideshow(){
	var oUl = $("productPreviews");
	
	// check if the variables are already set previously
	if (!window.iPreviewTransitionDelay) window.iPreviewTransitionDelay = 10;
	if (!window.iPreviewTransitionDuration) window.iPreviewTransitionDuration = 3;
	
	if(oUl){
		var aElm = Element.childElements(oUl.getElementsByTagName("li")[0]);
		
		// run the following if there is more than one element
		if (aElm.length > 1){
		// run through the elements until the active one is found
			for (var i=0,iElmMax=aElm.length;i<iElmMax;i++){
				if(aElm[i].style.display != "none"){
					// set the active element to be faded
					Effect.Fade(aElm[i],{
						delay: window.iPreviewTransitionDelay,
						duration: window.iPreviewTransitionDuration
					});
					
					// figure out if there is a "next" or we need to start all over
					var j = 0;
					if((i+1) != iElmMax) j = i+1;
					
					// set the next element to appear
					Effect.Appear(aElm[j],{
						delay: (window.iPreviewTransitionDelay+1),
						duration: window.iPreviewTransitionDuration,
						afterFinish: previewMainSlideshow
					});
					
					// stop the loop as we don't need it anymore
					break;
				}
			}
		}
	}
}

// set click events on contact headers on product pages
function setContactHeaderClicks() {
	var header = $$(".mProductContact h3 a")[0];
	if (header){
		header.observe("click", function(e){
			var contactForm = e.element().up().next(); // retrive the contact form after the event element 
			if (contactForm.style.display == "none"){
				contactForm.show();
				contactForm.scrollTo();
				if (contactForm.select("input")[0]) contactForm.select("input")[0].focus();
			} else {
				contactForm.hide();
			}
			boxHeights.reset(); // run the resizing script again, so the layout doesn't break
			Event.stop(e); // stop the click event on the link, as we don't need it anymore
		});
	}
}