var clickX, clickY;
var imgX, imgY;
var red, blue, green;
var hue, sat, value;
var xmlhttp;
var curBox = "";
var ajax_loaded = false;
var select1;
var comp1;
var comp2;
var comp3;
var comp4;
var var1;
var var2;
var var3;
var var4;
var colorImageOpen = false;
var helpShown = false;

var sizeSet = new Array(1);
var colorSelect = new Array(1);
var imageName = new Array(1);
sizeSet[0] = false;
colorSelect[0] = "primaryColor";

function setPrimary(product_number){
	colorSelect[product_number] = "primaryColor";
	document.getElementById("primaryColor"+product_number).style.border = "3px #000000 solid";
	document.getElementById("secondaryColor"+product_number).style.border = "1px #000000 solid";
}

function setSecondary(product_number){
	colorSelect[product_number] = "secondaryColor";
	document.getElementById("secondaryColor"+product_number).style.border = "3px #000000 solid";
	document.getElementById("primaryColor"+product_number).style.border = "1px #000000 solid";
}

function getMouseX(evt) {
	if (!evt) {
		evt = window.event;
	}
	if (evt.pageX) {
		return evt.pageX - 1;
	}else if (evt.clientX) {
		return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft) - 2;
	}else{
		return 0;
	}
}
function getMouseY(evt) {
	if (!evt) {
		evt = window.event;
	}
	if (evt.pageY) {
		return evt.pageY - 1;
	}else if (evt.clientY) {
		return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) - 2;
	}else {
		return 0;
	}
}

function totalOffsetLeft(obj) {
	var offset = 0;

	if(obj.offsetParent){
		offset = obj.offsetLeft;

		while(obj = obj.offsetParent){
			offset += obj.offsetLeft;
		}
	}

	return offset;
}

function totalOffsetTop(obj) {
	var offset = 0;

	if(obj.offsetParent){
		offset = obj.offsetTop;

		while(obj = obj.offsetParent){
			offset += obj.offsetTop;
		}
	}

	return offset;
}

function deleteImage(image_id){
	xmlhttp = start_ajax();

	url = customerLocation + "image_color.php?delete=" + image_id;

	xmlhttp.open("GET", url);

	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4){
			applyResponse(xmlhttp.responseText);

			if(text[4] != ""){
				alert("This image belongs to a room and cannot be deleted here.\nTo remove this image, delete the room from your account.");
			}

		}
	};

	xmlhttp.send(null);

	return false;
}

function getCustomerHTML(starting_image_path, starting_image_id){
	if(!ajax_loaded){
		document.getElementById("image_color_holder").innerHTML = "<table width='150' height='100' style='margin-left:9px'><tr valign=middle><td align=center><img src='"+imageLocation+"/lightbox/loading.gif'><br><span style='color:#AAAAAA;'>loading</span></td></tr></table>";


		xmlhttp = start_ajax();

		url = customerLocation + "image_color.php";

		xmlhttp.open("GET",url);

		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4){
				applyResponse(xmlhttp.responseText, starting_image_path, starting_image_id);
			}
		};

		xmlhttp.send(null);
	}

}

function sendColor(e, obj, product_number){

	clickX = getMouseX(e) - totalOffsetLeft(obj);
	clickY = getMouseY(e) - totalOffsetTop(obj);

	xmlhttp = start_ajax();

	if (typeof(imageName[product_number]) == 'undefined') {
		imageName[0] = getObject('default_image_name').value;
	}

	url = "/customer/return_color.php?image=" + imageName[product_number] + "&x=" + clickX + "&y=" + clickY;

	xmlhttp.open("GET",url);

	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4){
			document.getElementById(colorSelect[product_number] + product_number).style.backgroundImage = "";
			document.getElementById(colorSelect[product_number] + product_number).style.backgroundColor = "#"+xmlhttp.responseText.split(',')[0];
			red = xmlhttp.responseText.split(',')[1];
			green = xmlhttp.responseText.split(',')[2];
			blue = xmlhttp.responseText.split(',')[3];

			RGBtoHSV(red, green, blue);

			document.getElementById(colorSelect[product_number] + "Hue" + product_number).value = hue;
			document.getElementById(colorSelect[product_number] + "Sat" + product_number).value = sat;
			document.getElementById(colorSelect[product_number] + "Value" + product_number).value = value;

			if(colorSelect[product_number] == "primaryColor") {
				setSecondary(product_number);
			}else{
				setPrimary(product_number);
			}
		}
	};

	xmlhttp.send(null);


}

function sendCustomerColor(e, obj, product_number){
	var providerLocation = document.getElementById('providerLocation').value;

	clickX = getMouseX(e) - totalOffsetLeft(obj);
	clickY = getMouseY(e) - totalOffsetTop(obj);

	xmlhttp = start_ajax();

	url = customerLocation + "return_color.php?customer_image=" + imageName[product_number] + "&x=" + clickX + "&y=" + clickY;

	xmlhttp.open("GET",url);

	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4){
			document.getElementById(colorSelect[product_number] + product_number).style.backgroundImage = "";
			document.getElementById(colorSelect[product_number] + product_number).style.backgroundColor = "#"+xmlhttp.responseText.split(',')[0];
			red = xmlhttp.responseText.split(',')[1];
			green = xmlhttp.responseText.split(',')[2];
			blue = xmlhttp.responseText.split(',')[3];

			setCustomerColor(red, green, blue);
		}
	};

	xmlhttp.send(null);
}

function setCustomerColor(r, g, b){
	var tempColor = RGBToHex(r, g, b);
	var userAgent = navigator.userAgent;
	var isFirefox = userAgent.match("Firefox");
	var isIE7 = userAgent.match("MSIE 7");
	var isIE6 = userAgent.match("MSIE 6");
	if(curBox != ""){
		if (isFirefox || isIE7) {
			curBox.childNodes[0].style.backgroundImage = "url("+thinMask+")";
		}else{
			//curBox.childNodes[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='"+thinMask+"')"
			curBox.childNodes[0].style.border = "1px solid #dddddd";
		}
	}

	curBox = document.getElementById('primaryColor0');

	curBox.style.backgroundImage = "";
	curBox.style.backgroundColor = "#"+tempColor;
	curBox.onclick=function(){selectColorBox(this, tempColor);};

	if (isFirefox || isIE7) {
		curBox.childNodes[0].style.backgroundImage = "url("+thickMask+")";
	}else{
		//curBox.childNodes[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='"+thickMask+"')"
		curBox.childNodes[0].style.border = "1px solid #000000";
	}

	//document.getElementById('primaryColor0').innerHTML = r + " " + b + " " + g

	//set color on artfinder
	document.getElementById('color_image_value_temp').value = tempColor;

	RGBtoHSV(r, g, b);

	newHue = hue + 128;
	if(newHue > 255){
		newHue -= 256;
	}

	newValue = Math.floor(((value/256) * ((sat/256) - 1) + 1) * 256);

	newSat = Math.floor(value * sat / newValue);

	HSVtoRGB(newHue, newSat, newValue);
	comp1 = RGBToHex(red, green, blue);
	document.getElementById('compColor10').style.backgroundImage = "";
	document.getElementById('compColor10').style.backgroundColor = "#" + comp1;
	//document.getElementById('compColor10').innerHTML = red + "-" + green + "-" + blue;
	document.getElementById('compColor10').onclick=function(){selectColorBox(this, comp1);};

	newHue = hue + 85;
	if(newHue > 255){
		newHue -= 256;
	}

	HSVtoRGB(newHue, newSat, newValue);
	comp2 = RGBToHex(red, green, blue);
	document.getElementById('compColor20').style.backgroundImage = "";
	document.getElementById('compColor20').style.backgroundColor = "#" + comp2;
	//document.getElementById('compColor20').innerHTML = red + "-" + green + "-" + blue;
	document.getElementById('compColor20').onclick=function(){selectColorBox(this, comp2);};

	newHue = hue + 171;
	if(newHue > 255){
		newHue -= 256;
	}

	HSVtoRGB(newHue, newSat, newValue);
	comp3 = RGBToHex(red, green, blue);
	document.getElementById('compColor30').style.backgroundImage = "";
	document.getElementById('compColor30').style.backgroundColor = "#" + comp3;
	//document.getElementById('compColor30').innerHTML = red + "-" + green + "-" + blue;
	document.getElementById('compColor30').onclick=function(){selectColorBox(this, comp3);};

	newHue = hue + 128;
	if(newHue > 255){
		newHue -= 256;
	}

	HSVtoRGB(newHue, sat, value);
	comp4 = RGBToHex(red, green, blue);
	document.getElementById('compColor40').style.backgroundImage = "";
	document.getElementById('compColor40').style.backgroundColor = "#" + comp4;
	//document.getElementById('compColor40').innerHTML = red + "-" + green + "-" + blue;
	document.getElementById('compColor40').onclick=function(){selectColorBox(this, comp4);};

	HSVtoRGB(hue, sat+50, value+40);
	var1 = RGBToHex(red, green, blue);
	document.getElementById('varColor10').style.backgroundImage = "";
	document.getElementById('varColor10').style.backgroundColor = "#" + var1;
	//document.getElementById('varColor10').innerHTML = red + "-" + green + "-" + blue;
	document.getElementById('varColor10').onclick=function(){selectColorBox(this, var1);};

	HSVtoRGB(hue, sat-50, value+40);
	var2 = RGBToHex(red, green, blue);
	document.getElementById('varColor20').style.backgroundImage = "";
	document.getElementById('varColor20').style.backgroundColor = "#" + var2;
	//document.getElementById('varColor20').innerHTML = red + "-" + green + "-" + blue;
	document.getElementById('varColor20').onclick=function(){selectColorBox(this, var2);};

	HSVtoRGB(hue, sat+50, value-40);
	var3 = RGBToHex(red, green, blue);
	document.getElementById('varColor30').style.backgroundImage = "";
	document.getElementById('varColor30').style.backgroundColor = "#" + var3;
	//document.getElementById('varColor30').innerHTML = red + "-" + green + "-" + blue;
	document.getElementById('varColor30').onclick=function(){selectColorBox(this, var3);};

	HSVtoRGB(hue, sat-50, value-40);
	var4 = RGBToHex(red, green, blue);
	document.getElementById('varColor40').style.backgroundImage = "";
	document.getElementById('varColor40').style.backgroundColor = "#" + var4;
	//document.getElementById('varColor40').innerHTML = red + "-" + green + "-" + blue;
	document.getElementById('varColor40').onclick=function(){selectColorBox(this, var4);};
}

function selectColorBox(obj, color){
	var userAgent = navigator.userAgent;
	var isFirefox = userAgent.match("Firefox");
	var isIE7 = userAgent.match("MSIE 7");
	var isIE6 = userAgent.match("MSIE 6");

	if (isFirefox || isIE7) {
		curBox.childNodes[0].style.backgroundImage = "url("+thinMask+")";
	}else{
		//curBox.childNodes[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='"+thinMask+"')"
		curBox.childNodes[0].style.border = "1px solid #dddddd";
	}


	if (isFirefox || isIE7) {
		obj.childNodes[0].style.backgroundImage = "url("+thickMask+")";
	}else{
		//obj.childNodes[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='"+thickMask+"')"
		obj.childNodes[0].style.border = "1px solid #000000";
	}

	document.getElementById("color_image_value_temp").value = color;

	curBox = obj;

}

function RGBtoHSV(r, g, b){
	var min, max, delta;

	min = Math.min(r, Math.min(b, g));
	max = Math.max(r, Math.max(b, g));

	//get value
	value = max;

	delta = max - min;

	if(delta < 1) {
		delta = 1;
	}

	if(max != 0){
		sat = Math.floor(delta / max * 255);
	}else{
		sat = 0;
		hue = 1;
		return;
	}

	if(r == max){
		hue = (g - b) / delta * 256;
	}else if(g == max){
		hue = 512 + (b - r) / delta * 256;
	}else{
		hue = 1024 + (r - g) / delta * 256;
	}

	hue = Math.floor(hue / 6);
	if(hue < 0) {
		hue += 256;
	}
}

function HSVtoRGB(h, s, v){
	var i, f, p, q, t;

	if(s < 0) {
		s = 0;
	}else if(s > 255) {
		s = 255;
	}

	if(v < 0) {
		v = 0;
	}else if(v > 255) {
		v = 255;
	}

	if(s == 0){
		red = v;
		blue = v;
		green = v;
		return;
	}

	h /= 42.6;
	i = Math.floor(h);
	f = h - i;

	p = Math.floor(v * (256 - s) / 256);
	q = Math.floor(v * (256 - s * f) / 256);
	t = Math.floor(v * (256 - s * (1 - f)) / 256);

	switch(i){
		case 0:
			red = v;
			green = t;
			blue = p;
			break;
		case 1:
			red = q;
			green = v;
			blue = p;
			break;
		case 2:
			red = p;
			green = v;
			blue = t;
			break;
		case 3:
			red = p;
			green = q;
			blue = v;
			break;
		case 4:
			red = t;
			green = p;
			blue = v;
			break;
		default:
			red = v;
			green = p;
			blue = q;
			break;
	}
}

function HexToRGB(H) {
		hexR = H.substr(0,2);
		red = parseInt((hexR).substring(0,2),16);
		hexG = H.substr(2,2);
		green = parseInt((hexG).substring(0,2),16);
		hexB = H.substr(4,2);
		blue = parseInt((hexB).substring(0,2),16);
}

function RGBToHex(R,G,B) {
	return (toHex(R)+toHex(G)+toHex(B));
}

function toHex(N) {
	if (N==null) {
		return "00";
	}
	N=parseInt(N);
	if (N==0 || isNaN(N)) {
		return "00";
	}
	N=Math.max(0,N);
	N=Math.min(N,255);
	N=Math.round(N);
	return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
}

function updateColor(e, obj, product_number){

	//reset size of color box image
	if(sizeSet[product_number] == false){
		imgX = document.getElementById("clickImage"+product_number).offsetWidth;
		imgY = document.getElementById("clickImage"+product_number).offsetHeight;

		for(i = 1; i < 6; i++){
			document.getElementById("imgColor"+i+product_number).style.width = (imgX * 30) + "px";
			document.getElementById("imgColor"+i+product_number).style.height = (imgY * 20) + "px";

			document.getElementById("imgHolder"+i+product_number).style.width = (imgX * 30) + "px";
			document.getElementById("imgHolder"+i+product_number).style.height = (imgY * 20) + "px";
		}

		sizeSet[product_number] = true;
	}

	clickX = getMouseX(e) - totalOffsetLeft(obj);
	clickY = getMouseY(e) - totalOffsetTop(obj);

	for(i = 1; i < 6; i++){
		document.getElementById("imgHolder"+i+product_number).style.marginTop = (-clickY * 20) + "px";
		document.getElementById("imgHolder"+i+product_number).style.marginLeft = (-clickX * 30) + "px";
	}
}

function setPicture(path, pic, product_number, image_id){
	document.getElementById("clickImage"+product_number).src = path+pic;
	sizeSet[product_number] = false;
	for(i = 1; i < 6; i++){
		document.getElementById("imgColor"+i+product_number).src = path+pic;
	}
	imageName[product_number] = pic;

	if(image_id != "") {
		delete_id = image_id;
	}
}

function applyResponse(response, starting_image_path, starting_image_id){

	text = response.split("****delimiter****");
	document.getElementById("image_color_holder").innerHTML = text[0];

	if(text[2] != ""){
		setPicture(text[1], text[2], 0, text[3]);

		if(document.getElementById('color_image_value').value != ""){
			HexToRGB(document.getElementById('color_image_value').value);
			setCustomerColor(red, green, blue);
		}

	}

	if(starting_image_path != undefined && starting_image_id != undefined){
		setPicture(text[1], starting_image_path, 0, starting_image_id);
	}

	ajax_loaded = true;

}

function openImageColor(starting_image_path, starting_image_id){
	if(colorImageOpen){
		document.getElementById('color_image_popup').style.display='none';

		//document.getElementById("selected_color_image").style.marginTop = "12px";
		document.getElementById("selected_color_image_mask").style.marginTop = "10px";

		document.getElementById("color_image_value").value = '';

		colorImageOpen = false;

	}else{
		getCustomerHTML(starting_image_path, starting_image_id);

		document.getElementById('color_popup').style.display='none';

		document.getElementById('color_image_popup').style.display='block';

		colorImageOpen = true;
	}
}


function saveImageColor(){
	if(document.getElementById('color_image_value_temp').value != ""){

		var hexColor = document.getElementById("color_image_value_temp").value;

		document.getElementById("color_image_value").value = hexColor;

		//document.getElementById("selected_color_image").style.backgroundImage = "";
		document.getElementById("selected_color_image").style.backgroundColor = "#"+hexColor;
		//document.getElementById("selected_color_image").style.marginTop = "2px";
		document.getElementById("selected_color_image_mask").style.marginTop = "0px";

	}else{
		colorImageOpen = false;
	}

	document.getElementById("color_image_popup").style.display = 'none';
}

function showImageColorHelp(){
	if(helpShown){
		document.getElementById("image_color_help").style.display = "none";
		helpShown = false;
	}else{
		document.getElementById("image_color_help").style.display = "block";
		helpShown = true;
	}
}

AIM = {

    frame : function(c) {

        var n = 'f' + Math.floor(Math.random() * 99999);
        var d = document.createElement('DIV');
        d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
        document.body.appendChild(d);

        var i = document.getElementById(n);
        if (c && typeof(c.onComplete) == 'function') {
            i.onComplete = c.onComplete;
        }

        return n;
    },

    form : function(f, name) {
        f.setAttribute('target', name);
    },

    submit : function(f, c) {
        AIM.form(f, AIM.frame(c));
        if (c && typeof(c.onStart) == 'function') {
            return c.onStart();
        } else {
            return true;
        }
    },

    loaded : function(id) {
        var i = document.getElementById(id);
        if (i.contentDocument) {
            var d = i.contentDocument;
        } else if (i.contentWindow) {
            var d = i.contentWindow.document;
        } else {
            var d = window.frames[id].document;
        }
        if (d.location.href == "about:blank") {
            return;
        }

        if (typeof(i.onComplete) == 'function') {
            i.onComplete(d.body.innerHTML);
        }
    }

};

function startCallback() {

    return true;
}

function completeCallback(response) {
    // make something useful after (onComplete)
    applyResponse(response);
}

function show_image_select(path, pic, image_id){
	setTimeout("timed_show_image_select('"+path+"','"+pic+"','"+image_id+"')", 500);
}

function timed_show_image_select(path, pic, image_id){
	showtab("open","block");
	hidetab("closed");
	fixSlider();

	if(colorImageOpen) {
		openImageColor();
	}

	ajax_loaded = false;
	openImageColor(pic, image_id);

}