// DISPLAY ENGINE V 2.0  Design copyright M J Sibley mike@SibleyFineArt.com

// GIRLGUIDES  Global DISPLAY for IE4+ , NS6+, OPERA.6+, MOZILLA, FIREFOX

var back = ''
var titl = ''
var vorh = ''

var ship1 = 4.50   //shipping £ per Print
var ship2 = 0.25   //shipping £ per Single Card/Keyfob
var ship3 = 0.40   //shipping £ per Card Pack
var ship4 = 0.50   //shipping £ per custom item
var handl = 0.50   //handling £ per order

var iboxhi =  30	//set view icons box display area height
var pboxhi =  130	//set print box display area height
var dboxhi =  360	//set details box display area height

 function detailsOn(elemID) {
	var elem = ie4 ? document.all(elemID) : document.getElementById(elemID)
		elem.className = "display";
}
 function detailsOff(elemID) {
 	var elem = ie4 ? document.all(elemID) : document.getElementById(elemID)
		elem.className = "";
}


 function viewThis(vh,dir,image,title,info,zoom,infpg){
	    vorh = vh
           titl = title
           iTxt = image + ""
	imgId = image	//used for external linking only
             zm = zoom
	  ifo = infpg
	   fImg = '_' + dir + '/' + image + '.jpg'
           dImg = '_' + dir + '/' + image + '_d1.jpg'
           dImg2= '_' + dir + '/' + image + '_d2.jpg'
           dImg3= '_' + dir + '/' + image + '_d3.jpg'
     var txt1   = title
     var writei = ''
     var write  = ''

	window.scrollTo(0,170)
  if (moz){window.scrollTo(0,184)}
  if (opr){window.scrollTo(0,184)}

var screen   = ie4 ? document.all.screen : document.getElementById('screen');
var ibox     = ie4 ? document.all.ibox : document.getElementById('ibox');
var optbox   = ie4 ? document.all.optbox : document.getElementById('optbox');
var pbox     = ie4 ? document.all.pbox : document.getElementById('pbox');
var dbox     = ie4 ? document.all.dbox : document.getElementById('dbox');
var dboxh    = ie4 ? document.all.dboxh : document.getElementById('dboxh');
var pboxh    = ie4 ? document.all.pboxh : document.getElementById('pboxh');
var products = ie4 ? document.all.products : document.getElementById('products');
var details  = ie4 ? document.all.details : document.getElementById('details');
var viewcart = ie4 ? document.all.viewcart : document.getElementById('viewcart');
var picimg   = ie4 ? document.all.picimg : document.getElementById('picimg');
var text     = ie4 ? document.all.text : document.getElementById('text');

// empty cells of all data
		screen.style.width  = ''
		screen.style.height = ''
           screen.style.backgroundColor = ''
                    screen.style.border = ''
		ibox.innerHTML      = ''
		pbox.innerHTML      = ''
		dbox.innerHTML      = ''
		pbox.style.height   = ''
		dbox.style.height   = ''
		pbox.width          = ''
                  pbox.style.paddingTop = ''
		optbox.innerHTML    = ''
		dboxh.innerHTML     = ''
		pboxh.innerHTML     = ''
	          picimg.innerHTML    = ''

var view_icons	= '<div id="iconsv" style="width:180px;margin-left:6px;text-align:left;" align="center">HELLO</div>'
var prod_icons	= '<div id="prodicons" style="width:180px;margin-left:6px;"><div id="idata" class="datatxt" style="height:86px;">&nbsp;</div></div>'
var printsv	= '<div id="products" style="width:180px;margin-left:6px;" align="center"><div id="pdata" class="datatxt">&nbsp;</div></div>'
var data	= '<div id="details" style="width:180px;margin-left:6px;text-align:left;padding-top:5px;margin-bottom:15px;"><div id="data" class="datatxt">&nbsp;</div></div>' +printsv
var printsh	= '<div id="products" style="width:180px;margin-left:0px;text-align:center;"><div id="pdata" class="datatxt">&nbsp;</div></div>'
var datah	= '<div id="details" style="width:180px;margin-left:0px;text-align:left;"><div id="data" class="datatxt">&nbsp;</div></div>'
    if ( vh == "v"  ){
		screen.style.width  = '405px'
		screen.style.height = '546px'
           screen.style.backgroundColor = '#ffffff'
                    screen.style.border = '1px solid #4385d1'
		pbox.width          = '192px'
   	          picimg.style.height = '500px'
	picimg.innerHTML = '<img name="pic" src="px.gif" border="0" onContextMenu="return false"><img src="px.gif" width="1" height="450" border="0">'
	document.pic.src = '_' + dir + '/' + image + '.jpg'
	  	ibox.style.height   = iboxhi
		ibox.innerHTML      = view_icons
		pbox.innerHTML      = prod_icons
		pbox.style.height   = pboxhi
		dbox.innerHTML      = data
		dbox.style.height   = dboxhi
	 text.innerHTML = '<div id="txtline" class="imgTitle"></div>'
   }
    if ( vh == "h"  ){
		screen.style.width  = '591px'
		screen.style.height = '440px'
           screen.style.backgroundColor = '#ffffff'
                    screen.style.border = '1px solid #4385d1'
  	          picimg.style.height = '400px'
	picimg.innerHTML = '<img name="pic" src="px.gif" border="0" onContextMenu="return false"><img src="px.gif" width="1" height="370" border="0">'
	document.pic.src = '_' + dir + '/' + image + '.jpg'
		optbox.innerHTML    = prod_icons
		dboxh.innerHTML     = datah
		dboxh.style.width   = '210px' //IE6 fix
		pboxh.innerHTML     = printsh
var prodicons = ie4 ? document.all.prodicons : document.getElementById('prodicons');
         prodicons.style.marginLeft = '0px'
	 text.innerHTML = '<table width="100%" height=20 border=0><tr><td width=110><div id="iconh"></div></td><td><div id="txtline" class="imgTitle"></div></td><td width=110>&nbsp;</td></tr></table>'
   }

// INFO and ZOOM BUTTONS
	var options = ''
  if (infpg == 'i')
	{options  = '<img name="info1" onClick="swapImg(\'i\');" onMouseOver="this.style.cursor=\'pointer\'" onMouseOut="this.style.cursor=\'\'" src="images/icon_info.gif" width=20 height=20 border=0 hspace=1>'}
  if (zoom== 'z1'| zoom== 'z2' | zoom== 'z3'| infpg == 'i')
	{options += '<img name="zoomx" onClick="swapImg(\'f\');document.zoomx.src=\'images/icon_zoom_off2.gif\';" onMouseOver="this.style.cursor=\'pointer\'" onMouseOut="this.style.cursor=\'\'" src="images/icon_zoom_off2.gif" width=20 height=20 border=0 hspace=1>'}
  if (zoom== 'z1'| zoom== 'z2' | zoom== 'z3')
	{options += '<img name="zoom1" onClick="swapImg(\'d1\');" onMouseOver="this.style.cursor=\'pointer\'" onMouseOut="this.style.cursor=\'\'" src="images/icon_zoom.gif" width=20 height=20 border=0 hspace=1>'}
  if (zoom== 'z2'| zoom== 'z3')
	{options += '<img name="zoom2" onClick="swapImg(\'d2\');" onMouseOver="this.style.cursor=\'pointer\'" onMouseOut="this.style.cursor=\'\'" src="images/icon_zoom.gif" width=20 height=20 border=0 hspace=1>'}
  if (zoom== 'z3')
	{options += '<img name="zoom3" onClick="swapImg(\'d3\');" onMouseOver="this.style.cursor=\'pointer\'" onMouseOut="this.style.cursor=\'\'" src="images/icon_zoom.gif" width=20 height=20 border=0 hspace=1>'}

var txtline = ie4 ? document.all.txtline : document.getElementById('txtline')
var iconsv  = ie4 ? document.all.iconsv : document.getElementById('iconsv');
var iconh   = ie4 ? document.all.iconh : document.getElementById('iconh');
	txtline.innerHTML = txt1
     if (vh=='h'){iconh.innerHTML  = options}
     if (vh=='v'){iconsv.innerHTML = options}

var idata  = ie4 ? document.all.idata : document.getElementById('idata')
	idata.innerHTML = writei

    if ( info != ""){
		detailsOn('details')
  		write += '<div style="text-align:center">' +info + '<br><br></div>';}

var  data = ie4 ? document.all.data : document.getElementById('data');
		 data.innerHTML = write

}

//ZOOM function
	var iTxt = '';
	var zm   = '';
	var ifo   = '';
	var fImg = '';
	var dImg = '';
	var dImg2= '';
	var dImg3= '';
	    back = '';

 function resetImg(){
  if (ifo == 'i')
	{document.info1.src = 'images/icon_info.gif';}
  if (zm == 'z1')
	{document.zoom1.src = 'images/icon_zoom.gif';}
  if (zm == 'z2')
	{document.zoom1.src = 'images/icon_zoom.gif';
	 document.zoom2.src = 'images/icon_zoom.gif';}
  if (zm == 'z3')
	{document.zoom1.src = 'images/icon_zoom.gif';
	 document.zoom2.src = 'images/icon_zoom.gif';
	 document.zoom3.src = 'images/icon_zoom.gif';}
}

 function swapImg(to){
var picimg   = ie4 ? document.all.picimg : document.getElementById('picimg');
	if (back != ''){
	  if (vorh=='h'){picimg.innerHTML = '<img name="pic" src="px.gif" border="0"><img src="px.gif" width="1" height="370" border="0">'}
	  if (vorh=='v'){picimg.innerHTML = '<img name="pic" src="px.gif" border="0"><img src="px.gif" width="1" height="450" border="0">'}
}
	if (to == 'f'){
	document.pic.src = fImg;
 	resetImg();
}
	if (to == 'd1'){
 	resetImg();
	document.zoom1.src = 'images/icon_zoom2.gif'
	document.zoomx.src = 'images/icon_zoom_off.gif'
	document.pic.src   = dImg;
}
	if (to == 'd2'){
 	resetImg();
	document.zoom2.src = 'images/icon_zoom2.gif';
	document.zoomx.src = 'images/icon_zoom_off.gif';
	document.pic.src = dImg2;
}
	if (to == 'd3'){
 	resetImg();
	document.zoom3.src = 'images/icon_zoom2.gif';
	document.zoomx.src = 'images/icon_zoom_off.gif';
	document.pic.src = dImg3;
}
	if (to == 'i'){
 	resetImg();
	document.info1.src = 'images/icon_info2.gif';
	document.zoomx.src = 'images/icon_zoom_off.gif';
	back               = picimg.innerHTML
		picimg.innerHTML = '<div id="infobox" class="midblue11">' + eval(iTxt) + '</div>'
	if (vorh == 'v'){
		picimg.innerHTML = '<div id="infoboxv" class="midblue11">' + eval(iTxt) + '</div>'}
}
}

// LOAD DATA DETAIL BOXES from icons

  function load_details(item){
     var writep = ''
		detailsOn('products')

		paypal.handling_cart.value = handl
	 	writep += '<div style="text-align:center;margin-bottom:4px;"><a class="sample" href="samples.htm" target="_blank">view samples</a></div>'
var pdata = ie4 ? document.all.pdata : document.getElementById('pdata')
	        pdata.innerHTML = writep
}