// DISPLAY ENGINE v1.5  Design copyright M J Sibley mike@SibleyFineArt.com

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

var ie4=document.all
var ns6=document.getElementById && !document.all
var opr=navigator.userAgent.indexOf('Opera/') | navigator.userAgent.indexOf('Opera ');   // Opera identifying Opera or Other
var back = ''
var titl = ''
var vorh = ''
var ordno= ''

var opfix = ie4 ? document.all.opfix : document.getElementById('opfix')

var ship_print = 5.00   //shipping £ per Print
var ship_other = 5.00   //shipping £ per Other item
var handling   = 2.00   //handling £ per order

var pboxhi   =  '230px'	//set print box display area height
var dboxhi   =  '130px'	//set details box display area height
var oboxhi   =  '120px'	//set original box display area height

  function viewThis(vh,dir,image,title,info,w,h,isin,zoom,infpg,print,ed,pw,ph,pcost,pinfo,ono,ocost,oinfo,other,otherinfo,otherprice){
           vorh = vh
           ordno= ono
           titl = title
            otr = other
	   iTxt = image + "";
	     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   = '"<b>' + title + '</b>"'
     var sze1   = w + ' &times; ' + h + ' cm<br><div style="text-indent:62px">' + ((parseFloat(w))/2.54).toFixed(0) + '" &times; ' + ((parseFloat(h))/2.54).toFixed(0) + '"</div>'
     var sze2   = pw + ' &times; ' + ph + ' cm &#151; ' + ((parseFloat(pw))/2.54).toFixed(0) + '" &times; ' + ((parseFloat(ph))/2.54).toFixed(0) + '"'
     var write  = ''
     var writep = ''
     var writeo = ''
     var ship   = 'plus shipping at cost'
     var cst1   = parseFloat(pcost)
     var cst2   = parseFloat(ocost)
     var cst3   = parseFloat(otherprice)

           window.scrollTo(0,210)
  if (ns) {window.scrollTo(0,210)}
  if (opr){window.scrollTo(0,215)}

var screen   = ie4 ? document.all.screen : document.getElementById('screen');
var pbox     = ie4 ? document.all.pbox : document.getElementById('pbox');
var dbox     = ie4 ? document.all.dbox : document.getElementById('dbox');
var obox     = ie4 ? document.all.obox : document.getElementById('obox');
var pboxh    = ie4 ? document.all.pboxh : document.getElementById('pboxh');
var dboxh    = ie4 ? document.all.dboxh : document.getElementById('dboxh');
var oboxh    = ie4 ? document.all.oboxh : document.getElementById('oboxh');
var pdetails = ie4 ? document.all.pdetails : document.getElementById('pdetails');
var details  = ie4 ? document.all.details : document.getElementById('details');
var odetails = ie4 ? document.all.odetails : document.getElementById('odetails');
var viewcart = ie4 ? document.all.viewcart : document.getElementById('viewcart');
var picimg   = ie4 ? document.all.picimg : document.getElementById('picimg');
var iconh    = ie4 ? document.all.iconh : document.getElementById('iconh');
var text     = ie4 ? document.all.text : document.getElementById('text');

// empty cells of all data
		screen.style.width  = ''
		screen.style.height = ''
                        screen.style.border = ''
		pbox.innerHTML      = ''
		dbox.innerHTML      = ''
		obox.innerHTML      = ''
		pbox.style.height   = ''
		dbox.style.height   = ''
		obox.style.height   = ''
		pbox.width          = ''
	             pbox.style.paddingTop = ''
		pboxh.innerHTML     = ''
		dboxh.innerHTML     = ''
		oboxh.innerHTML     = ''
 if (navigator.userAgent.indexOf('Opera/') != -1 | navigator.userAgent.indexOf('Opera ') != -1)
	  	{opfix.style.height = ''}   // Opera identifying as Opera or Other
	           picimg.innerHTML = '';

var printsv	= '<div id="iconv"></div><div id="pdetails" 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;padding-top:5px;text-align:left;"><div id="data" class="datatxt">&nbsp;</div></div>'
var origs	= '<div id="odetails" style="width:180px;margin-left:6px;" align="center"><div id="odata" class="datatxt">&nbsp;</div></div>'
var printsh	= '<div id="pdetails" 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;padding-top:5px;text-align:left;"><div id="data" class="datatxt">&nbsp;</div></div>'
var origsh	= '<div id="odetails" style="width:180px;margin-left:0px;text-align:center;"><div id="odata" class="datatxt">&nbsp;</div></div>'
    if ( vh == "v"  ){
 if (navigator.userAgent.indexOf('Opera/') != -1 | navigator.userAgent.indexOf('Opera ') != -1)
	  	{opfix.style.height = '546px'} // Opera identifying as Opera or Other
		screen.style.width  = '404px'
		screen.style.height = '546px'
	               screen.style.border = '1px solid #485e29'
		pbox.width          = 192
 	               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'
		pbox.innerHTML      = printsv
		pbox.style.height   = pboxhi
		dbox.innerHTML      = data;
		dbox.style.height   = dboxhi
		obox.innerHTML      = origs
		obox.style.height   = oboxhi
	             pbox.style.paddingTop = '60px'
	 text.innerHTML = '<div id="txtline" class="tan10"></div>'
var iconv  = ie4 ? document.all.iconv : document.getElementById('iconv');
   }
    if ( vh == "h"  ){
 if (navigator.userAgent.indexOf('Opera/') != -1 | navigator.userAgent.indexOf('Opera ') != -1)
	  	{opfix.style.height = '440px'} // Opera identifying as Opera or Other
		screen.style.width  = '591px'
		screen.style.height = '440px'
                screen.style.border = '1px solid #485e29'
 	        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'
		pboxh.innerHTML     = printsh
		dboxh.innerHTML     = datah
		oboxh.innerHTML     = origsh
		dboxh.style.width   = '210px' //IE6 fix
	 text.innerHTML = '<table width="100%" height=20 border=0><tr><td width=110><div id="iconh"></div></td><td><div id="txtline" class="tan10"></div></td><td width=110>&nbsp;</td></tr></table>'
var iconh  = ie4 ? document.all.iconh : document.getElementById('iconh');
   }
// 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');
	txtline.innerHTML = txt1;
		detailsOff('details');
		detailsOff('pdetails');
		detailsOff('odetails');
    if (  w != ""  ){
		detailsOn('details');
		write += '<div style="text-indent:28px;margin-bottom:5px;">size&nbsp;:&nbsp;' +sze1 + '</div>'}
    if (isin != ""  ){
		detailsOn('details');
		write +='<div style="text-indent:4px;margin-bottom:5px">medium&nbsp;:&nbsp;' +isin + '<br></div>'}
    if (print != ""){
		detailsOn('pdetails')
		write += '<div style="text-indent:6px;margin-bottom:5px">order # :&nbsp;' + ono + '<br><br>'
    if ( info != ""){
		detailsOn('details')
  		write += '<div style="text-align:center">' +info + '<br><br></div>'}
       if (print == 'le'){
		pcst = pcost;
 	  	writep = '<div class="datahead">PRINT Limited edition</div><div align="center"><div style="text-align:center;margin-bottom:3px">Edition of&nbsp;' + ed + '</div><div style="padding:0px 2px;margin-bottom:3px">' + pinfo + '</div>' +sze2 + '<br><b>&pound;' +pcost + '</b><br><a href="javascript:document.paypal.submit()" OnMouseOver="titl2=\'LE Print - \'+ titl;document.paypal.item_name.value=titl2;document.paypal.item_number.value=ordno;document.paypal.amount.value=pcst;document.paypal.shipping.value=ship_print;document.paypal.shipping2.value=ship_print;"><input type=image height=16 width=100 alt="Make secure payments with PayPal!" src="images/submit_pp.gif" border=0 name="submit" style="margin:4px 7px 4px 0px;"></a><a class="conv" href="#" onFocus="this.blur()" onClick="return false;" onMouseOver="cost=pcst;menuOn(event,\'link[1]\')" onMouseout="dlayhide()"><img src="images/currency_pp.gif" width=60 height=16 border=0 vspace=4></a></div>'}
       if (print == 'oe'){
		pcst = pcost;
  	 	writep = '<div class="datahead">PRINT Open edition</div><div align=center><div style="padding:0px 2px;margin-bottom:3px">' + pinfo + '</div>' + sze2 + '<br><b>&pound;' +pcost + '</b><br><a href="javascript:document.paypal.submit()" OnMouseOver="titl2=\'OE Print - \'+ titl;document.paypal.item_name.value=titl2;document.paypal.item_number.value=ordno;document.paypal.amount.value=pcst;document.paypal.shipping.value=ship_print;document.paypal.shipping2.value=ship_print;"><input type=image height=16 width=100 alt="Make secure payments with PayPal!" src="images/submit_pp.gif" border=0 name="submit" style="margin:4px 7px 4px 0px;"></a><a class="conv" href="#" onFocus="this.blur()" onClick="return false;" onMouseOver="cost=pcst;menuOn(event,\'link[1]\')" onMouseout="dlayhide()"><img src="images/currency_pp.gif" width=60 height=16 border=0 vspace=4></a></div>'}
		}
    if (ocost != ""){
		detailsOn('odetails')
		ocst = ocost;
  	 	writeo = '<div class="datahead">ORIGINAL for sale</div><div align=center>' + oinfo + '<br/><b>&pound;' + ocost + '</b><br/><a href="javascript:document.paypal.submit()" OnMouseOver="titl2=\'Original - \'+ titl;document.paypal.item_name.value=titl2;document.paypal.item_number.value=ordno;document.paypal.amount.value=ocst;document.paypal.shipping.value=ship_print;document.paypal.shipping2.value=ship_print;"><input type=image height="16" width="100" alt="Make secure payments with PayPal!" src="images/submit_pp.gif" border="0" name="submit" style="margin:4px 7px 4px 0px;"></a><a class="conv" href="#" onFocus="this.blur()" onClick="return false;" onMouseOver="cost=ocst;menuOn(event,\'link[1]\')" onMouseout="dlayhide()"><img src="images/currency_pp.gif" width="60" height="16" border="0" style="margin:4px 0px 4px 0px;"></a></div>'}
    if (other != ""){
		detailsOn('odetails');
		othr = otherprice;
	  //      pbox.style.paddingTop = '0px'
 	  	writeo += '<div class="datahead">' + other + '</div><div align=center><div style="padding:0px 2px;margin-bottom:3px">' + otherinfo + '</div><b>&pound;' + otherprice + '</b><br/><a href="javascript:document.paypal.submit()" OnMouseOver="titl2=otr +\' - \'+ titl;document.paypal.item_name.value=titl2;document.paypal.item_number.value=ordno;document.paypal.amount.value=othr;document.paypal.shipping.value=ship_other;document.paypal.shipping2.value=ship_other;"><input type="image" height="16" width="100" alt="Make secure payments with PayPal!" src="images/submit_pp.gif" border="0" name="submit" style="margin:4px 7px 4px 0px;"></a><a class="conv" href="#" onFocus="this.blur()" onClick="return false;" onMouseOver="cost=othr;menuOn(event,\'link[1]\')" onMouseout="dlayhide()"><img src="images/currency_pp.gif" width="60" height="16" border="0" style="margin:4px 0px 4px 0px;"></a></div>'}

var  data = ie4 ? document.all.data : document.getElementById('data');
var pdata = ie4 ? document.all.pdata : document.getElementById('pdata');
var odata = ie4 ? document.all.odata : document.getElementById('odata');

     if (vh=='h'){iconh.innerHTML = options}
     if (vh=='v'){iconv.innerHTML = options}
		 data.innerHTML = write
	        pdata.innerHTML = writep
	        odata.innerHTML = writeo
}

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 = "displayoff"
}

//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="400" 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="infotxt">' + eval(iTxt) + '</div>'
	if (vorh == 'v'){
		picimg.innerHTML = '<div id="infoboxv" class="infotxt">' + eval(iTxt) + '</div>'}
}
}