// JavaScript Document
// base scripts


function imageWidth(image,imgSize) {
var img=new Image();
img.src="./media/product_images/" + image + ".jpg";
img.onload=function(){ 
// alert('Width: ' + img.width + ' Height:' + img.height); 
}
var newheight =  img.height;
var newwidth =  img.width;


if (img.height > imgSize) {
var newheight = (imgSize/img.height) * img.height;
var newwidth = (imgSize/img.height) * img.width;
document.getElementById(image).height = newheight;
document.getElementById(image).width = newwidth;
//alert ('Setting new height to ' + newheight);
}

var top_margin = ((imgSize - newheight) / 2) ;
var top_marginpx = ((imgSize - newheight) / 2) + "px";
var left_margin = ((imgSize - newwidth) / 2) ;
var left_marginpx = ((imgSize - newwidth) / 2) + "px";
//alert('Setting left margin to ' + left_margin);

document.getElementById(image).style.paddingLeft = left_marginpx;
document.getElementById(image).style.paddingRight = left_marginpx;
document.getElementById(image).style.paddingTop = top_marginpx;
document.getElementById(image).style.paddingBottom = top_marginpx;
}


function ShowOther(val) {
	if (val == 'Other') {
		document.getElementById('other_interest').style.display = '';
	} else {
		document.getElementById('other_interest').style.display = 'none';
		document.getElementById('other_interest').value = '';
	}
}
function check(f) {
	if (f.name.value == '') {
		alert('Please enter your name');
		return false;
	} else if (f.email.value == '') {
		alert('Please enter your email address');
		return false;
	} else if (f.interest.value == 'Please choose') {
		alert('Please choose your interest');
		return false;
	} else if ((f.interest.value == 'Other') && (f.other.value == '')) {
		alert('Please enter your interest');
		return false;
	}
}


function makestatus(mymsg) {
window.status = mymsg;
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function ShowRow(element) {
	element.style.display = '';
}
function showstep(stepdone) {
var newstep = stepdone + 1;
var nextdiv = "step" + newstep;
//alert('We want to see step ' + newstep + " which is div: " + nextdiv);
document.getElementById(nextdiv).className = "showingdiv";
// do we need to show step 5?
if (document.getElementById('style').value == "Decorative" && nextdiv == "step4") {
document.getElementById('step5').className = "showingdiv";
}

}


function KW_updateItems(d,o,fn) { //v2.6 By Paul Davis www.kaosweaver.com
  var i,s,l=MM_findObj(d),b,z=o.options[o.selectedIndex].value;
  l.length=0;
  l.options[0]=new Option('tbd','tbd');
  b=(z!='nill')?eval(z+'_items'):0;
  for(i=0;i<b.length;i++){s=b[i].split("|");l.options[i]=new Option(s[1],s[0]);}
  l.selectedIndex=0;
  if (!fn) return;eval(fn)
}

function ChooseLining() {
var choice = document.getElementById('style').value;
var myChoice = choice + "_lining";

if (choice == "Decorative") {
var divcode = '	<div class="whiteonblue">Step 4 -  Stitching Options </div>';
divcode = divcode + '<div class="innerstep" id="LiningChoice">';
divcode = divcode + 'Belts with Decorative Stitching are only available as suede-lined.<br/>';
divcode = divcode + "<input type='hidden' name='lining' value='suede'>";
divcode = divcode + "Please choose the colour of decorative stitching from the list below.<br/>";
divcode = divcode + "<select name='stitching' id='stitching' class='select' onChange='showstep(4);'>";
divcode = divcode + "<option value='white'>White Stitching</option>";	
divcode = divcode + "<option value='black'>Black Stitching</option></select></div>";
} else {
var divcode = '	<div class="whiteonblue">Step 4 -  Lining </div>';
divcode = divcode + '<div class="innerstep" id="LiningChoice">';
divcode = divcode + "<input type='hidden' name='stitching' value='n/a'>";
divcode = divcode + 'Please choose a lining option from  the list below.<br/>';
divcode = divcode + '<br/><select name="lining" id="lining" class="select" onChange="showstep(4);">';
divcode = divcode + '<option value="tbd">Select ...</option><option value="suede">Suede Lined</option>';
divcode = divcode + '<option value="unlined">Unlined</option>';
divcode = divcode + '</select>';
divcode = divcode + '</div>';
}
//
document.getElementById('step4').innerHTML = divcode;
}

function ChooseFastening() {
var thisChoice = document.getElementById('beltwidth').value;
var i = 0;
//alert ('We are setting up fastening options for belt widths of ' + thisChoice );
document.forms['beltform'].fastening.options[i] = new Option('Select ...','none');
i = i+1;
if (thisChoice > 1) {
document.forms['beltform'].fastening.options[i] = new Option('Black Buckle','Blk');
i = i+1;
} 
document.forms['beltform'].fastening.options[i] = new Option('Brass Buckle','Brs');
i = i+1;
document.forms['beltform'].fastening.options[i] = new Option('Nickel Buckle','Nkl');
i = i+1;
document.forms['beltform'].fastening.options[i] = null;
}

function njlScroll(Message) {
if (Message == "") {Message = "Welcome to Price Western Leather";}
window.status = Message;
}

function getStyle(myDiv) {
	theBox = document.getElementById(myDiv);
	theBox.className = "theStyleChoice";
	document.getElementById('colorThumb').className = "hiddendiv";
}

function showHide(myDiv) {
	//set the object to a variable, so we can simplfy the code
	theBox = document.getElementById(myDiv);
	//if the class equals our visible code, set the class to the hidden box style, else set the class to the visible box style
	if (theBox.className == "boxVisible") {
		theBox.className = "boxHidden";
	} else {
		theBox.className = "boxVisible";
	}
}

function SelectStyle(myStyle) {
Message = "You have chosen a " + myStyle + " belt.";
// alert (Message);
window.status = Message;
myElement = document.getElementById('style');
document.getElementById('colorThumb').className = "colorChoice";
document.getElementById('styleChoice').className = "hiddendiv";
myElement.value = myStyle;
newImage = "media/graphics/belts_" + myStyle + ".gif";
MM_swapImage('thumb_CC','',newImage,1);
showstep(1);
KW_updateItems('beltwidth',myElement);
ChooseLining()
}


function productTrans(thispage,lingo) {
if (lingo ==="gb") {
new Effect.Fade('trans_content');
new Effect.Appear('original_content');
} else {
new Effect.Fade('original_content');
new Effect.Appear('trans_content');
}
}


function trans(thispage,lingo) {
if (lingo ==="gb") {
new Effect.Fade('trans_content');
new Effect.Appear('original_content');
} else {
loadcontent(thispage,lingo,'trans_content');
new Effect.Fade('original_content');
new Effect.Appear('trans_content');
}
}

function showMe(thediv) {
new Effect.Fade('readMe',{duration :1});
setTimeout('showMeMore(\'' + thediv + '\')',1000);
}

function showMeMore(thediv) {
newCode = document.getElementById(thediv).innerHTML;
document.getElementById('readMe').innerHTML = newCode;
new Effect.Appear('readMe');
}

function loadcontent(thispage, lingo, target) {
  url="./modules/" + thispage + "_" + lingo + ".htm";
  // alert('fetching - ' + url);
  document.getElementById(target).innerHTML = ' Fetching data...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {loadcontentDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
} 
function loadcontentDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML=" Sorry - Data Retrieval Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function sortImage(image,imageid,maxDim) {
var originalWidth = 0;
var originalHeight = 0;
var img=new Image();
img.src=image;
img.onload=function(){ 
originalWidth = img.width;
originalHeight = img.height;
}
// alert('Width: ' + img.width + ' Height:' + img.height); 
var maxDimension = maxDim;

// alignImage(image,imageid,maxDim);
var myheight = document.getElementById(imageid).height ;
var mywidth = document.getElementById(imageid).width ;
var myheight = originalHeight ;
var mywidth = originalWidth ;
var newwidth = 100;
var newheight = 100;
var mychange = 0;
if(mywidth==100 && myheight==100) {
} else {
	if(mywidth>myheight) {
	// sorting for wide
	// alert("This was wide: " + mywidth + " x " + myheight);
	mychange = 100/mywidth;
	newwidth = mychange * mywidth;
	newheight = mychange * myheight;
	// alert("new size: " + newwidth + " x " + newheight);
	}
	// or do the height
	if(myheight>mywidth) {
	// alert("This was tall: " + mywidth + " x " + myheight);
	mychange = 100/myheight;
	newwidth = mychange * mywidth;
	newheight = mychange * myheight;
	// alert("new size: " + newwidth + " x " + newheight);
	}
	// if its a square
	if(mywidth==myheight) {
	// alert("This was a square.");
	mychange = 100/mywidth;
	newwidth = mychange * mywidth;
	newheight = mychange * myheight;
	}
	document.getElementById(imageid).height = newheight;
	document.getElementById(imageid).width = newwidth;
	// alert("Image " + imageid + " set to " + newwidth + " x " + newheight);
	var top_margin = ((maxDim - newheight) / 2) ;
	var top_marginpx = (top_margin / 2) + "px";
	var left_margin = ((maxDim - newwidth) / 2) ;
	var left_marginpx = (left_margin / 2) + "px";
//
	if(left_marginpx > 0) {
	document.getElementById(imageid).style.marginLeft = left_marginpx;
	// alert('Setting Left margin of ' + imageid + ' to ' + left_marginpx);
	}
	if(top_marginpx >= 0) {
	document.getElementById(imageid).style.marginTop = top_marginpx;
	}
	

}

}

function alignImage(image,imageid,maxDim) {
var img=new Image();
var maxDimension = maxDim;
// ./media/pwl_thumbs/'.$prodid.'.jpg
img.src=image;
img.onload=function(){ 
// alert('Width: ' + img.width + ' Height:' + img.height); 
}

if (img.width >= img.height) {
var newwidth = (maxDimension/img.width) * img.width;
var newheight = (maxDimension/img.width) * img.height;
} else {
var newwidth = (maxDimension/img.height) * img.width;
var newheight = (maxDimension/img.height) * img.height;
}
document.getElementById(imageid).height = newheight;
document.getElementById(imageid).width = newwidth;
//
var top_margin = ((maxDimension - newheight) / 2) ;
var top_marginpx = (top_margin / 2) + "px";
var left_margin = ((maxDimension - newwidth) / 2) ;
var left_marginpx = (left_margin / 2) + "px";
//
	if(left_marginpx > 0) {
	document.getElementById(imageid).style.marginLeft = left_marginpx;
	alert('Setting Left margin of ' + imageid + ' to ' + left_marginpx);
	}
	if(top_marginpx >= 0) {
	document.getElementById(imageid).style.marginTop = top_marginpx;
	}
}