window.onload = function() {
	init();
}

Array.prototype.indexOf = function(entry) {	
	for (var i=0; i < this.length; i++) {
		if (this[i] == entry) return i;
	}
	return -1;
}

//prototype stylee
function $(id) {
	return document.getElementById(id);
}

var imageLoader;

function imageLoaded(imageUrl) {
	alert("imageLoaded!");
	imageLoader.loaded(imageUrl);
}

function init() {
	imageLoader = new ImageLoader();
	
	var palette = $("colourPalette");
	for (var i=0; i < palette.childNodes.length; i++) {
		var c = palette.childNodes[i];
		
		if (c.nodeName == "DIV" && c.className == "colour") {			
			c.onclick = colourClick;
		}
	}

	
	palette = $("productPalette");
	for (var k=0; k < palette.childNodes.length; k++) {
		var p = palette.childNodes[k];

		if (p.nodeName == "DIV" && p.className == "product") {
			p.onclick = productClick;
		}
	}

	var tabs = getElementsByTagAndClass(document, "LI", "tab");

	for (var j=0; j < tabs.length; j++) {
		tabs[j].onmouseover = tabOver;
		tabs[j].onmouseout = tabOut;
		tabs[j].onclick = tabClick;
	}	
	
	
	selectTab($("bare"));

	var iniProd = "";
	var iniTab = "";

			
	//drop # from front
	if (document.location.hash != "") {
		iniProd = document.location.hash.substr(1);
        iniTab = $("colour");
	} else {
		iniProd = "excel";
		iniTab = $("product");
	}

	setProduct(iniProd);
	setColour(getProductDefaultColour(iniProd));
	selectTab(iniTab);
}

function colourClick() {
	$("currentColour").innerHTML = this.getElementsByTagName("P")[0].innerHTML;

	var block = this.getElementsByTagName("DIV")[0];	
	$("bareColorMask").style.backgroundColor = block.style.backgroundColor;
	$("bathroom1ColorMask").style.backgroundColor = block.style.backgroundColor;
	$("bathroom2ColorMask").style.backgroundColor = block.style.backgroundColor;
	$("bathroom3ColorMask").style.backgroundColor = block.style.backgroundColor;
	$("room1ColorMask").style.backgroundColor = block.style.backgroundColor;
	$("currentColourSwatch").style.backgroundColor = block.style.backgroundColor;
}

function productClick() {
	var lbl = this.getElementsByTagName("SPAN")[0];
    var p = lbl.innerHTML;//label text	

	//alert(getImageURL(p));
	setProduct(p);
}

function setProduct(product) { 	
	$("currentProduct").innerHTML = getProductLabel(product);
	$("currentProduct").href = product + ".html";
	setBackground("bareColorMask", getImageURL(product, "bare"));	
	setBackground("bathroom1ColorMask", getImageURL(product, "bathroom1"));
	setBackground("bathroom2ColorMask", getImageURL(product, "bathroom2"));
	setBackground("bathroom3ColorMask", getImageURL(product, "bathroom3"));
	setBackground("room1ColorMask", getImageURL(product, "room1"));
}

function getProductNode(product) {
	var prods = $("productPalette").getElementsByTagName("SPAN");
	for (var i=0; i < prods.length; i++) {
		if (prods[i].innerHTML == product) {
			return prods[i].parentNode;
		}
	}
	return null;
}

function getProductLabel(product) {		
	var node = getProductNode(product);
	return (node == null)?"":node.getElementsByTagName("P")[0].innerHTML;
}

function getProductDefaultColour(product) {
	var node = getProductNode(product);
	return (node == null)?"RAL 9005":node.getElementsByTagName("P")[1].innerHTML;
}	

function setColour(ralColour) {
	var colours = $("colourPalette").getElementsByTagName("P");
	
	var c = null;
	for (var i=0; i < colours.length; i++) {
		if (colours[i].innerHTML == ralColour) {
			c = colours[i];
			break;
		}
	}	
	if (c == null) return;
    	

    colourClick.apply(c.parentNode);
}

function selectTab(tab) {
	tabOver.apply(tab);
	tabClick.apply(tab);
	tabOut.apply(tab);
}

function tabOver() { 
	this.className = this.className + "Over";
}

function tabOut() { 
	this.className = this.className.substring(0, this.className.length - 4);
}

function tabClick() { 
	if (!Element.isClass(this, "tabSelectedOver")) {
		this.className = "tabSelectedOver";
	

		var tabs = getTabs(this);

		var tabPanels = getTabPanels(this);

		var index = 0;

		for (var i=0; i < tabs.length; i++) {
			if (tabs[i] == this) {
				index = i;
			} else {
				tabs[i].className = "tab";
			}
		}

		for (var j = 0; j < tabPanels.length; j++) {			
			tabPanels[j].className = (index == j)?"tabPanelSelected":"tabPanel";			
		}
	}
}

function getTabs(tab) {
	var tabs = tab.parentNode;
	var out = [];
	for (var i= 0; i < tabs.childNodes.length; i++) {
		var t = tabs.childNodes[i];
		if (t.nodeName != "#text" && t.className.indexOf("tab") != -1) {
			out.push(t);
		}
	}
	return out;
}

function getTabPanels(tab) {
	var tabHolder = tab.parentNode.parentNode;
	var panels = [];
	for (var i=0; i < tabHolder.childNodes.length; i++) {
		var p = tabHolder.childNodes[i];
		if (p.nodeName != "#text" && p.className.indexOf("tabPanel") != -1) {
			panels.push(p);
		}
	}
	return panels;

}


function getImageURL(product, tab) {
	var extra = (tab == "bare"?"":("_" + tab));
	return "images/products/mask/"  + product + extra + "_mask.png";
}

function setBackground(id, imageUrl) {
	$(id).src = "images/loading.gif";
	imageLoader.fetchImage(id, imageUrl);
}

function setBackgroundPNG(elemRef, imageURL) {

	new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent);
	
	if (navigator.userAgent.indexOf("IE") != -1 && RegExp.$1 < 7) {		
		elemRef.src = "images/blank.gif";
		elemRef.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ imageURL + "', sizingMethod='crop')";
	} else {		
		//elemRef.style.backgroundImage = "url('" + imageURL + "')";
		elemRef.src = imageURL;
	}
}

var Element = {
	isClass: function(elemRef, className) {
		return (elemRef.className.search('(^|\\s)' + className + '(\\s|$)') != -1);
	},

	replaceClass: function(elemRef, oldClass, newClass) {
		var fullClass = elemRef.className;
		var pos = fullClass.indexOf(oldClass);
		if (pos == -1) return;

		var newFullClass = 
			fullClass.substring(0, pos) +
			newClass +
			fullClass.substr(pos + oldClass.length);

		elemRef.className = newFullClass;
	},

	setClassTo: function(elemRef, something) {
		this.replaceClass(elemRef, elemRef.className, Util.toSomething(something, elemRef.className));
	},

	setClassFrom: function(elemRef, something) {
		this.replaceClass(elemRef, elemRef.className, Util.fromSomething(something, elemRef.className));
	}
}

function getElementsByTagAndClass(elemRef, tag, className) {
	var elems = elemRef.getElementsByTagName(tag);
	var elemsOut = new Array();
	for (var i=0; i < elems.length; i++) {
		if (Element.isClass(elems[i], className)) {
			elemsOut.push(elems[i]);
		}
	}
	return elemsOut;
}


function ImageLoader () {
	this.images = new Array();
	this.targets = new Array();
}	
	
ImageLoader.prototype._getCache = function(imageUrl) {
	//alert(this.images.length);
	var out = null;
	try {
		out = this.images[imageUrl];
	} catch (e) {
		out = null;		
	}
	return out;
}
	
ImageLoader.prototype.fetchImage = function(targetId, imageUrl) {
	this.targets[targetId] = imageUrl;
	var c = this._getCache(imageUrl);
	if (c == null) {
		//alert("null");
		c = new ImageCache(targetId, imageUrl);
		this.images[imageUrl] = c;
		c.load(imageUrl);
	} else if (c.loaded == true) {
		c.tryTarget();
	}
}

ImageLoader.prototype.loaded = function(imageUrl) {
	var c = this._getCache(imageUrl);
	if (this.targets[c.targetId] == imageUrl) {
		c._loaded();
	}	
}

function ImageCache(targetId, imageUrl) {
	//alert(imageUrl + " " + targetId);
	
	this.imageUrl = imageUrl;
	this.targetId = targetId;
	this.loaded = false;	
}

ImageCache.prototype.load = function(imageUrl) {
	//alert("load " + this.imageUrl);
	var _img = new Image();
	var f = function () { imageLoader.loaded(imageUrl); };
	_img.onload = f;
	_img.onerror = f;
	_img.src = imageUrl;
}

ImageCache.prototype._loaded = function() {
	//alert("loaded " + this.imageUrl);
	this.loaded = true;
	this.tryTarget();
}

ImageCache.prototype.tryTarget = function() {
	//alert("tryTarget");	
	var t = $(this.targetId);
    //alert("target is " + (t == null?"":"not ") + "null");
	//alert(this.imageUrl);
	new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})").exec(navigator.userAgent);

	if (navigator.userAgent.indexOf("IE") != -1 && RegExp.$1 < 7) {				
		t.src = "images/blank.gif";
		t.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ this.imageUrl + "', sizingMethod='crop')";
	} else {		
		//elemRef.style.backgroundImage = "url('" + imageURL + "')";
		t.src = this.imageUrl;
	}
}