/* products2.js */

var version;
var anInt;

// Lets start ...
function on_load(){;
  clearChecked("smt");

  drawGallery();

  eraseCookie("smt");
  eraseCookie("style");
  eraseCookie("colour");
  eraseCookie("colourName");

  borderStyles();

  // Sort the "start here" position
  var leftPos = document.getElementById('whole').offsetLeft;
  document.getElementById('start_here').style.left = (leftPos + 180) +"px";
  document.getElementById('start_here').style.display = "inline";

  enableSMT();
  anInt = setInterval("hideStartHere()", 3000);
}

// Enable the disabled radios
function enableSMT()
{
  document.getElementById('rad_smt_shaker').disabled = false;
  document.getElementById('rad_smt_modern').disabled = false;
  document.getElementById('rad_smt_trad').disabled = false;
}

function hideStartHere()
{
  document.getElementById('start_here').style.display = "none";
  clearInterval(anInt);
}

// If smt radio clicked ...
function clickedSmt(){
  var grp = "smt"
  var elements = document.getElementsByName(grp);
  var val = getCheckedValue(elements);
  var x;

  createCookie(grp, val, 0);
  x = readCookie(grp);
  if (x != val){
    alert("Cookies have been turned off in your browser!\n\nThis page requires cookies to function correctly.\nPlease turn cookies on and refresh the page.");
    return false;
  }
  eraseCookie("style");
  eraseCookie("colour");
  eraseCookie("colourName");

  clearChecked("changesc");
  clearChecked("allsc");

  showHide();
}

// If allsc radio clicked ...
function clickedAllsc(){
  clearChecked("changesc");
  clearChecked("allsc");

  showHide();
}

// If changesc radio clicked ...
function clickedChangesc(){
  clearChecked("changesc");
  clearChecked("allsc");  
}

function clickedallacolour(){
  var evt = window.event || arguments.callee.caller.arguments[0];
  var target = evt.target || evt.srcElement;
  createCookie("colour",target.id,0);

  var x = target.alt.indexOf(" - click", 0);
  var y = target.alt.substring(0,x);
  createCookie("colourName",y,0);

  eraseCookie("style");

  window.opener.showHide();
}
function clickedchangeacolour(){
  var evt = window.event || arguments.callee.caller.arguments[0];
  var target = evt.target || evt.srcElement;
  createCookie("colour",target.id,0);

  var x = target.alt.indexOf(" - click", 0);
  var y = target.alt.substring(0,x);
  createCookie("colourName",y,0);

  window.opener.showHide();
}

function clickedallastyle(){
  var evt = window.event || arguments.callee.caller.arguments[0];
  var target = evt.target || evt.srcElement;
  createCookie("style",target.id,0);

  eraseCookie("colour");
  eraseCookie("colourName");

  window.opener.showHide();
}
function clickedchangeastyle(){
  var evt = window.event || arguments.callee.caller.arguments[0];
  var target = evt.target || evt.srcElement;
  createCookie("style",target.id,0);

  window.opener.showHide();
}

function clearChecked(aName){
  var radioObj = document.getElementsByName(aName);
	var radioLength = radioObj.length;
	for(var i = 0; i < radioLength; i++) {
		radioObj[i].checked = false;
	}
}

// Does all the hard work!
function showHide(){
  var showHideAllsc, showHideColour, showHideStyle, showHide;
  var showInfo = "";
  var x,y,z = "";

  // If "smt" has a value, show allsc
  smtValue = readCookie("smt");
  if (smtValue != ""){
    showHideAllsc = "visible";
    showInfo = "smt";
    showInfoSmt = smtValue.substring(1,2).toUpperCase() + smtValue.substring(2);
  }else{
    showHideAllsc = "hidden";
  }
  visibleHidden("allsc", showHideAllsc);
  visibleHidden("infosmt", showHideAllsc);

  // If a colour has been selected, show "change style"
  var colourSelected = readCookie("colour");
  var colourInfo = "";
  if (colourSelected != null){
    showHideStyle = "visible";
  }else{
    colourSelected = "";
    showHideStyle = "hidden";
  }
  visibleHidden("changestyle", showHideStyle);
  visibleHidden("changescs2c", showHideStyle);

  // If a style has been selected, show "change colour"
  var styleSelected = readCookie("style");
  var styleInfo = "";
  if (styleSelected != null){
    showHideColour = "visible";
  }else{
    styleSelected = "";
    showHideColour = "hidden";
  }
  visibleHidden("changecolour", showHideColour);
  visibleHidden("changescc2s", showHideColour);
  visibleHidden("infoblurbtext", showHideColour);

  // If either style/colour been selected, show change box
  if (showHideColour == "visible" || showHideStyle == "visible"){
    showInfo = "scd";
    showHide = "visible";
  }else{
    showHide = "hidden";
  }
  visibleHidden("changesc", showHide);
  visibleHidden("infodoorcolourheads", showHide);
  
  // Display relevant details in infobox
  if (showInfo != ""){
    // list of html IDs/classes that need to be shown or not
    var info = ['init','smt','scd'];

    for (x in info){
      y = "hidden";
      if (info[x] == showInfo)
        y = "visible";

      visibleHidden("info" + info[x], y);
    }
  }

  // If a shaker/contemporary, modern or traditional selected, show it
  if (showHideAllsc){
    z = showInfoSmt;
    if (z == "Shaker"){
      z = "Contemporary";
    }
    var altTitle = "A "+ z +" style kitchen - click to enlarge"

    //image
    z = "<img onclick=openpopup('/popup.php?name=enlarge&id=smt') src=\"/images/kitchens/" + showInfoSmt.toLowerCase() + ".jpg\"" ;
    document.getElementById("infosmtimg").innerHTML =
      z + " alt=\"" + altTitle + "\" title=\"" + altTitle + "\"/>";

    //blurb for smt
    ajax_call(smtValue, showInfoSmt, 'static');
  }

  // If we're showing a style, colour or door, populate the element with the correct picture
  var buttons = "hidden";
  if (styleSelected || colourSelected){
    z = "";

    var id = "";
    var style = "cursor:pointer;";
    var ajax = "";
    var onclickid = "";
    // First get relevant image path
    if (styleSelected && colourSelected){
      // A style and Colour selected - merge!
      x = "-" + styleSelected.substring(0,1);
      if (styleSelected.substring(1) == "sunningdale"){
        x = "a-" + styleSelected.substring(0,1);
      }
      if (styleSelected.substring(1) == "real oak" || styleSelected.substring(1) == "sunningdale"){
        ajax = " onload=\";ajax_call('" + styleSelected.substring(1) + "', '" + colourSelected + "', 'price_blurb_products2');\" ";
      }
      z = "<img " + ajax + "src=\"/images/products2/" + colourSelected + x + "-medium.jpg\"";
      if (styleSelected.substring(1) != "real oak" && styleSelected.substring(1) != "sunningdale"){
        z+=">";
        id = "id=\"mergemeup\" ";
      }
      buttons = "visible";
      onclickid = "door";
    }

    if (styleSelected){
      // gets used for "just style" or "style and colour" selected
      y = styleSelected.substring(1);
      x = "png";
      ajax = "onload=\"fixPNG(this);ajax_call('" + y + "', '" + colourSelected + "', 'price_blurb_products2');\" ";

      if (onclickid == "")
        onclickid = "style";
    }else{
      // gets used for colour only
      y = colourSelected;
      x = "jpg";
      style+= "height:272px;width:191px;border:2px solid silver;padding:0px;";  // because a class/id in products2.css don't want to work!
      onclickid = "colour";
    }
    if (colourSelected == "" || (styleSelected.substring(1) != "real oak" && styleSelected.substring(1) != "sunningdale"))
      z+= "<img " + id + "style=\"" + style + "\" " + ajax + "src=\"/images/products2/" + y + "-medium." + x + "\" ";

    // Now alt/title text
    x = null;
    y = styleSelected;
    if (y){
      x = y.substring(2,1).toUpperCase() + y.substring(2);
    }

    y = readCookie("colourName");  //Can't use colourSelected, we want the name!
    if (x && y){
      var altTitle = x + " in " + y + " - click to enlarge";
    }else{
      if (x){
        y = "";
      }else{
        x = "";
      }
      var altTitle = x + y + " - click to enlarge";
    }

    // image
    document.getElementById("infoscdimg").innerHTML =
      "<div onclick=openpopup('/popup.php?name=enlarge&id=" + onclickid + "')>" + z + " alt=\"" + altTitle + "\" title=\"" + altTitle + "\"/></div>";

    // Now the Style and Colour descriptors
    var thisSession = document.getElementById('this_session').value;
    if (styleSelected){
      x = styleSelected.substring(2,1).toUpperCase() + styleSelected.substring(2);
      y = "<h2>" + x + "</h2>";

    }else{
      y = "<p style=\"color:red;font-weight:bold;\">Please select<br />&quot;<span class=\"a_link\" onclick=\"openpopup('/popup.php?name=products2&"+ thisSession +"&box=change&value=styles');clickedChangesc();\">Styles in this colour</span>&quot;</p>";
    }
    if (colourSelected)
      z = "<h4 class=\"colourh4\">" + readCookie("colourName") + "</h4>";
    else
      z = "<p style=\"color:red;font-weight:bold;\">Please select<br />&quot;<span class=\"a_link\" onclick=\"openpopup('/popup.php?name=products2&"+ thisSession +"&box=change&value=colours');clickedChangesc();\">Colours in this style</span>&quot;</p>";

    var text = "<h4>Door Style:</h4>" + y;
    text+= "<h4>Colour Description:</h4>" + z;
    document.getElementById("infodoorcolourheads").innerHTML = text;
  }

  x = readCookie("colour");
  if (x = null)
    buttons = "hidden"; // last check that a valid combination of style/colour
  visibleHidden("infodoorbuttons", buttons);

  borderStyles();
}

// Give the user a helping hand by highlighting the box that needs attention
function borderStyles(){
  // default to all being "1px green solid"
  var smt = 1;
  var all, change = 0;

  var x = readCookie("colour");
  var y = readCookie("style");
  var z = readCookie("smt");
  if (z){
    smt = 0;
    all = 1;

    if (x || y){
      all = 0;
      change = 1;
    }
    if (x && y){
      change = 0;
    }
  }

  setBorder("smt", smt);
  setBorder("allsc", all);
  setBorder("changesc", change);
}
function setBorder (id, value){
  var x = "1px green solid";

  m = document.getElementById(id);
  if (value == 1)
    x = "4px sienna double";

  m.style.border = x;
}

// Get the currently selected door and add to the "gallery" cookie
function addToGallery (){
  var x;
  var maxInGallery = 10;

  var oldCookie = readCookie("gallery");
  if (!oldCookie)
    oldCookie = "";

  x = oldCookie.split("-");
  if ((x.length - 1) >= maxInGallery){
    alert("Sorry, a maximum of 10 doors can be stored in the gallery!");
    return false;
  }

  var door = readCookie("style") + "." + readCookie("colour") + "."
           + readCookie("colourName") + "." + readCookie("smt") + "-";
  if (oldCookie.indexOf(door) != -1){
    alert("This door is already in the Gallery!");
    return false;
  }

  createCookie("gallery", oldCookie + door, 30);

  drawGallery();
}
// Refresh the Gallery
function drawGallery(){
  var x,y,z;
  var galleryImages = "";

  x = readCookie("gallery");
  if (x != null){
    var doorList = x.split('-');
    for (door in doorList){
      x = doorList[door].split(".");
      if (x[0]){
        y = x[0].substring(2,1).toUpperCase() + x[0].substring(2);
        z = y + " in " + x[2] + " - click to view details";
        if (x[0].substring(1) == "real oak" || x[0].substring(1) == "sunningdale"){
          get = " onclick=\"getFromGallery(" + door + ");\"";
        }else{
          get = "";
        }
        var image = "<div" + get + "><img style=\"cursor:pointer;padding-top:10px;margin-left:10px;margin-top:0px;\" src=\"/images/products2/" + x[1] + "-" + x[0].substring(0,1) + "-small.jpg\"";
        if (x[0].substring(1) == "sunningdale"){
          image = "<div" + get + "><img style=\"cursor:pointer;padding-top:10px;margin-left:10px;margin-top:0px;\" src=\"/images/products2/" + x[1] + "a-" + x[0].substring(0,1) + "-small.jpg\"";
        }
        if (x[0].substring(1) != "real oak" && x[0].substring(1) != "sunningdale"){
          image+= "><img id=\"gallerydoorimg\" onload=\"fixPNG(this);\" onclick=\"getFromGallery(" + door + ");\" src=\"/images/products2/" + x[0].substring(1) + "-small.png\"";
        }
        image+=" alt=\"" + z + "\" title=\"" + z + "\" />\n";
        image+= "<img id=\"gallerydoordelete\" onclick=\"deleteFromGallery(" + door + ");\" src=\"/images/cancel.gif\" alt=\"Remove from gallery\" title=\"Remove from Gallery\" /></div>";
        galleryImages = image + galleryImages;  // show in reverse order added to gallery
      }
    }
  }
  document.getElementById("galleryimg").innerHTML = galleryImages;
}
// User has clicked on a Gallery door - display it
function getFromGallery(index){
  var doorList = readCookie("gallery").split('-');  
  x = doorList[index].split(".");

  createCookie("style", x[0], 0);
  createCookie("colour", x[1], 0);
  createCookie("colourName", x[2], 0);
  createCookie("smt", x[3], 0);

  var elements = document.getElementsByName("smt");
  var val = setCheckedValue(elements, x[3]);
  var elements = document.getElementsByName("allsc");
  var val = setCheckedValue(elements, "");
  var elements = document.getElementsByName("changesc");
  var val = setCheckedValue(elements, "");
  showHide();
}
// User wants to delete this from the gallery
function deleteFromGallery(index){
  var newList = "";
  var doorList = readCookie("gallery").split('-'); 

  for (var i=0; i<(doorList.length - 1); i++){
    if (i != index)
      newList+=doorList[i] + "-";
  }

  createCookie("gallery", newList, 30);

  drawGallery();
}

//Actually set elements to visble or hidden
function visibleHidden(obj, thereOrNot){
  var x = document.getElementById(obj);
  if (x)
    x.style.visibility = thereOrNot;
}

// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj){
	if(!radioObj)
		return "";
	var radioLength = radioObj.length;
	if(radioLength == undefined)
		if(radioObj.checked)
			return radioObj.value;
		else
			return "";
	for(var i = 0; i < radioLength; i++){
		if(radioObj[i].checked) {
			return radioObj[i].value;
		}
	}

	return "";
}
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue){
	if(!radioObj)
		return;
	var radioLength = radioObj.length;
	if(radioLength == undefined){
		radioObj.checked = (radioObj.value == newValue.toString());
		return;
	}
	for(var i = 0; i < radioLength; i++){
		radioObj[i].checked = false;
		if(radioObj[i].value == newValue.toString()){
			radioObj[i].checked = true;
		}
	}
}

function createCookie(name,value,days){
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name){
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++){
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

function fixPNG(myImage){
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

  if (version != undefined){
    if ((version >= 5.5) && (version < 7) && (document.body.filters)) 
    {
      var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
      var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
  	  var imgTitle = (myImage.title) ? 
		                 "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' "
	    var imgStyle = "display:inline-block;" + myImage.style.cssText
  	  var strNewHTML = "<span " + imgID + imgClass + imgTitle
                    + " style=\"" + "width:" + myImage.width 
                     + "px; height:" + myImage.height 
                     + "px;" + imgStyle + ";"
                     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                     + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
	    myImage.outerHTML = strNewHTML	  
    }
  }
}