/* matomatic.js COPYRIGHT (C) Island Art Publishers */
var CA_SITE="http://www.matshop.ca/";
var CA_ITEMID="461";
var CA_PAGE="shop.cart_mtmtc";
var US_SITE="http://www.matshop.com/";
var US_ITEMID="461";
var US_PAGE="shop.cart_mtmtc";

var MTMTC = {
	globals : {
		opening_height_name : "Opening_Height",
		opening_width_name : "Opening_Width"
	}
}

var mat_ess_start=0;
var mat_reg_start=0;
var mat_rag_start=0;
var mat_non_start=0;

var sel_swatch="outer";

function init() {
	var o=getE('input_outer_colour');
	for(var j=0;j<o.options.length;j++) {
		switch(o.options[j].value) {
		case "-1-":
			mat_ess_start=j;break;
		case "-2-":
			mat_reg_start=j;break;
		case "-3-":
			mat_rag_start=j;break;
		case "-4-":
			mat_non_start=j;break;
		}
	}
	getE("frm").reset();
	updateMatType();
	updateColourFields();
	loadSwatches();
	
	//return submitForm();
	return true;
}
function submitForm() {
	var i=getE('input_inner_colour');
	var o=getE('input_outer_colour');
	if( i.value.charAt(0)=='-' ) {
		i.selectedIndex++;
	}
	if( o.value.charAt(0)=='-' ) {
		o.selectedIndex++;
	}
	var f=getE("frm");
	var a=getE("input_act");
	a.value="showPics";
	f.target="display_picture_frame";
	f.submit();
	return true;
}
function submitUpload() {
	addToRecent();
	var f=getE('frm');
	f.encoding = 'multipart/form-data';
	return submitForm();
}
function submitUrl() {
	addToRecent('url');
	return submitForm();
}
function swapMats() {
	var i=getE('input_inner_colour');
	var o=getE('input_outer_colour');
	var tmp=i.value;
	i.value=o.value;
	o.value=tmp;
	updateMatType();
	updateColourFields();
	return submitForm();
}
function updateMatType() {
	var t=getE('input_mat_type');
	var has_inn=getE('input_inner_check').checked;
	var out_val=getMatTypeFromIndex(getE('input_outer_colour').selectedIndex);
	var inn_val=getMatTypeFromIndex(getE('input_inner_colour').selectedIndex);

	getE('span_inner_mat_type').innerHTML=inn_val;
	getE('span_outer_mat_type').innerHTML=out_val;

	var html=out_val+" ";
	if( !has_inn || out_val==inn_val ) {
		html+=( has_inn ? "Double Mat" : "Single Mat" );
		switch(out_val) {
		case "Essentials": t.value=0;break;
		default:
		case "Regular": t.value=1;break;
		case "Conservation": t.value=2;break;
		}
	} else {
		html="Stock and Non-Stock Regular Double Mat";
		t.value="1";
	}
	updateTableRow('mat_type','Mat Type:',html)
}
function getMatTypeFromIndex(ind) {
	if( ind>mat_ess_start && ind<mat_reg_start ) {
		return "Essentials";
	} else if( ind>mat_reg_start && ind<mat_rag_start ) {
		return "Regular";
	} else if( ind>mat_rag_start && ind<mat_non_start ) {
		return "Conservation";
	}
	return "Non-Stock Regular";
}
function getPicture() {
	var f=getE("frm");
	var a=getE("input_act");
	a.value="saveAs";
	f.target="_blank";
	f.submit();
	// submit data
	// change target and url back
}
function removeMyPictures() {
	var a=getE("input_act");
	var recSel=getE('sel_recent');
	var use=getE('pic_r1');
	a.value="clearPics";
	recSel.options.length=0;
	use.checked=true;
	selectPic("picnosubmit");
	getE("frm").submit();
	return true;
}
function addToRecent(which) {
	var recSel=getE('sel_recent');
	
	switch (which) {
	case "url":
		var val=getE('url_picture').value;
		break;
	default:
		var val=getE('upload_picture').value;
	}


	if( val!='' && (val.indexOf('jpg')!=-1 || val.indexOf('gif')!=-1 || val.indexOf('png')!=-1) ) {
		var val_arr=new Array;
		val_arr=val.split('\\');
		val=val_arr[val_arr.length-1];
		
		val_arr=val.split('\/');
		val=val_arr[val_arr.length-1];
		
		val = val.replace(/ /g,'_');
		val = val.replace(/%20/g,'_');
		val = val.replace(/'/g,'_');
		val = val.replace(/"/g,'_');
		
		val = val.toLowerCase();

		addSelectOption(recSel,val,val);
	}
}
function selectPic(which) {
	var selPic=getE('span_selpic');
	var upPic=getE('span_upload');
	var urlPic=getE('span_url');
	var recPic=getE('span_recent');
	var recSel=getE('sel_recent');
	var f=getE('frm');
	f.encoding = 'application/x-www-form-urlencoded';

	switch( which ) {
	case "upload":
		recPic.style.display='none';
		selPic.style.display='none';
		urlPic.style.display='none';
		upPic.style.display='';
		break;
	case "url":
		recPic.style.display='none';
		selPic.style.display='none';
		upPic.style.display='none';
		urlPic.style.display='';
		break;
	case "recent":
		if( recSel.options.length>0 ) {
			recPic.style.display='';
			selPic.style.display='none';
			upPic.style.display='none';
			urlPic.style.display='none';			
			return submitForm();
		} else {
			alert( "No Recent uploads or online pictures" );
			return false;
		}
		break;
	case "picnosubmit":
	case "pic":
	default:
		recPic.style.display='none';
		selPic.style.display='';
		upPic.style.display='none';
		urlPic.style.display='none';		
		if(which!="picnosubmit") 
			return submitForm();
		break;
	}
	return true;
}
function attach(which) {
	var inner_checked=getE('input_inner_check').checked;
	var frame_checked=getE('input_frame_check').checked;
	var attinner=getE('span_inner');
	var attframe=getE('span_frame');

	switch( which ) {
	case "inner":
		attinner.style.display=(inner_checked ? '' : 'none');
		updateMatType();
		updateColourFields();
		updateReveal();
		break;	
	case "frame":
		attframe.style.display=(frame_checked ? '' : 'none');
		break;
	}
	return submitForm();
}
function checkBeforeBuy() {
	var bot=getE('input_bottom_weight');
	var o=getE('span_outer_mat_type');
	var i=getE('span_inner_mat_type');
	var has_inn=getE('input_inner_check').checked;
	var msg="";

	if( has_inn && (o.innerHTML!=i.innerHTML && (o.innerHTML.indexOf('Regular')==-1 || i.innerHTML.indexOf('Regular')==-1)) ) {
		alert("You have selected '"+i.innerHTML+"' Inner Mat which is different than the selected '"+o.innerHTML+"' Outer Mat Type.  Please select two mats of the same type for online purchasing.");
		return false;
	}
	if( bot.checked ) {
		return confirm('You have selected a bottom-weight.  However, we currently only support online purchasing of mats with centered openings.  You can call us for other options (off-center openings or custom cutouts) or continue to purchase a mat with centered opening. Add to cart a mat with a centered opening?');
	}
	
	return true;
}
function toggleBuy() {
	var buyDiv=getE('div_buy');
	var pgDiv=getE('page');
	if(buyDiv.style.display=='') {
		buyDiv.style.display='none';
		pgDiv.style.display='';
		return true;
	} else {
		if( checkBeforeBuy() ) {
			buyDiv.style.display='';
			pgDiv.style.display='none';
			updateMatType();
			updateMat();
			setMatOpenings();
			updateFrame();
			updateBack();
			updateGlaze();
			updatePoly();
			//updateBorders();
			return true;
		}
	}
	return false;
}
function toggleMatTypeDesc() {
	toggleDiv('div_mat_type_desc');
	return false;
}
function toggleHelp() {
	toggleDiv('div_help');
	return false;
}
function toggleSwatch(swtch) {
	if(swtch && typeof swtch != 'undefined' )
		sel_swatch=swtch;
	toggleDiv('div_swatches');
	return false;
}
function toggleDiv(id) {
	var d=getE(id);
	if(d.style.display=='') 
		d.style.display='none';
	else 
		d.style.display='';
}
function selectSwatch(val) {
	var outDiv=getE('input_outer_colour');
	var inDiv=getE('input_inner_colour');

	switch( sel_swatch ) {
	case "inner":
		inDiv.value=val;
		break;
	default:
	case "outer":
		outDiv.value=val;
		break;
	}
	toggleSwatch();
	updateMatType();
	updateColourFields();
	submitForm();
	return false;
}
function changeColour() {
	updateMatType();
	updateColourFields();
	return submitForm();
}
function updateColourFields() {
	var outDiv=getE('input_outer_colour');
	var inDiv=getE('input_inner_colour');
	var inTxt=inDiv.options[inDiv.selectedIndex].text;
	var outTxt=outDiv.options[outDiv.selectedIndex].text;
	var t=getE('input_mat_type').value;
	var has_inn=getE('input_inner_check').checked;

	var pref="input_clr";
	var suf="";
	if( t>0 && false ) { // no longer an exception: essentials attributes were named differently
		var suf="_stk";
	}
	if( has_inn ) {
		updateTableRow('mat_clr_out','Outer:',outTxt)
		updateTableRow('mat_clr_inn','Inner:',inTxt)
		getE(pref+"_us_out"+suf).value=outTxt;
		getE(pref+"_us_in"+suf).value=inTxt;
		getE(pref+"_ca_out"+suf).value=outTxt;
		getE(pref+"_ca_in"+suf).value=inTxt;
	} else {
		updateTableRow('mat_clr_out','Colour:',outTxt)
		updateTableRow('mat_clr_inn','','')
		getE(pref+"_us"+suf).value=outTxt;
		getE(pref+"_ca"+suf).value=outTxt;
	}
}
function changeReveal() {
	updateReveal();
	return submitForm();
}
function updateReveal() {
	var rev=getE('reveal');
	var iputRev=getE('input_mat_reveal');
	var has_inn=getE('input_inner_check').checked;

	if( has_inn ) {
		updateTableRow('mat_reveal','Reveal:',rev.options[rev.selectedIndex].text)
		iputRev.value=rev.options[rev.selectedIndex].text;
	} else {
		updateTableRow('mat_reveal','','')
	}
}
function changeFrame() {
	return submitForm();
}
function updateMat() {
	var us=getE('input_country_us').checked;
	var has_inn=getE('input_inner_check').checked;
	var val_arr=new Array();val_arr=getE('input_mat_size').value.split("|");
	var t=getE('input_mat_type').value;
	var i=( us ? 0 : 2 );
	if(has_inn) i++;
	var ids=val_arr[i].split(',');

	getE('input_mat_product_id').value=ids[t];
	getE('input_mat_prod_id').value=ids[t];
	updateMatFieldNames( us, ids[t] );

	return true;
}
function updateMatFieldNames( us, id ) {
	getE('input_clr_ca').name = 'Mat_Color' + id;
	getE('input_clr_ca_out').name = 'Outer_Mat_Color' + id;
	getE('input_clr_ca_in').name = 'Inner_Mat_Color' + id;
	getE('input_clr_ca_stk').name = 'Stock_Mat_Color' + id;
	getE('input_clr_ca_out_stk').name = 'Stock_Outer_Mat_Color' + id;
	getE('input_clr_ca_in_stk').name = 'Stock_Inner_Mat_Color' + id;

	if (us) {
		getE('input_mat_reveal').name = 'Reveal';
		getE('input_mat_shape').name = 'Opening_Shape';
		MTMTC.globals.opening_width_name = 'Opening_Width';
		MTMTC.globals.opening_height_name = 'Opening_Height';
	} else {
		getE('input_mat_reveal').name = 'Reveal' + id;
		getE('input_mat_shape').name = 'Opening_Shape' + id;
		MTMTC.globals.opening_width_name = 'Opening_Width' + id;
		MTMTC.globals.opening_height_name = 'Opening_Height' + id;
	}

	var op_x = getE('input_op_size_x');
	var op_y = getE('input_op_size_y');

	if (op_x) {
		op_x.name = MTMTC.globals.opening_width_name;
	}
	if (op_y) {
		op_y.name = MTMTC.globals.opening_height_name;
	}

	return true;
}
function matchFrameSize() {
	var has_f=getE('input_frame_check').checked;
	if( has_f ) {
		getE('input_frame_size').selectedIndex=getE('input_mat_size').selectedIndex;
		updateFrame();
	}
}
function updateFrame() {
	var has_f=getE('input_frame_check').checked;
	if( has_f ) {
		var us = getE('input_country_us').checked;
		var i=( us ? '3' : '4' );
		var s_frame=getE('sel_frame');
		var val_arr=new Array();val_arr=s_frame.value.split("|");
		var disp=s_frame.options[s_frame.selectedIndex].text;
		var ids=new Array(); ids=val_arr[i].split(',');

		i=getE('input_frame_size').selectedIndex;
		getE('input_frame_product_id').value=ids[i];
		getE('td_frame').innerHTML=disp;
		getE('input_f_clr_us').value=val_arr[1];
		getE('input_f_clr_ca').value=val_arr[1];
		getE('tbl_frame').style.display="";

		updateFrameFieldNames( us, ids[i] );
	} else {
		getE('tbl_frame').style.display="none";
	}
}
function updateFrameFieldNames( us, id ) {
	getE('input_f_clr_ca').name = "Color" + id;
	return true;
}
function matchBackSize() {
	getE('input_back_size').selectedIndex=getE('input_mat_size').selectedIndex;
	updateBack();
}
function updateBack() {
	var bk=getE('input_backing').value;
	var us=getE('input_country_us');
	var i=(us ? 0 : 1);
	var val_arr=new Array(); val_arr=bk.split('|');
	var ids=new Array(); ids=val_arr[i].split(',');

	i=getE('input_back_size').selectedIndex;
	getE('input_back_product_id').value=ids[i];
	getE('input_back_thick').value=val_arr[2];
}
function matchGlazeSize() {
	getE('input_glaze_size').selectedIndex=getE('input_mat_size').selectedIndex;
	updateGlaze();
}
function updateGlaze() {
	var gz=getE('input_glazing').value;
	var us=getE('input_country_us');
	var i=(us ? 0 : 1);
	var val_arr=new Array();val_arr=gz.split('|');
	var ids=new Array();ids=val_arr[i].split(',');

	i=getE('input_glaze_size').selectedIndex; if(i<0) i=0;
	getE('input_glaze_product_id').value=ids[i];
}
function matchPolySize() {
	var matSize=getE('input_mat_size');
	var i=matSize.selectedIndex; if(i<0) i=0;
	var val="";
	switch(matSize.options[i].text) {
	default:
	case "5x7": val="0,a"; break;
	case "8x10": val="1,a"; break;
	case "8 1/2x11": val="2,a"; break;
	case "11x14": val="3,a"; break;
	case "12x16": val="4,a"; break;
	case "16x20": val="4,a"; break;
	}
	getE('input_poly_size').value=val;
	updatePoly();
}
function updatePoly() {
	var ps=getE('input_poly_size');
	var py=getE('input_polybags').value;
	var us=getE('input_country_us').checked;
	var py_arr=new Array();py_arr=py.split('|');
	var ps_arr=new Array();ps_arr=ps.value.split(',');
	var i=(us ? 0 : 1);
	var ids=new Array();ids=py_arr[i].split(',');
	var i=ps.selectedIndex; if(i<0) i=0;
	getE('input_poly_size_fld').value=ps.options[i].text;
	getE('input_poly_product_id').value=ids[ps_arr[0]];
}
/* Add to cart functions */
function addMat() {
	getE('frm_add_mat_to_cart').submit();
	return true;
}
function addFrame() {
	var prod_id = getE('input_frame_product_id').value;
		
	if (prod_id == -1) {
		alert("Sorry, this frame is currently not available in this size.");
		return false;
	} else {
		getE('frm_add_frame_to_cart').submit();
		return true;
	}
}
function addBack() {
	getE('frm_add_back_to_cart').submit();
	return true;
}
function addGlaze() {
	if( getE('input_glaze_product_id').value==-1 ) {
		alert('Sorry, we do not currently sell glass larger than 11x14 online, due to a high risk of damage during shipping.');
		return false;
	} else {
		getE('frm_add_glaze_to_cart').submit();
		return true;
	}
}
function addPoly() {
	getE('frm_add_poly_to_cart').submit();
	return true;
}
function addBtnOver(id) {
	getE(id).style.borderLeft="1px solid #CCCCCC";
	getE(id).style.textDecoration="underline";
}
function addBtnOut(id) {
	getE(id).style.borderLeft="1px solid white";
	getE(id).style.textDecoration="none";
}
function changeCountry() {
	var ca=getE('input_country_ca').checked;

	var st=US_SITE; var pg=US_PAGE; var it=US_ITEMID;
	if(ca) { st=CA_SITE; pg=CA_PAGE; it=CA_ITEMID; }

	updateFields('mat',pg,st,it);
	updateFields('frame',pg,st,it);
	updateFields('back',pg,st,it);
	updateFields('glaze',pg,st,it);
	updateFields('poly',pg,st,it);
	getE('iframe_display_cart').src=st+"index.php?option=com_virtuemart&page="+pg+"&Itemid="+it+"&vmcchk=1";

	function updateFields(id_part,pg,st,it) {
		getE('frm_add_'+id_part+'_to_cart').action=st+"index.php";
		getE('input_'+id_part+'_page').value=pg;
		getE('input_'+id_part+'_itemid').value=it;
	}

	updateMat();
	updateFrame();
	updateBack();
	updateGlaze();
	updatePoly();

	return true;
}
function changeMatSize() {
	updateMat();
	setMatOpenings();
	//updateBorders();
	matchFrameSize();
	matchBackSize();
	matchGlazeSize();
	matchPolySize();
}
function changeOpening() {
	//updateBorders();
}
function updateBorders() {
	var op_x=getE('input_op_size_x').value;
	var op_y=getE('input_op_size_y').value;
	var m_x=getMatSizeVal('x');
	var m_y=getMatSizeVal('y');

	updateTableRow('mat_border_t','Mat Border (inches):','<b>Side:</b>'+(m_x-op_x)+' &nbsp; <b>Top/Bottom:</b>'+(m_y-op_y));
}
function setMatOpenings() {
	var spanX=getE('span_op_size_x');
	var spanY=getE('span_op_size_y');
	var maxX=getMatSizeVal('x')-2;
	var maxY=getMatSizeVal('y')-2;

	var html_x='<SELECT id="input_op_size_x" name="' + MTMTC.globals.opening_width_name + 
			'" onClick="return changeOpening();">';
	for(var i=maxX;i>=0.125;i-=0.125) {
		html_x+='<OPTION VALUE='+i+'>'+i+'</OPTION>';
	}
	html_x+="</SELECT>";
	spanX.innerHTML=html_x;
	var html_y='<SELECT id="input_op_size_y" name="' + MTMTC.globals.opening_height_name + 
			'" onClick="return changeOpening();">';
	for(var i=maxY;i>=0.125;i-=0.125) {
		html_y+='<OPTION VALUE='+i+'>'+i+'</OPTION>';
	}
	html_y+="</SELECT>";
	spanY.innerHTML=html_y;
	
	return true;
}
/* -- */
/* universal functions */
function updateTableRow(id_part,head,val) {
	var tr=getE('tr_'+id_part);
	var td_h=getE('th_'+id_part);
	var td_v=getE('td_'+id_part);
	
	if( head==''&&val=='' ) {
		tr.style.display='none';
	} else {
		tr.style.display='';
		td_h.innerHTML=head;
		td_v.innerHTML=val;
	}
}
function getMatSizeVal(dim) {
	var matSize=getE('input_mat_size');
	var x=0;var y=0;
	switch(matSize.options[matSize.selectedIndex].text) {
	default:
	case "5x7": x=5;y=7; break;
	case "8x10": x=8;y=10; break;
	case "8 1/2x11": x=8.5;y=11; break;
	case "10x13": x=10;y=13; break;
	case "11x14": x=11;y=14; break;
	case "12x16": x=12;y=16; break;
	case "16x20": x=16;y=20; break;
	case "20x24": x=20;y=24; break;
	}
	return( (dim=='x') ? x : y );
}
function addSelectOption(frmEl,val,txt) {
	if( val!='' ) {
		var op_n=document.createElement('option');
		var hasOp=false;
		for(var op_i in frmEl.options) {
			var op=frmEl.options[op_i];
			if(op&&op.value){if(op.value==val){hasOp=true;break;}}
		}
		if(!hasOp) {
			op_n.text=txt;
    			op_n.value=val;
			try { frmEl.add(op_n, null); }
    			catch(ex) { frmEl.add(op_n); }
		} else {
			return false;
		}
	}
	return true;
}
function loadSwatches() {
	for(var i in matImgs) {
		var src=matImgs[i];
		document.getElementById(i).src=src;
	}
	return true;
}
function getE(id) {
	return document.getElementById(id);
}
/* -- */