// JavaScript Document


//
//					***************************************************
//					* Linosoft technology Powered By Shirtsdotnet.com *
//					***************************************************
//

var sca_l;

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

addDOMLoadEvent(function() {
      initialize()
});

function initialize()
{
	optionlist(-1);
	h2panels();
	shortcut_rollovers();
	errormessage();
}

function errormessage()
{
	if(document.getElementById("SDN_error_close_button") != null)
	{
		button = document.getElementById("SDN_error_close_button");
		button.onclick = hide_error;
	}
}

function hide_error()
{
	document.getElementById("SND_error_overlay_critical").style.display = "none";
}


function h2panels()
{
	// style can be "closed" or "open"

	// obtain panel container element;
	var panel_el = document.getElementById('options');
	if (!panel_el) return;
	
	var elements, ihtml, i;
	elements = document.getElementsByTagName('H2');
	
	
	//this wil make sure that the panels take all the whitespace they can take.
	var minHeight, headspace;
	
	minHeight = 374;
	headspace = 19 * elements.length;
	minHeight -= headspace;
	
	if(elements.length > 1)
	{
		for(i = 0; i < elements.length; i++)
		{
			
			// Obtain anchor tag within heading;
			// nb. get heading first because A tags may be elsewhere in markup;
			
			
			var anchor_el = elements[i].getElementsByTagName('A')[0];
			if(anchor_el.id != "fc_p" && anchor_el.id != "bd_p")
			{
				// bind onclick event;
				anchor_el.onclick=ExpandCollapse;
				// add HREF (so styling indicates this is a link);
				anchor_el.href='#';
				anchor_el.style.color='#8C8C8C';
				
		
				// identify following DIV element and add reference to it to the heading;
				var div_el = elements[i].nextSibling;
				while (div_el.nextSibling && div_el.nodeType!=1 && div_el.tagName!='DIV') 
					div_el=div_el.nextSibling;
				if (div_el) anchor_el.contentDiv = div_el;
				
				var openpanel;
				openpanel = 0;
				
				if(page != '')
				{
					if(anchor_el.id == page)
					{
						openpanel = i;
					}
					else
					{
						openpanel = -1;
					}
				}
				
				//add arrow
				ihtml = anchor_el.innerHTML;
				anchor_el.innerHTML = "<img src='images_layout/arrow_closed.gif' alt='closed panel arrow' />&nbsp;" + ihtml;
				
				// for first item, set class open, the other elements should be closed
				if (i==openpanel) 
				{
					anchor_el.contentDiv.className='panelcontent open';
					anchor_el.innerHTML = "<img src='images_layout/arrow_open.gif' alt='open panel arrow' />&nbsp;" + ihtml;
					anchor_el.style.color='#000000';
					sdn_shirt_change_focus(anchor_el.id);
				}
				else
				{
					anchor_el.contentDiv.className='panelcontent closed';
				}
				
				//and here we put the actual code in place to make sure the panel takes all the space it needs
				anchor_el.contentDiv.style.minHeight = minHeight + "px";
					//this is for IE6...
				anchor_el.contentDiv.style.height = "100%";
			}
			else
			{
				sdn_shirt_change_focus("fc_p");
			}
		}
	}
	else
	{
		var option, div, a;
		option = document.getElementById("options");
		a = option.getElementsByTagName("a")[0];
		sdn_shirt_change_focus(a.id);
		a = a.innerHTML;
		if(a != "Fit" && a != "Summary")
		{
			div = option.getElementsByTagName("div")[0];
				
			//and here we put the actual code in place to make sure the panel takes all the space it needs
			div.style.minHeight = minHeight + "px";
				//this is for IE6...
			div.style.height = "100%";
		}
	}
}

function ExpandCollapse()
{
	//close all panels
	var elements;
	elements = document.getElementsByTagName('H2');
	for(i = 0; i < elements.length; i++)
	{
		anchor_el = elements[i].getElementsByTagName('A')[0];
		anchor_el.contentDiv.className='panelcontent closed';
		anchor_el.innerHTML = anchor_el.innerHTML.replace(/open/gi,'closed');
		anchor_el.style.color='#8C8C8C';
	}
	
	//open or close the clicked panel
	//IMAGESWAP???
	var ihtml, li
	li = this.parentNode;
	ihtml = this.innerHTML;
	if (this.contentDiv.className=='panelcontent open') 
	{
		this.contentDiv.className='panelcontent closed';
		this.innerHTML = ihtml.replace(/open/gi,'closed');
		this.style.color='#8C8C8C';
	}
	else 
	{
		this.contentDiv.className='panelcontent open';
		this.innerHTML = ihtml.replace(/closed/gi,'open');
		this.style.color='#000000';
	}
	
	sdn_shirt_change_focus(this.id);
	
	// return false to cancel event bubbling and prevent going to link destination;
	return false;
	
}

function sdn_shirt_change_focus(field)
{
	//reset all
	for( i = 1; i < 11; i++)
	{
		id = return_shortcut(i);
		if(id != "")
		{
			classname = document.getElementById(id).className;
			classname = classname.replace(/_active/gi, '_inactive');
			document.getElementById(id).className = classname;
		}
	}
	
	//make field active
	id = return_shortcut(field);
	if(id != "")
	{
		classname = document.getElementById(id).className;
		classname = classname.replace(/_inactive/gi, '_active');
		document.getElementById(id).className = classname;
		sca_l = id;
		if(id == "shortcut_og3")
		{
			classname = document.getElementById("shortcut_og3_short").className;
			classname = classname.replace(/_inactive/gi, '_active');
			document.getElementById("shortcut_og3_short").className = classname;
		}
	}
}

function return_shortcut(field)
{
	switch(field)
	{
		case "cr_p":
		case 1:
		case "shortcut_1":
			id = "shortcut_og2";
			break;
		case "cf_p":
		case 4:
		case "shortcut_4":
			id = "shortcut_og3";
			break;
		case "pt_p":
		case 2:
		case "shortcut_2":
			id = "shortcut_og8";
			break;
		case "pl_p":
		case 3:
		case "shortcut_3":
			id = "shortcut_og5";
			break;
		case "bh_p":
		case 5:
		case "shortcut_5":
			id = "shortcut_og9";
			break;
		case "by_p":
		case 7:
		case "shortcut_7":
			id = "shortcut_og6";
			break;
		case "mm_p":
		case 8:
		case "shortcut_8":
			id = "shortcut_og11";
			break;
		case "ft_p":
		case 9:
		case "shortcut_9":
			id = "shortcut_ogSNIT";
			break;
		case "fc_p":
		case 6:
		case "shortcut_6":
			id = "shortcut_og1";
			break;
		case 10:
		case "shortcut_3_short":
		case "shortcut_10":
			id = "shortcut_og3_short";
			break;
		default:
			id = "";
			break;
	}
	
	return id;
}


function optionlist(panelnr)
{
	var panel_el = document.getElementById('options');
	if(!panel_el) return;
	
	//get all the ul's in div#options
	var ul, j, lengte;
	if(panelnr == -1)
	{
		ul = panel_el.getElementsByTagName("ul");
		lengte = ul.length;
	}
	else
	{
		ul = panel_el.getElementsByTagName("ul")[panelnr];	
		lengte = 1;
	}
	for(j = 0; j < lengte; j++)
	{
		var list, i;
		//get all the li items in the ul's
		if(panelnr == -1)
		{
			list = ul[j].getElementsByTagName("li");
		}
		else
		{
			list = ul.getElementsByTagName("li");
		}
		
		var change;
		change = true
		
		for(i = 0; i < list.length; i++)
		{		
			//attach the onmouseover functionality
			list[i].onmouseover=display_detail;
			list[i].onfocus=display_detail;
			list[i].onmouseout=hide_detail;
			list[i].onblur=hide_detail;
			
			
			//making the image for the popup
			
			
			//from here, we need to change things for the flickering.
			//we need to leave the small image in place. This is called img.
			//we need to change the src of img from left to zoom. This large img is called img_big
			//we need to know the width of img_big for the popup.
			
			var img, img_src, img_src_big, img_big_width;
			img = list[i].getElementsByTagName("img")[0];
			
			img_src = img.src
			img_big_src = img_src.replace(/left/gi, 'zoom');
			
			
			//read the h3 title
			var h3;
			h3 = list[i].getElementsByTagName("h3")[0].innerHTML;
			
			//add the image to the hidden div (div#infopopup)
			var popup, ihtml;
			popup = list[i].getElementsByTagName("div")[0];
			
			make_popup(popup, img_big_src, 200, h3);
			
			
			//bind the select option to the input type
			var input;
			input = list[i].getElementsByTagName("input")[0];
			input.onclick=change_option;
		}
	}
}

function make_image_small(img)
{
	var img_src, img_src_big, img_big_width;
	img_src = img.src;
	img_src_big = img_src; // we need this one later.
	img_src = img_src.replace(/zoom/gi, 'left');
	img.src = img_src;
	
	return img_src_big;
}

function make_popup(popup, img_src_big, img_big_width, h3)
{
	ihtml = popup.innerHTML;
	//here we need the img_src_big, lol
	popup.innerHTML = "<img src='" + img_src_big + "' /><h3><b>"+ h3 + "</b></h3>"+ihtml;
	
	//then we need to give the div a width, so IE6 will display the text in one line
	
	img_big_width = 200;	
	
	popup.style.width = img_big_width+"px";
}

function display_detail()
{
	//"this" is in this case the li element.
	var div;
	div = this.getElementsByTagName("div")[0];
	
	
	//here goes the code to locate the pop over.
	//the pop over is located x pixels left and x pixels top different from the SMALL image.
	var img;
	img = this.getElementsByTagName("img")[0];
	
	display_popup_detail(div, img);
	
}

function display_popup_detail(div, img)
{
	div.className += ' over';
	var position = new Array();
	position = findPos(img);
	position[0] += 50;//50
	position[1] += 45;//45
	div.style.left = position[0]+"px";
	div.style.top = position[1]+"px";
	div.style.textAlign = "center";
	
	selects = document.getElementsByTagName("select");
	for(i = 0; i < selects.length; i++)
	{
		selects[i].style.visibility = 'hidden';
	}
}

function hide_detail()
{
	//"this" is in this case the li element.
	var div;
	div = this.getElementsByTagName("div")[0];
	hide_popup_detail(div);
}

function hide_popup_detail(div)
{
	div.className = 'infopopup';
	
	selects = document.getElementsByTagName("select");
	for(i = 0; i < selects.length; i++)
	{
		selects[i].style.visibility = 'visible';
	}
}

function change_option_shirt(optionnr)
{
	//in this function, we change the shirt, and other options.
	//the functions are located in changeshirt.js
	switch(optionnr)
	{
		case "brand1" :
			change_brand(1);
			break;
		case "brand2" :
			change_brand(2);
			break;
		case "brand3" :
			change_brand(3);
			break;
		case "brand4" :
			change_brand(4);
			break;
		case "brand5" :
			change_brand(5);
			break;
		case "brand6" :
			change_brand(6);
			break;
		case "140002" :
		case "140003" :
		case "140004" :
		case "120001" :
		case "120002" :
		case "120003" :
		case "130001" :
		case "130002" :
		case "130037" :
			update_monogram_text();
			break;
		case "backyoke_no" :
			change_yoke("n");
			break;
		case "backyoke_yes" :
			change_yoke("y");
			break;
		default :
			change_option_nr(optionnr);
			break;
	}	
		
}

function change_option()
{
	//"this" is in this case the input element.
	
	
	//select the ul that contains the radiogroup.
	var ul;
	ul = this.parentNode.parentNode.parentNode;
	
	input = ul.getElementsByTagName("input");
	for(i = 0; i < input.length; i++)
	{		
		id = input[i].id;
		
		
		id_i = id + "_i";
		img = document.getElementById(id_i);
		if(input[i].checked)
		{
			img.className = 'radio_selected';
			change_option_shirt(id);
		}
		else
		{
			img.className = '';
		}
	}
}

function shortcut_rollovers()
{
	var collar, collarrollover, pos_thumb, left_thumb, top_thumb, pos_text, left_text, top_text, left, top;
	
	//get the globaldiv and make the positioning of that one absolute.
	//document.getElementById("shortcut_rollover").style.position = "absolute";
	
	
	for(i=1; i < 11; i++) 
	{
		//get the shortcut element (the image) and the rollover element (the text)
		shortcut = document.getElementById("shortcut_"+i);
		rollover = document.getElementById("rollover_"+i);
		
		shortcut.onmouseover=display_rollover;
		shortcut.onfocus=display_rollover;
		shortcut.onmouseout=hide_rollover;
		shortcut.onblur=hide_rollover;
		
		//get the position of the shortcut
		pos_shortcut = findPos(shortcut);
		left_shortcut = pos_shortcut[0];
		top_shortcut = pos_shortcut[1];
		
		//get the shortcut of the rollover
		pos_rollover = findPos(rollover);
		left_rollover = pos_rollover[0];
		top_rollover = pos_rollover[1];
		
		//because the strange positioning absolute vs relative (or something like that), we need to make some calculations with them.
		left = left_shortcut - left_rollover;
		top = top_shortcut - top_rollover + 65;
		
		//make the text width. for earch number different.
		//155 = max
		var width, textdiv;
		switch(i)
		{
			case 1:
				width = 115;
				left += 38;
				top +=40;
				break;
			case 2:
				width = 85;
				left += 10;
				top +=10;
				break;			
			case 3:
				width = 150;
				left -= 29;
				top += 120;
				break;
			case 4:
				width = 155;
				left += 20;
				top += 3;
				break;
			case 5:
				width = 100;
				left += 100;
				top -= 20;
				break
			case 6:
				width = 110;
				top +=25;
				break;
			case 7:
				width = 80;
				top +=25;
				break;
			case 8:
				width = 70;
				top += 45;
				break;
			case 9:
				width = 130;
				top +=25;
				break;
			case 10:
				width = 100;
				top += 20;
				left += 20;
				break;
			default:
				//90 fits always :p
				width = 90;
				break;
		}
		textdiv = rollover.firstChild;
		textdiv.style.width = width + "px";
		textdiv.style.display = "block";
		
		//make the offset from the shortcut top (because left depends)
		top += 10;
		
		//add the arrow
		if(i < 6 || i > 9)
		{
			left += 64;
			rollover.innerHTML = "<div class='rollover_arrow rollover_right'><img src='images_layout/shortcut_arrow_r.gif' alt='' /></div>" + rollover.innerHTML;
		}
		else
		{
			left -= 204;
			rollover.innerHTML = "<div class='rollover_arrow rollover_left'><img src='images_layout/shortcut_arrow_l.gif' alt='' /></div>" + rollover.innerHTML;
		}
		
		
		rollover.style.left = left + "px";
		rollover.style.top = top + "px";
		rollover.style.display = "none";
		
		
	}
}

function display_rollover()
{
	var id;
	id = this.id;
	
	id_s = return_shortcut(id);
	if(id_s != "")
	{
		classname = document.getElementById(id_s).className;
		classname = classname.replace(/_inactive/gi, '_active');
		document.getElementById(id_s).className = classname;
	}
	
	id = id.replace(/shortcut/gi, 'rollover');
	
	document.getElementById(id).style.display = "block";
}

function hide_rollover()
{
	var id;
	id = this.id;
	
	id_s = return_shortcut(id);
	
	id_s2 = id_s;
	if(id_s2 == "shortcut_og3_short")
	{
		id_s2 = "shortcut_og3";
	}
	if(id_s != "" && sca_l != id_s2)
	{
		classname = document.getElementById(id_s).className;
		classname = classname.replace(/_active/gi, '_inactive');
		document.getElementById(id_s).className = classname;
		if(id_s == "shortcut_og3")
		{
			if(document.getElementById("monogram_on_shirt") != null)
			{
				document.getElementById("monogram_on_shirt").style.visibility = "visible";
			}
		}
	}
	
	id = id.replace(/shortcut/gi, 'rollover');
	
	document.getElementById(id).style.display = "none";
}

var van=new Array();
var naar=new Array();

naar[0] = "F";
naar[1] = "0";
naar[2] = "F";
naar[3] = "0";
naar[4] = "F";
naar[5] = "0";

var welke = 0;

var k

function price_bg()
{
	pr = document.getElementById("step_price");
	// grijs: F0F0F0
	// groen: CDDF96
	pr.style.backgroundColor = "#CDDF69";
	
	van[0] = "C";
	van[1] = "D";
	van[2] = "D";
	van[3] = "F";
	van[4] = "9";
	van[5] = "6";
	
	
	//while(van[0] != naar[0] || van[1] != naar[1] || van[2] != naar[2] || van[3] != naar[3] || van[4] != naar[4] || van[5] != naar[5])
	zet_kleur_prijs_trager();
}

function zet_kleur_prijs_trager()
{
	totaal = ""+van[0]+van[1]+van[2]+van[3]+van[4]+van[5];
	if(totaal != "F0F0F0")
	{
		k = setTimeout("zet_kleur_prijs_trager()",60);
		
		
			if(van[welke] < naar[welke])
			{
				waarde = verhoog(van[welke]);
			}
			else
			{
				if(van[welke] > naar[welke])
				{
					waarde = verlaag(van[welke]);
				}
				else
				{
					waarde = van[welke];
				}
					
			}
			van[welke] = ""+waarde;
			welke++;
			if(welke == 6)
			{
				welke = 0;
			}
			totaal = ""+van[0]+van[1]+van[2]+van[3]+van[4]+van[5];
			zet_kleur_prijs(totaal)
			//document.getElementById("debug").innerHTML += "test - ignore | "+totaal+"<br />";
		
	}
	else
	{
		clearTimeout(k);
		k = "";
	}
}

function zet_kleur_prijs(totaal)
{
	pr = document.getElementById("step_price");
	pr.style.backgroundColor = "#"+totaal;
}

function verhoog(waarde)
{
	switch(waarde)
	{
		case "0":
			waarde = "1";
			break;
		case "1":
			waarde = "2";
			break;
		case "2":
			waarde = "3";
			break;
		case "3":
			waarde = "4";
			break;
		case "4":
			waarde = "5";
			break;
		case "5":
			waarde = "6";
			break;
		case "6":
			waarde = "7";
			break;
		case "7":
			waarde = "8";
			break;
		case "8":
			waarde = "9";
			break;
		case "9":
			waarde = "A";
			break;
		case "A":
			waarde = "B";
			break;
		case "B":
			waarde = "C";
			break;
		case "C":
			waarde = "D";
			break;
		case "D":
			waarde = "E";
			break;
		case "E":
			waarde = "F";
			break;
		case "F":
			waarde = "F";
			break;
	}
	
	return waarde;
}

function verlaag(waarde)
{
	
	switch(waarde)
	{
		case "0":
			waarde = "0";
			break;
		case "1":
			waarde = "0";
			break;
		case "2":
			waarde = "1";
			break;
		case "3":
			waarde = "2";
			break;
		case "4":
			waarde = "3";
			break;
		case "5":
			waarde = "4";
			break;
		case "6":
			waarde = "5";
			break;
		case "7":
			waarde = "6";
			break;
		case "8":
			waarde = "7";
			break;
		case "9":
			waarde = "8";
			break;
		case "A":
			waarde = "9";
			break;
		case "B":
			waarde = "A";
			break;
		case "C":
			waarde = "B";
			break;
		case "D":
			waarde = "C";
			break;
		case "E":
			waarde = "D";
			break;
		case "F":
			waarde = "E";
			break;
	}
	
	return waarde;
}