// JavaScript functions for Darkness and Light Photopages
 
  	var thisSize; 	
 
    var fullsizeHTML = "<div id=\"pp-unmounted\"> <a href=\"Javascript:replaceImg('mounted');\"\
		title=\"click for "+dark+" "+mounted+" photograph (simulated)\"><img class=\"pp-photo\"  src=\""+fullsizeimgUrl+"\"><\/a><\/div>"; 
				  
	var mountedHTML = "<table id=\"pp-mounted\"  class=\"pp-dark-mount\"  cellspacing=\"0\" cellpadding=\"0\">\
        <tbody>\
          <tr>\
            <td style=\"width: 20%; height: 10%;\">&nbsp;<\/td>\
            <td>&nbsp;<\/td>\
            <td style=\"width: 20%;\">&nbsp;<\/td>\
          <\/tr>\
          <tr>\
            <td>&nbsp;<\/td>\
            <td>\
            <table>\
              <tbody>\
                <tr>\
                  <td colspan=\"2\" style=\"vertical-align: bottom;\">\
				    <a href=\"Javascript:replaceImg('mountedwhite');\"\
				  title=\"click for soft-white "+mounted+"\"><img class=\"pp-photo\"\
				  src=\""+mountedimgUrl+"\"><\/a><\/td>\
                <\/tr>\
                <tr>\
                  <td class=\"pp-mounted-caption\">"+photoTitle+"<\/td>\
                  <td class=\"signature\"><img  src=\"/photos_misc/dl_sig.gif\" \
				  alt=\"Derek Langley\"><\/td>\
                <\/tr>\
              <\/tbody>\
            <\/table>\
			<\/td>\
            <td>&nbsp;<\/td>\
          <\/tr>\
          <tr>\
            <td style=\"height: 3%;\">&nbsp;<\/td>\
            <td>&nbsp;<\/td>\
            <td>&nbsp;<\/td>\
          <\/tr>\
        <\/tbody>\
      <\/table>";
      
	var mountedwhiteHTML = "<table id=\"pp-mounted\"  class=\"pp-white-mount\"  cellspacing=\"0\" cellpadding=\"0\">\
        <tbody>\
          <tr>\
            <td style=\"width: 20%; height: 10%;\">&nbsp;<\/td>\
            <td>&nbsp;<\/td>\
            <td style=\"width: 20%;\">&nbsp;<\/td>\
          <\/tr>\
          <tr>\
            <td>&nbsp;<\/td>\
            <td>\
            <table>\
              <tbody>\
                <tr>\
                  <td colspan=\"2\" style=\"vertical-align: bottom;\">\
				  	<a href=\"Javascript:replaceImg('context');\" title=\"click for magnified details from photo\"><img class=\"pp-photo\"\
					  src=\""+mountedimgUrl+"\"><\/a><\/td>\
                <\/tr>\
                <tr>\
                  <td class=\"pp-mounted-caption\">"+photoTitle+"<\/td>\
                  <td class=\"signature\"><img  src=\"/photos_misc/dl_wsig.gif\" \
				  alt=\"Derek Langley\"><\/td>\
                <\/tr>\
              <\/tbody>\
            <\/table>\
			<\/td>\
            <td>&nbsp;<\/td>\
          <\/tr>\
          <tr>\
            <td style=\"height: 3%;\">&nbsp;<\/td>\
            <td>&nbsp;<\/td>\
            <td>&nbsp;<\/td>\
          <\/tr>\
        <\/tbody>\
      <\/table>";
            
    var contextHTML = "<div id=\"pp-detail-view\">\
	  	<div id=\"pp-context-imagebox\">\
		<a href=\"Javascript:replaceImg('detail1');\"	title=\"click for magnified view #1\">\
		<img class=\"pp-photo\" title=\"click for magnified view #1\" alt=\"context for magnified views\" src=\""+fullsizeimgUrl+"\"><\/a>\
			<div class=\"pp-context-box\" id=\"pp-context-box1\"><a href=\"Javascript:replaceImg('detail1');\"	title=\"click for magnified view #1\">\
				<span>1<\/span><img title=\"click for magnified view #1\" alt=\"magnified view #1\" src=\"/photos_misc/transparent.gif\"><\/a><\/div>\
			<div class=\"pp-context-box\" id=\"pp-context-box2\"><a href=\"Javascript:replaceImg('detail2');\"	title=\"click for magnified view #2\">\
				<span>2<\/span><img title=\"click for magnified view #2\" alt=\"magnified view #2\" src=\"/photos_misc/transparent.gif\"><\/a><\/div>\
			<div class=\"pp-context-box\" id=\"pp-context-box3\"><a href=\"Javascript:replaceImg('detail3');\"	title=\"click for magnified view #3\">\
				<span>3<\/span><img title=\"click for magnified view #3\" alt=\"magnified view #3\" src=\"/photos_misc/transparent.gif\"><\/a><\/div>\
			<div class=\"pp-context-box\" id=\"pp-context-box4\"><a href=\"Javascript:replaceImg('detail4');\"	title=\"click for magnified view #4\">\
				<span>4<\/span><img title=\"click for magnified view #4\" alt=\"magnified view #4\" src=\"/photos_misc/transparent.gif\"><\/a><\/div>\
			<div class=\"pp-context-box\" id=\"pp-context-box5\"><a href=\"Javascript:replaceImg('detail5');\"	title=\"click for magnified view #5\">\
				<span>5<\/span><img title=\"click for magnified view #5\" alt=\"magnified view #5\" src=\"/photos_misc/transparent.gif\"><\/a><\/div>\
				<\/div>\
		 <p class=\"pp-detail-caption\">Magnified views: click on a red box to enlarge it, or ..<br />\
		 	click for <a href=\"Javascript:replaceImg('detail1');\" title=\"click for magnified view #1\">magnified view #1<\/a><\/a>\
		 <\/p><\/div>";      
    var detail1HTML = "<div id=\"pp-detail-view\">\
	  	<a href=\"Javascript:replaceImg('detail2');\"	title=\"click for magnified view #2\">\
		<img class=\"pp-photo\" alt=\"magnified-view #1\" src=\""+detailUrl[1]+"\"><\/a>\
		<p class=\"pp-detail-caption\">Magnified view #1: "+detailsizeString+"<br />\
		Click for <a href=\"Javascript:replaceImg('detail2');\">magnified view #2<\/a>\
		 .. or .. <a href=\"Javascript:replaceImg('context');\">go back to the overview<\/a>\
		<\/p><\/div>";      
    var detail2HTML = "<div id=\"pp-detail-view\">\
	  	<a href=\"Javascript:replaceImg('detail3');\"	title=\"click for magnified view #3\">\
		<img class=\"pp-photo\" alt=\"magnified-view #2\" src=\""+detailUrl[2]+"\"><\/a>\
		<p class=\"pp-detail-caption\">Magnified view #2: "+detailsizeString+"<br />\
		Click for <a href=\"Javascript:replaceImg('detail3');\">magnified view #3<\/a>\
		 .. or .. <a href=\"Javascript:replaceImg('context');\">go back to the overview<\/a>\
		<\/p><\/div>";      
    var detail3HTML = "<div id=\"pp-detail-view\">\
	  	<a href=\"Javascript:replaceImg('detail4');\"	title=\"click for magnified view #4\">\
		<img class=\"pp-photo\" alt=\"magnified-view #3\" src=\""+detailUrl[3]+"\"><\/a>\
		<p class=\"pp-detail-caption\">Magnified view #3: "+detailsizeString+"<br />\
		Click for <a href=\"Javascript:replaceImg('detail4');\">magnified view #4<\/a>\
		 .. or .. <a href=\"Javascript:replaceImg('context');\">go back to the overview<\/a>\
		<\/p><\/div>";   
    var detail4HTML = "<div id=\"pp-detail-view\">\
	  	<a href=\"Javascript:replaceImg('detail5');\"	title=\"click for magnified view #5\">\
		<img class=\"pp-photo\" alt=\"magnified-view #4\" src=\""+detailUrl[4]+"\"><\/a>\
		<p class=\"pp-detail-caption\">Magnified view #4: "+detailsizeString+"<br />\
		Click for <a href=\"Javascript:replaceImg('detail5');\">magnified view #5<\/a>\
		 .. or .. <a href=\"Javascript:replaceImg('context');\">go back to the overview<\/a>\
		<\/p><\/div>"; 
    var detail5HTML = "<div id=\"pp-detail-view\">\
	  	<a href=\"Javascript:replaceImg('fullsize');\"	title=\"click for full-size photograph\">\
		<img class=\"pp-photo\"\ alt=\"magnified-view #5\" src=\""+detailUrl[5]+"\"><\/a>\
		<p class=\"pp-detail-caption\">Magnified view #5: "+detailsizeString+"<br />\
		Click for <a href=\"Javascript:replaceImg('fullsize');\">full-size photograph<\/a>\
		 .. or .. <a href=\"Javascript:replaceImg('context');\">go back to the overview<\/a>\
		<\/p><\/div>";
	  
	function setView() {
		window.name = "main";
/*		if ( window.opener != null ) { 		*/
/*			replaceImg( window.opener.getView() ) };   commented out these 2 lines to prevent IE6 error DL 13/8/06 */
	}
  
  	function replaceImg( imgType ) {
  		var photoSlot = document.getElementById( "pp-photo-slot" );
  		if ( imgType == "mounted" ) {
			photoSlot.innerHTML = mountedHTML;
		}
  		else if ( imgType == "mountedwhite" ) {
			photoSlot.innerHTML = mountedwhiteHTML;
		}	
		else if ( imgType == "context" ) {
			photoSlot.innerHTML = contextHTML;
		}	
		else if ( imgType == "detail1" ) {
			photoSlot.innerHTML = detail1HTML;
		}	
		else if ( imgType == "detail2" ) {
			photoSlot.innerHTML = detail2HTML;
		}	
		else if ( imgType == "detail3" ) {
			photoSlot.innerHTML = detail3HTML;
		}	
		else if ( imgType == "detail4" ) {
			photoSlot.innerHTML = detail4HTML;
		}	
		else if ( imgType == "detail5" ) {
			photoSlot.innerHTML = detail5HTML;
		}
		else {
			photoSlot.innerHTML = fullsizeHTML;
		}
		thisView = imgType;
	}
	
	function getView() {
		return( thisView );
	}
	
	function getSize() {
		return( thisSize );
	}
	
	function reducedWindow( popUrl, wSize, pOrient ) {
		thisSize = wSize;
		if ( thisView == "mounted" ||  thisView == "mountedwhite" ) {
			if ( wSize == "small" ) {
				pWidth = pOrient == "landscape" ? 465 : 380;
				pHeight = pOrient == "landscape" ? 365 : 450;
			}
			else if ( wSize == "full" ) {
				pWidth = pOrient == "landscape" ? 628 : 508;
				pHeight = pOrient == "landscape" ? 498 : 618;
			}
		}
		else if ( thisView == "fullsize" || thisView == "context" ) {  //unmounted
			if ( wSize == "small" ) {
				pWidth = pOrient == "landscape" ? 465 : 338;
				pHeight = pOrient == "landscape" ? 333 : 448;
			}
			else if ( wSize == "full" ) {
				pWidth = pOrient == "landscape" ? 628 : 458;
				pHeight = pOrient == "landscape" ? 453 : 613;
			}
		}
		else  {		// detail/context - don't bother with small
			pWidth = pOrient == "landscape"  ? 590 : 460;
			pHeight = pOrient == "landscape" ? 440 : 565;
		}
		win = window.open( "", "", "width=" + pWidth + ",height=" + pHeight + ",toolbar=no,location=no,directories=0,status=no,menubar=no,resizable=1,scrollbars=1" );
		win.location = popUrl;
		win.focus();
	}
	
	function setOptions() {
		document.cart_form.submitted.value = 1;
		document.cart_form.op.value = "setoptions";
		document.cart_form.refpage.value = window.location.href;
		document.cart_form.submit();
	}
	
	function validate() {
		if ( document.cart_form.op.value != "setoptions" ) {
			var selSpecIdx = document.cart_form.product_details.selectedIndex;
			var selColIdx = document.cart_form.mount_color.selectedIndex;
			if ( selSpecIdx == 0 ) {
				// User hasn't selected a valid option
				if ( selColIdx == 0 ) {
					alert( "Please choose the buying options (size, "+mounting+", framing) and "+mount+" color for your photograph" );
					}
				else {
					alert( "Please choose the buying options (size, "+mounting+", framing) for your photograph" );
					}	
				return( false );
				} 
			else if ( selColIdx == 0 && selSpecIdx > 5 ) {
				// mounted print but no color specified
				alert( "Please choose a "+mount+" color for your photograph" );
				return( false ); 
				}		
			}		
		return( true );
	}

	
	function reportStock() {
		var selSpecIdx = document.cart_form.product_details.selectedIndex;
		var photoSpec = document.cart_form.product_details.options[selSpecIdx].value;
		var photoSize = photoSpec.charAt(0);
		var availSizes = toning == "sep" ? sepSizes : bwSizes;
		var availArr = availSizes.split( " " );
		var foundIt = false;
		for ( i = 0; i < availArr.length; i++  ) {
			if ( photoSize == availArr[i] ) {
				foundIt = true;
				break;
			}
		}
		if ( !foundIt ) {
			alert( "We do not currently have this size in stock, but I may be able to print it especially for you - please ask! Or just go ahead with a provisional order - I'll let you know about availability and timescales, and you can decide what to do.	(click button to add to basket)");
		}
		if ( selSpecIdx == 10 ) {
			// C-size frame
			alert( "Because they are difficult and expensive to send, we normally only do sizeC frames for personal-collection, or if you want several of them. Please contact us to discuss, or go ahead with a provisional order, and we'll contact to you. (click button to add to basket)"  );
			}		
	}