var is_iPad = navigator.userAgent.match(/iPad/i) != null;

function initAppXML() {
  if (window.DOMParser) {
    parser = new DOMParser();
    appXML = parser.parseFromString('<app><project><layers></layers></project></app>', 'text/xml');
  }
  else { // Internet Explorer
    appXML = new ActiveXObject('Microsoft.XMLDOM');
    appXML.async = 'false';
    appXML.loadXML('<app><project><layers></layers></project></app>'); 
  }
}

function ResizeConfig() {
  var winWid = 1086;  //getWindowSize('w') * 0.9;
  var winWid = getWindowSize('w') * 0.9;
  if (winWid < 1086) winWid = 1086;
  winWid = 1086;  //FIX THE WIDTH TO THIS WIDTH!
  var winHgt = getWindowSize('h');
  var hgt = new Array();
  var wid = new Array();
  
  document.getElementById('main_div').style.width = winWid + 'px';
  document.getElementById('main_div').style.left = ((getWindowSize('w') - winWid) / 2) + 'px';
  
  document.getElementById('color_picker').style.left = ((getWindowSize('w') - winWid) / 2 + winWid - 330) + 'px';
  ShowHideColorPicker();
  
  if (document.getElementById('groupDoorsDiv')) document.getElementById('groupDoorsDiv').style.left = ((getWindowSize('w') - winWid) / 2 + 740) + 'px';
  
  hgt[0] = parseInt(document.getElementById('grid_header').style.height);
  hgt[1] = parseInt(document.getElementById('grid_tabs').style.height);
  hgt[2] = parseInt(document.getElementById('grid_footer').style.height) + 10;
  
  //compute "stage" area height (which is dynamic)
  hgt[3] = winHgt - hgt[0] - hgt[1] - hgt[2];
  document.getElementById('grid_stage').style.height = hgt[3].toString() + 'px';
  
  //set wid of tools
  if (document.getElementById('step').value == '1') {
  	document.getElementById('grid_tools').style.width = '0px';
  } else {
    document.getElementById('grid_tools').style.width = '330px';
  }
  
  //compute "display" area width ("tools" width is constant, "display" is dynamic) 
  wid[0] = parseInt(document.getElementById('grid_tools').style.width);
  wid[1] = winWid - wid[0];
  document.getElementById('grid_display').style.width = wid[1].toString() + 'px';
  document.getElementById('grid_display').style.height = hgt[3].toString() + 'px';
  
  //resize tools area (grid_list & grid_options)
  hgt[2] = parseInt(document.getElementById('grid_options').style.height);
  hgt[1] = hgt[3] - hgt[2] + 4;
  document.getElementById('grid_list').style.height = hgt[1].toString() + 'px';
  
  GridListResize();
  ResizeGridDisplay();
}

function getWindowSize(sWidOrHgt) {
  var w = 0;
  var h = 0;
  if(typeof(window.innerWidth) == 'number') {
    //Non-IE
    w = window.innerWidth;
    h = window.innerHeight;
  } 
  else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    //IE 6+ in 'standards compliant mode'
    w = document.documentElement.clientWidth;
    h = document.documentElement.clientHeight;
  } 
  else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
    //IE 4 compatible
    w = document.body.clientWidth;
    h = document.body.clientHeight;
  }
  
  if (sWidOrHgt == 'w') return w;
  if (sWidOrHgt == 'h')  return h;
}

function getXML(theUrl) {
  var xHttp;
  if (window.XMLHttpRequest)
    xHttp = new XMLHttpRequest();
  else
    xHttp = new ActiveXObject('Microsoft.XMLHTTP');
  
  xHttp.open('GET', theUrl, false);
  xHttp.send('');
  return xHttp.responseXML;
}

function getDoc(theUrl, postParams, bAsync) {
  var xHttp;
  if (window.XMLHttpRequest)
    xHttp = new XMLHttpRequest();
  else
    xHttp = new ActiveXObject('Microsoft.XMLHTTP');
  
  if (!bAsync) bAsync = false;
  
  if (!postParams) {
    //GET
    xHttp.open('GET', theUrl, bAsync);
    xHttp.send('');
    return xHttp.responseText;
  }
  else {
    //POST
    xHttp.open("POST", theUrl, bAsync);
    xHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xHttp.send(postParams);
    if (bAsync == false) return xHttp.responseText;
  }
}

/* ----- GRID DISPLAY ----- */
var zoomFactor = 1.0, renderWid = 1000;
function ZoomImage(n) {
  var z = zoomFactor;
  
  if (n == -1) {
    z = z - 0.5;
    if (z <= 1) z = 1;
  }
  else {
    z = z + 0.5;
    if (z >= 4) z = 4;
  }
  zoomFactor = z;
  
  var lastRenderWid = renderWid;
  ResizeGridDisplay();
  if ((renderWid > lastRenderWid)&&(document.getElementById('step').value == '3')) DrawHouse();  //redraw the house at a higher resolution
}

var inResizeGridDisplay = 0;
function ResizeGridDisplay() {
  if (inResizeGridDisplay == 1) return;
  inResizeGridDisplay = 1;
  
  var sId, i;
  
  //if (document.getElementById('display_tabs'))
  //  divHgt = divHgt - parseInt(document.getElementById('display_tabs').style.height);  //if there are display tabs (ie: House View | Door View), take this height into account
  
  if (document.getElementById('step').value == '3') {
    if (document.getElementById('viewTabID').value == '-999') {
      document.getElementById('display_object0').style.display = 'none';
      document.getElementById('display_object1').style.display = 'none';
      document.getElementById('display_object2').style.display = 'none';
      document.getElementById('display_object3').style.display = 'none';
      document.getElementById('display_project').style.display = 'inline';
      document.getElementById('canvas').style.display = 'inline';
      document.getElementById('display_summary').style.display = 'none';
    } 
    else if (document.getElementById('viewTabID').value == '-333') {
      document.getElementById('display_object0').style.display = 'none';
      document.getElementById('display_object1').style.display = 'none';
      document.getElementById('display_object2').style.display = 'none';
      document.getElementById('display_object3').style.display = 'none';
      document.getElementById('display_project').style.display = 'none';
      document.getElementById('canvas').style.display = 'none';
      document.getElementById('display_summary').style.display = 'inline';
    }
    else {
      document.getElementById('display_object0').style.display = 'none';
      document.getElementById('display_object1').style.display = 'none';
      document.getElementById('display_object2').style.display = 'none';
      document.getElementById('display_object3').style.display = 'none';
      document.getElementById('display_project').style.display = 'none';
      document.getElementById('canvas').style.display = 'none';
      document.getElementById('display_summary').style.display = 'none';
      //find which viewtab is visible
      for (i=0; i<drawGridLayerID.length; i++) {
        if (drawGridLayerID[i] == document.getElementById('viewTabID').value) {
          document.getElementById('display_object' + i).style.display = 'inline';
        }
      }
    }
  }
  
  var divWid = parseInt(document.getElementById('grid_display').style.width) - 40;  //- 30
  var divHgt = parseInt(document.getElementById('grid_display').style.height) - 45; //- 30
  var x, y, w, h;
  
  for (i=0; i<=4; i++) {
    if (i == 4) sId = 'display_project'; else sId = 'display_object' + i; 
    
    var imgWid = parseInt(document.getElementById(sId).getAttribute('w'));
    var imgHgt = parseInt(document.getElementById(sId).getAttribute('h'));
    
	if ((imgWid > 0)&&(imgHgt > 0)) {
	  if ((divWid / divHgt) < (imgWid / imgHgt)) {
	    w = divWid;
	    h = divWid * imgHgt / imgWid;
	  } 
	  else {
	    w = divHgt * imgWid / imgHgt;
	    h = divHgt;
	  }
	  
      //zoom factor
	  if (sId == 'display_project') {
	    w = w * zoomFactor;
	    h = h * zoomFactor;
	  }
	  
	  x = 0;
	  if (divWid > w) x = (divWid - w) / 2 + 0;
	  y = 0;
      
	  if (isNaN(w) == false) {  //this is for the occasional IE bug from the getWindowSize call
	    document.getElementById(sId).style.width = w.toString() + 'px';
	    document.getElementById(sId).style.height = h.toString() + 'px';
	    document.getElementById(sId).style.left = x.toString() + 'px';
	    document.getElementById(sId).style.top = y.toString() + 'px';
	    
        if ((sId == 'display_project')&&(paper)) {
	      paper.setSize(w, h);
	      resizeCanvas(imgWid, imgHgt, w, h);
	      document.getElementById('canvas').style.width = w.toString() + 'px';
	      document.getElementById('canvas').style.height = h.toString() + 'px';
	      document.getElementById('canvas').style.left = x.toString() + 'px';
	      document.getElementById('canvas').style.top = y.toString() + 'px';
	      
	      if (w > 1200) renderWid = 1600; else renderWid = 1000;
	      renderWid = 1000;
	        
	      document.getElementById('zoom_container').style.left = (x + 25) + 'px';
	      document.getElementById('zoom_container').style.display = document.getElementById('display_project').style.display;
	    }
	  }  
	}
  }
    
  //resize the box around the image
  document.getElementById('display_image').style.width = divWid.toString() + 'px';
  document.getElementById('display_image').style.height = divHgt.toString() + 'px';
  if (document.getElementById('step').value == '1') document.getElementById('display_image').style.height = (divHgt - 75) + 'px';
  
  if (document.getElementById('display_tabs'))  //display tabs (house view | door view)
    document.getElementById('display_tabs').style.width = divWid.toString() + 'px';
    
  inResizeGridDisplay = 0;
}

/* ----- POST ----- */
function GetCurrent(sLayerID) {
  var i, layerNode, productNode, layerID;
  
  if (sLayerID) layerID = sLayerID; else layerID = document.getElementById('currentLayerID').value;
  
  //find variables from layerID in project XML
  var projectNode = appXML.getElementsByTagName('project')[0];
  var layerNodes = appXML.getElementsByTagName('layer');
  for (i=0; i<layerNodes.length; i++) {
    if (layerNodes[i].getAttribute('layerID') == layerID) {
      return {
        layerNode: layerNodes[i],
        productNode: layerNodes[i].getElementsByTagName('product')[0]
      };
    }
  }  
}

function AttachProductToGroupedLayers(sLayerID, drawIndex) {
  var i, k, productNode, newNode, removeNode, layerID, sProductFilter;
  
  if (sLayerID) layerID = sLayerID; else layerID = document.getElementById('currentLayerID').value;
  
  //check if grouping is enabled
  if (!document.getElementById('groupDoors').checked) return;
  
  //find layer in project XML
  var projectNode = appXML.getElementsByTagName('project')[0];
  var layerNodes = appXML.getElementsByTagName('layer');
  for (i=0; i<layerNodes.length; i++) {
    if (layerNodes[i].getAttribute('layerID') == layerID) {
      sProductFilter = layerNodes[i].getAttribute('productFilter');
      productNode = layerNodes[i].getElementsByTagName('product')[0];  //this is the product, now attach it to all similar layers
      break;
    }
  }
  //attach THIS product to the grouped layers as well...
  for (i=0; i<layerNodes.length; i++) {
    if ((layerNodes[i].getAttribute('productFilter') == sProductFilter)&&(layerNodes[i].getAttribute('layerID') != layerID)) {
      //show the Group Door checkbox
      document.getElementById('groupDoorsDiv').style.visibility = 'visible';

      //set the new image to the layer
      for (k=0; k<drawGridLayerID.length; k++) {
          if (drawGridLayerID[k] == layerNodes[i].getAttribute('layerID')) {
            document.getElementById('display_object' + k).src = document.getElementById('display_object' + drawIndex).src;
            break;
          }
      }
      
      //replace current product node with this one
      removeNode = layerNodes[i].getElementsByTagName('product')[0];
      layerNodes[i].removeChild(removeNode);
      //add the cloned product node back in
      newNode = productNode.cloneNode(true);
      layerNodes[i].appendChild(newNode);
    }
  }
}


function BuildTabPost(sLayerID) {
  var i, sPost = '';
  var projectNode = appXML.getElementsByTagName('project')[0];
  var productNode = GetCurrent(sLayerID).productNode;
  
  if (productNode) {  //rwd, wid, hgt, iTab, gridSettings, bestFit, firstTab
    sPost = 'rwd=' + productNode.getAttribute('rwd') + '&';
    sPost = sPost + 'wid=' + productNode.getAttribute('wid') + '&';
    sPost = sPost + 'hgt=' + productNode.getAttribute('hgt') + '&';
    sPost = sPost + 'iTab=' + productNode.getAttribute('iTab') + '&';
    sPost = sPost + 'gridSettings=' + productNode.getAttribute('gridSettings') + '&';
    sPost = sPost + 'bestFit=' + productNode.getAttribute('bestFit') + '&';
    if (productNode.getAttribute('firstRun')) 
      sPost = sPost + 'firstRun=' + productNode.getAttribute('firstRun') + '&';
    else
      sPost = sPost + 'firstRun=1&';
    
    sPost = sPost + 'ppf=' + projectNode.getAttribute('ppf');
  }

  return sPost;
}

/* ----- STEPS ------ */
function SelectStep(step) {
  if (step == '1') {
    document.getElementById('step').value = '1';
    document.getElementById('step1').className = 'step1Selected';
    if (currentProjectFolder.indexOf('{') > -1) document.getElementById('step2').className = 'step2'; else document.getElementById('step2').className = 'step2Disabled';
    if (currentProjectFolder != '') document.getElementById('step3').className = 'step3'; else document.getElementById('step3').className = 'step3Disabled';
    uploadClicked = false;
    
    //hide items
    document.getElementById('display_object0').style.display = 'none';
    document.getElementById('display_object1').style.display = 'none';
    document.getElementById('display_object2').style.display = 'none';
    document.getElementById('display_object3').style.display = 'none';
    document.getElementById('display_project').style.display = 'none';
    document.getElementById('display_summary').style.display = 'none';
    document.getElementById('canvas').style.display = 'none';
    document.getElementById('zoom_container').style.display = 'none';
    
    document.getElementById('display_projects').innerHTML = '';
    document.getElementById('display_projects').style.display = 'inline';
    
    //view tabs
    document.getElementById('display_tabs').innerHTML = getDoc('grid/1_viewtabs.asp?tabs=Start&tabIDs=-1');
    document.getElementById('display_tabs').style.height = '110px';
    
    //build blank tabs
    document.getElementById('grid_tabs').innerHTML = getDoc('grid/1_tabs.asp?function=SelectProject');
    document.getElementById('tab_title').innerHTML = '<center><img src="images/interface/gettingstarted-header.png" style="position:relative; left:-25px; top:-8px;"></center>';
    document.getElementById('tab_desc').innerHTML = '';
    //document.getElementById('tab_productName').innerHTML = 'Getting Started';
    //document.getElementById('tab_desc').innerHTML = 'To begin exploring door options, upload a photo of your own home, <br>or make a selection from our Photo Gallery.';
    
    //if (paper) paper = null;
    if (paper) {
      selectDoor(-1);
      clearCanvas();
    }
    ResizeConfig();
  }
  else if (step == '2') {
    document.getElementById('step').value = '2';
    document.getElementById('step1').className = 'step1';
    document.getElementById('step2').className = 'step2Selected';
    document.getElementById('step3').className = 'step3';
    document.getElementById('display_tabs').style.height = '36px';
    
  }
  else if (step == '3') {
    document.getElementById('step').value = '3';
    document.getElementById('step1').className = 'step1';
    if (currentProjectFolder.indexOf('{') > -1) document.getElementById('step2').className = 'step2'; else document.getElementById('step2').className = 'step2Disabled';
    document.getElementById('step3').className = 'step3Selected';
    
    document.getElementById('display_tabs').style.height = '36px';
    
  }
}


function MoveProjectToStep3() {
  var appNode = appXML.getElementsByTagName('project')[0];
  var theGUID = appNode.getAttribute('projectID');
  
  //check to make sure there's at least ONE door on the project
  if (allDoors.length == 0) {
    alert('You need to add at least one door before proceeding...');
    return;
  }
  
  //save project XML into project
  var sLayerXML = getLayerXml();
  var postParams = 'id=' + theGUID + '&layerXML=' + escape(sLayerXML);
  var r = getDoc('grid/6_prepare_update_project.asp', postParams);  //this saves the new layers into project.xml
  
  //go to the project!
  allDoors = new Array();
  clearCanvas();
  maskingMode = 1;
  SelectProject('projects/users/' + theGUID, '3');
}


function SelectPhotoGallery() {
  //if (uploadClicked == true) return;
  document.getElementById('btn_selectPhoto').className = 'btn_selectPhoto';
  document.getElementById('btn_browseProjects').className = 'btn_browseProjectsSelected';
  document.getElementById('display_projects').innerHTML = getDoc('grid/4_display_projects.asp'); 
}
function SelectPhoto() {
  //if (uploadClicked == true) return;
  
  //iPad check...
  if (is_iPad) {
    alert('The ability to upload your photo is on the way for 2012 -- stay tuned!');
    return;
  }
  
  document.getElementById('btn_selectPhoto').className = 'btn_selectPhotoSelected';
  document.getElementById('btn_browseProjects').className = 'btn_browseProjects';
  document.getElementById('display_projects').innerHTML = getDoc('grid/4_display_upload_photo.asp');
}

function UploadThePhoto(theFile) {
  //test if the extension is JPG...
  var extArray = new Array(".jpg", ".jpeg");
  var allowSubmit = false;
  if (!theFile) return;
  while (theFile.indexOf("\\") != -1)
	theFile = theFile.slice(theFile.indexOf("\\") + 1);
  var ext = theFile.slice(theFile.indexOf(".")).toLowerCase();
  for (var i = 0; i < extArray.length; i++) {
    if (extArray[i] == ext) { allowSubmit = true; break; }
  }
  if (allowSubmit)
    SendPhotoData();
  else
    alert('Please only upload JPG files!\n\nPlease select a JPG file to upload...');
}

var uploadClicked = false;
function SendPhotoData() {
  if (uploadClicked == false) {
    if (document.getElementById('ImageFile').value == '') {
	  alert('Please select a JPG file for uploading...');
	}
	else {
	  uploadClicked = true;
      document.getElementById('upload_part1').style.display = 'none';
      document.getElementById('upload_part2').style.display = 'inline';
      document.getElementById('frmUpload').target = 'upload_target';
	  document.getElementById('frmUpload').action = 'grid/uploadPhoto.asp';
	  document.getElementById('frmUpload').submit();
	}
  }
}

function PhotoUploadComplete(iFrame) {
  if (!iFrame.contentWindow.document.getElementById('guid')) return;
  //go to the prepare tab
  var theGUID = iFrame.contentWindow.document.getElementById('guid').value;  //the project GUID
  
  //parse the responseText (ie:  <settings><file>images/rendered/234863456.png</file> <wid>300</wid> <hgt>550</hgt> <ppf>21.4567</ppf></settings>)
  var sSettingsXML = iFrame.contentWindow.document.getElementById('settings').value;
  //set the wid & hgt for the house image...
  document.getElementById('display_project').setAttribute('w', parseSettings(sSettingsXML).wid);
  document.getElementById('display_project').setAttribute('h', parseSettings(sSettingsXML).hgt);
  document.getElementById('display_project').setAttribute('ppf', parseSettings(sSettingsXML).ppf);
  
  //stats
  _gaq.push(['_trackEvent', 'Start - Upload Photo', theGUID]);
  
  SelectProject('projects/users/' + theGUID, '2', 1);
}


/* ----- TABS ----- */
function MoveTab(sMove) {
  var i, j = -1, iTabCurrent = -1, jTab, iGotoTab;
  var arrTab = new Array();
  
  //get the current iTab
  var productNode = GetCurrent().productNode;  
  var iTab = productNode.getAttribute('iTab');
  
  //create tab array in correct order
  var aItems = document.getElementsByTagName('table');
  for(i=0; i<aItems.length; i++) {
    jTab = aItems[i].getAttribute('iTab');
    if (jTab) {
      j = j + 1;
      arrTab[j] = i;
      if (iTab == jTab) iTabCurrent = j;
    }
  }
  
  //now, find the correct index for the tab
  if (sMove == '+1') iGotoTab = iTabCurrent + 1;
  if (sMove == '-1') iGotoTab = iTabCurrent - 1;
  
  if (iGotoTab == arrTab.length) {
    //go to the Review tab
    var tbls = document.getElementsByTagName('table');
    for (i=0; i<tbls.length; i++) {
      if (tbls[i].getAttribute('viewTabID') == '-333') {
        SelectViewTab('Review', tbls[i]);
        document.getElementById('btn_next').style.visibility = 'hidden';
        break;
      }
    }
    return;
  }
  
  //go to a data tab
  i = arrTab[iGotoTab];
  if ((iGotoTab != iTabCurrent)&&(aItems[i])) {
    if (aItems[i].getAttribute('iTab') == '-2')   //collections tab
      SelectCollectionsTab(aItems[i]);
    else if (aItems[i].getAttribute('iTab') == '-51')   //all colors tab
      SelectAllColorsTab(aItems[i]);
    else 											//data tab
      SelectTab(aItems[i].getAttribute('iTab'), aItems[i], aItems[i].getAttribute('tabName'), '1');
  }
}


function NextBtnVisible() {
  var i, j = -1, iTabCurrent = -1, jTab;
  var arrTab = new Array();
  
  //get the current iTab
  var productNode = GetCurrent().productNode;  
  var iTab = productNode.getAttribute('iTab');
  
  //create tab array in correct order
  var aItems = document.getElementsByTagName('table');
  for(i=0; i<aItems.length; i++) {
    jTab = aItems[i].getAttribute('iTab');
    if (jTab) {
      j = j + 1;
      arrTab[j] = i;
      if (iTab == jTab) iTabCurrent = j;
    }
  }
  
  //check if we're on the last tab as well as the review tab, if so, hide the next button
  if ((iTabCurrent == arrTab.length)&&(document.getElementById('viewTabID').value == '-333')) {
    document.getElementById('btn_next').style.visibility = 'hidden';
  } else {
    document.getElementById('btn_next').style.visibility = 'visible';
  }
}


function SelectTab(iTab, elem, tabName, noDraw) {
  var i, jTab;
  
  ShowHideColorPicker(null, null, 1);
  
  // switch tab highlight
  if (elem) {
    document.getElementById('tabselected').id = '';
    elem.id = 'tabselected';
  }
  
  document.getElementById('btn_back').style.display = 'inline';
  NextBtnVisible();
  
  if (tabName == '') {  //try to figure out the tabName from the iTab
    var aItems = document.getElementsByTagName('table');
    for(i=0; i<aItems.length; i++) {
      jTab = aItems[i].getAttribute('iTab');
      if (jTab)
        if (jTab == iTab) tabName = aItems[i].getAttribute('tabName');
    }    
  }
  
  //show tab title
  //if (document.getElementById('tab_title')) document.getElementById('tab_title').innerHTML = tabName + ':&nbsp;';
  document.getElementById('tab_title').innerHTML = '<img src="images/interface/tab-' + tabName + '.png">';
  document.getElementById('tab_desc').innerHTML = '';
  
  //get the current layer's productNode
  var productNode = GetCurrent().productNode;
  
  //clear lists
  document.getElementById('grid_list').innerHTML = '';
  document.getElementById('grid_options').innerHTML = '';
  
  // show the selected tab's options
  productNode.setAttribute('iTab', iTab);
  document.getElementById('grid_list').innerHTML = getDoc('grid/2_grids.asp?noDraw=1&' + BuildTabPost());
  //alert(document.getElementById('grid_list').innerHTML);
  
  // show the selected grid's options
  var sGridGUID = document.getElementById('gridGUID').value;
  //alert(sGridGUID);
  if (sGridGUID != '') {
    var sNoDraw = '0';
    if (noDraw) sNoDraw = noDraw;
    SelectGrid(sGridGUID, null, sNoDraw, '', '1');
  }
  else {
    document.getElementById('grid_options').style.height = '40px'
  }
  
  GridListResize();
}


function SelectAllColorsTab(elem) {
  // switch tab highlight
  if (elem) {
    document.getElementById('tabselected').id = '';
    elem.id = 'tabselected';
  }
  
  document.getElementById('btn_back').style.display = 'inline';
  NextBtnVisible();
  
  //init
  document.getElementById('grid_list').innerHTML = '';
  document.getElementById('grid_options').innerHTML = '';
  document.getElementById('grid_options').style.height = '0px';
  
  //show color lists for all tabs
  document.getElementById('grid_list').innerHTML = getDoc('grid/2_all_colors.asp?noDraw=1&' + BuildTabPost());

  //save the new settings
  var productNode = GetCurrent().productNode;
  productNode.setAttribute('gridSettings', document.getElementById('update_gridSettings').value);
  productNode.setAttribute('bestFit', document.getElementById('update_bestFit').value);
  productNode.setAttribute('ppf', document.getElementById('update_ppf').value);
  productNode.setAttribute('wid', document.getElementById('update_wid').value);
  productNode.setAttribute('hgt', document.getElementById('update_hgt').value);
  
  productNode.setAttribute('iTab', '-51');  //set the tab as the All Colors Tab

  ResizeConfig();
  
}


function SelectCollectionsTab(elem) {
  // switch tab highlight
  if (elem) {
    document.getElementById('tabselected').id = '';
    elem.id = 'tabselected';
  }
  
  document.getElementById('btn_back').style.display = 'none';
  document.getElementById('btn_next').style.visibility = 'visible';
  
  //show tab title
  //if (document.getElementById('tab_title')) document.getElementById('tab_title').innerHTML = 'Collections:&nbsp;';
  document.getElementById('tab_title').innerHTML = '<img src="images/interface/tab-collections.png">';
  document.getElementById('tab_desc').innerHTML = '';
  
  //clear lists
  document.getElementById('grid_list').innerHTML = '';
  document.getElementById('grid_options').innerHTML = '';
  
  // show the selected tab's options
  var layerNode = GetCurrent().layerNode;
  var productNode = GetCurrent().productNode;
  var sRWD = productNode.getAttribute('rwd');
  var sProductFilter = layerNode.getAttribute('productFilter')
  productNode.setAttribute('iTab', '-2');
  document.getElementById('grid_list').innerHTML = getDoc('grid/2_collections.asp?noDraw=1&rwd=' + sRWD + '&productFilter=' + sProductFilter);
  
  document.getElementById('grid_options').style.height = '40px';
  if (elem) ResizeConfig();
  GridListResize();
}

function SelectViewTab(tabName, elem) {
  // switch tab highlight
  if (elem) {
    document.getElementById('viewtabselected').id = '';
    elem.id = 'viewtabselected';
    document.getElementById('viewTabID').value = elem.getAttribute('viewTabID'); 
    //set the currentLayerID, if a door is selected
    if ((document.getElementById('viewTabID').value != '-999')&&(document.getElementById('viewTabID').value != '-333')) {
      ShowViewTabProductOptions(elem.getAttribute('viewTabID'));
      selectDoor(-1);
    }
    else {
      //show summary
      if (document.getElementById('viewTabID').value == '-333') {
        ShowSummary();
        selectDoor(-1);
      }
    }
    
    ResizeGridDisplay();
  }
}

function ShowViewTabProductOptions(viewTabID) {
  if (document.getElementById('currentLayerID').value != viewTabID) {
    if ((document.getElementById('viewTabID').value != '-999')&&(document.getElementById('viewTabID').value != '-333')) {
      //see if a viewtab is visible
      document.getElementById('display_project').style.display = 'none';
      document.getElementById('canvas').style.display = 'none';
      document.getElementById('display_object0').style.display = 'none';
      document.getElementById('display_object1').style.display = 'none';
      document.getElementById('display_object2').style.display = 'none';
      document.getElementById('display_object3').style.display = 'none';
      for (var i=0; i<drawGridLayerID.length; i++) {
        if (drawGridLayerID[i] == viewTabID) {
          document.getElementById('display_object' + i).style.display = 'inline';
        }
      }
    }

    //get new product tab list and settings
    document.getElementById('currentLayerID').value = viewTabID;
    document.getElementById('grid_tabs').innerHTML = getDoc('grid/1_tabs.asp?function=BuildTabs&' + BuildTabPost());
    //get original wid/hgt of object
    var productNode = GetCurrent().productNode;
    productNode.setAttribute('wid', document.getElementById('wid').value);
    productNode.setAttribute('hgt', document.getElementById('hgt').value);
    //show config options
    if (productNode.getAttribute('iTab') == '-2')
      SelectCollectionsTab(null);
    else if (productNode.getAttribute('iTab') == '-51')
      SelectAllColorsTab(null);
    else
      SelectTab(productNode.getAttribute('iTab'), null, '', '1');
  }
}


function ShowSummary(bPrint, sendTo, sentFrom, notes, ccEmail) {
  var i, j = 0, sLayerType, sLayerID, productNode, sLinks = '', sSummary = '', sImg = '', sImgPost = '', p = 1;
  
  if (!bPrint) {
    sLinks = getDoc('grid/4_display_summary_links.asp');
    sSummary = sLinks;
  }
  
  //get all door layers and get summary for it
  var nodes = appXML.getElementsByTagName('layer');
  for (i=0; i<nodes.length; i++) {
    sLayerType = nodes[i].getAttribute('layerType');
    sLayerID = nodes[i].getAttribute('layerID');
    if (sLayerType == 'RWDoor') {
      sImg = document.getElementById('display_object' + j).src;  //get just the relative path (instead of absolute path)
      j++;
      sImg = 'images/' + sImg.split('images/')[1];
      sImgPost = sImgPost + '&img' + p + '=' + sImg;  p++;
      sSummary = sSummary + getDoc('grid/4_display_summary.asp?title=' + nodes[i].getAttribute('layerName') + '&img=' + escape(sImg) + '&' + BuildTabPost(sLayerID));
    }
  }
  
  //display house below door list
  sSummary = sSummary + '<table border="0" cellspacing="0" cellpadding="0" width="96%" style="padding-left:20px;">';
  sSummary = sSummary + '<tr><td align="center" style="border-bottom:1px solid #666; padding-bottom:3px;"><b>House</b></td></tr>';
  
  sImg = document.getElementById('display_project').src;  //get just the relative path (instead of absolute path)
  sImg = 'images/' + sImg.split('images/')[1];
  sImgPost = sImgPost + '&img' + p + '=' + sImg;  p++;
  sSummary = sSummary + '<tr><td align="center" style="padding-top:8px;"><img id="house_image" src="' + sImg + '" width="100%"></td></tr></table><br><br>';
  
  if (!bPrint) {
    //this is for the summary tab
    sSummary = sSummary;  // + sLinks;
    document.getElementById('display_summary').innerHTML = sSummary;
    ResizeGridDisplay();
  }
  else {
    if (bPrint == 'PrintPage') {
      //this is for the print page
      var printPage = getDoc('print.asp');
      printPage = printPage.replace('<div id="printContent"></div>', sSummary);
      
      var printWin = window.open('');
      printWin.document.write(printPage);
      
      //printWin.onload = function() {
      //  printWin.document.getElementById('printContent').innerHTML = sSummary;
      //}
      //printWin.print();
    }
    
    if ((bPrint == 'EmailPage')&&(sendTo)&&(sentFrom)) {
      //email the page
      sSummary = '<hr style="background-color:#000; border:0; height:1px;"><br></div>' + sSummary;
      if (notes) sSummary = notes + sSummary;
      sSummary = '<div style="padding-left:4%; padding-right:4%;">Hi!<br><br>You have received a newly designed Overhead Door DoorView project from ' + sentFrom + '. &nbsp;This was created using the <a href="http://ohd.renoworks.com">Overhead Door DoorView</a>!<br><br>' + sSummary;
      
      var printPage = getDoc('print.asp');
      printPage = printPage.replace('Print...', '');
      printPage = printPage.replace('Save Image...', '');
      printPage = printPage.replace('<div id="printContent"></div>', sSummary);  //this contains the HTML we want to e-mail out (save it as a file, and then e-mail?)
      //post the page to send_email.asp
      if (ccEmail) ccEmail = '1'; else ccEmail = '0';
      
      var postParams = 'page=' + escape(printPage) + '&to=' + escape(sendTo) + '&from=' + escape(sentFrom) + '&cc=' + ccEmail;    //Lance <lancestengler@gmail.com>
  	  var r = getDoc('grid/send_email.asp', postParams, true);
      
      _gaq.push(['_trackEvent', 'Review - Email', r, 'From: ' + sentFrom + '  To:' + sendTo]);
    }
    
    if (bPrint == 'Share') {
      //share the page on Facebook
      var printPage = getDoc('grid/share.asp?img=' + sImg);
      printPage = printPage.replace('<div id="printContent"></div>', sSummary);  //this contains the HTML we want to share as a file (save it as a file, and then e-mail?)
      
      var appNode = appXML.getElementsByTagName('project')[0];
      var theGUID = appNode.getAttribute('projectID');

      var postParams = 'page=' + escape(printPage) + '&id=' + theGUID + sImgPost;
  	  var r = getDoc('grid/share_on_facebook.asp', postParams, false);
      //window.open(r);
      window.open('http://www.facebook.com/sharer.php?u=' + escape(r) + '&t=Overhead Door DoorView', 'DoorViewFacebook', 'toolbar=0,status=0,width=626,height=436');
      
      _gaq.push(['_trackEvent', 'Review - Facebook', r]);
    }
  }
}

function sendEmailToFriend() {
  var sFromName = document.getElementById('FromName').value;
  var sFromEmail = document.getElementById('FromEmail').value;
  var sToName = document.getElementById('ToName').value;
  var sToEmail = document.getElementById('ToEmail').value;
  var sNote = trim(document.getElementById('EmailNotes').value);
  var cc = document.getElementById('EmailCopy').checked;
  
  if (trim(sFromName) == '') {alert('Please enter your name...'); document.getElementById('FromName').focus(); return; }
  if (trim(sToName) == '') {alert('Please enter your friend\'s name...'); document.getElementById('ToName').focus(); return; }
  
  if (!validateEmail(sFromEmail)) {alert('Please enter a valid e-mail address for yourself...'); document.getElementById('FromEmail').focus(); return; }
  if (!validateEmail(sToEmail)) {alert('Please enter a valid e-mail address for your friend...'); document.getElementById('ToEmail').focus(); return; }
  
  sToName = sToName + '<' + sToEmail + '>';
  sFromName = sFromName + '<' + sFromEmail + '>';
  
  document.getElementById('btn_email_summary_send').style.display = 'none';
  document.getElementById('btn_email_summary_cancel').style.display = 'none';
  
  ShowSummary('EmailPage', sToName, sFromName, sNote, cc);  //Lance <lancestengler@gmail.com>
  
  alert('Your e-mail has been sent!');
  document.getElementById('email_summary_form').style.display = 'none';
  document.getElementById('btn_email_summary_send').style.display = 'inline';
  document.getElementById('btn_email_summary_cancel').style.display = 'inline';
}

function trim(stringToTrim) {
  return stringToTrim.replace(/^\s+|\s+$/g,"");
}

function validateEmail(sEmail) {
  validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
  if (sEmail.search(validRegExp) == -1)  return false; else return true; 
}


/* ----- PROJECTS ----- */
var currentProjectFolder = '';
function SelectProject(projectFolder, theStep, clearDoors) {
  var i, j, sLayerType, sLayerName, sLayerID, sRWD, sProductFilter = '';
  var sTabs = '', sTabIDs = '', projectXML, node;
  
  //get the project folder
  if (projectFolder) currentProjectFolder = projectFolder;
  
  document.getElementById('currentLayerID').value = '';
  
  //add to appXML
  var appNode = appXML.getElementsByTagName('project')[0];
  appNode.setAttribute('rootFolder', currentProjectFolder)
  
  //open project.xml
  projectXML = getXML(currentProjectFolder + '/project.xml?' + Math.random()*100000);
  
  //set project info
  node = projectXML.getElementsByTagName('project')[0];
  appNode.setAttribute('projectName', node.getAttribute('projectName'));
  appNode.setAttribute('projectID', node.getAttribute('projectID'));
  appNode.setAttribute('masterImage', node.getAttribute('masterImage'));
  appNode.setAttribute('sampleImage', node.getAttribute('sampleImage'));
  appNode.setAttribute('wid', node.getAttribute('wid'));
  appNode.setAttribute('hgt', node.getAttribute('hgt'));
  appNode.setAttribute('ppf', node.getAttribute('ppf'));
  
  //remove old layers in project
  appNode = appXML.getElementsByTagName('layers')[0];
  appNode.parentNode.removeChild(appNode);
  var newNode = appXML.createElement("layers");  //add blank node back in
  appNode = appXML.getElementsByTagName('project')[0];
  appNode.appendChild(newNode);
  
  //add layers from project.xml
  j = 0;
  appNode = appXML.getElementsByTagName('layers')[0];
  var nodes = projectXML.getElementsByTagName('layer');
  for (i=0; i<nodes.length; i++) {
    sLayerName = nodes[i].getAttribute('layerName');
    sLayerType = nodes[i].getAttribute('layerType');
    sLayerID = nodes[i].getAttribute('layerID');
    sProductFilter = nodes[i].getAttribute('productFilter');
    if ((sLayerName.toUpperCase() == 'FOREGROUND')||(sLayerType == 'RWDoor')) {
      if (sLayerType == 'RWDoor') {
        //test if GRID variables are in there, if not, add them
        newNode = nodes[i].getElementsByTagName('product')[0];
        if (!newNode) {
          newNode = appXML.createElement('product');
          nodes[i].appendChild(newNode);
          newNode = nodes[i].getElementsByTagName('product')[0];
        }
        if (!newNode.getAttribute('rwd')) newNode.setAttribute('rwd', '');
        if (!newNode.getAttribute('wid')) newNode.setAttribute('wid', '');
        if (!newNode.getAttribute('hgt')) newNode.setAttribute('hgt', '');
        if (!newNode.getAttribute('iTab')) newNode.setAttribute('iTab', '-2');
        if (!newNode.getAttribute('gridSettings')) newNode.setAttribute('gridSettings', '');
        if (!newNode.getAttribute('bestFit')) newNode.setAttribute('bestFit', '');
        if (!newNode.getAttribute('firstTab')) newNode.setAttribute('firstTab', '');
        if (!newNode.getAttribute('renderedImage')) newNode.setAttribute('renderedImage', '');
        
        //check if there's an rwd attached, and if not, attach one (that's filtered using productFilter for the layer)
        AttachFirstRWD(newNode, sProductFilter, sLayerID);
        
        //set the currentLayerID to the first door in the project
        if (document.getElementById('currentLayerID').value == '') {
          sRWD = newNode.getAttribute('rwd');
          document.getElementById('currentLayerID').value = sLayerID;
        }
        
        //add view tab info
        //j = j + 1;
        //sTabs = sTabs + 'Door ' + j + '|';
        sTabs = sTabs + sLayerName + '|';
        sTabIDs = sTabIDs + sLayerID + '|';
      }
      //add the node
      newNode = nodes[i].cloneNode(true)
      appNode.appendChild(newNode);
    }
  }
  if (j == 1) sTabs = sTabs.replace('Door 1|', 'Door|');
  sTabs = sTabs.substr(0, sTabs.length - 1);
  sTabIDs = sTabIDs.substr(0, sTabIDs.length - 1);
  
  //change to either step 2 (prepare) or step 3 (design)
  if (theStep == '2') {
    //PREPARE ---------------
    //select the house tab first if we're coming from step 3
    if (document.getElementById('step').value == '3') {
      var tbls = document.getElementsByTagName('table');
      for (i=0; i<tbls.length; i++) {
        if (tbls[i].getAttribute('viewTabID') == '-999') {
          SelectViewTab('House', tbls[i]);
          break;
        }
      }
    } 
    
    //diable any ques that are going on...
    for (i=0; i<drawGridQueUrl.length; i++) {
      CancelQue(drawGridQueUrl[i], i);
    }
    CancelQue(drawHouseQueUrl, -1);
    
    //goto step 2
    SelectStep('3');
    
    //setup tools
    document.getElementById('grid_list').innerHTML = getDoc('grid/6_prepare_tools.asp');
    document.getElementById('grid_options').innerHTML = '';
    curDoorProductFilter = ''; //'8x7';
    curDoorFriendlyName = ''; //'Single 8\'x 7\'';
    
    //diable any ques that are going on...
    for (i=0; i<drawGridQueUrl.length; i++) {
      CancelQue(drawGridQueUrl[i], i);
    }
    CancelQue(drawHouseQueUrl, -1);
    
    //setup image
    document.getElementById('viewTabID').value = '-999';
    document.getElementById('display_projects').style.display = 'none';
    document.getElementById('display_project').setAttribute('w', node.getAttribute('wid'));
    document.getElementById('display_project').setAttribute('h', node.getAttribute('hgt'));
    document.getElementById('display_project').setAttribute('ppf', node.getAttribute('ppf'));
    document.getElementById('display_project').src = currentProjectFolder + '/' + node.getAttribute('masterImage');
    document.getElementById('display_project').style.display = 'inline';
    //view tab (house)
    document.getElementById('display_tabs').innerHTML = getDoc('grid/1_viewtabs.asp?tabs=House&tabIDs=-999');
    //tabs
    document.getElementById('grid_tabs').innerHTML = getDoc('grid/1_tabs.asp?function=MaskHouse');
    document.getElementById('grid_options').style.height = '40px';
    
    maskingInit(0);
    ResizeConfig();
    
    //set door size from layer nodes
    for (i=0; i<nodes.length; i++) {
      sLayerID = nodes[i].getAttribute('layerID');
      sProductFilter = nodes[i].getAttribute('productFilter');
      for (j=0; j<allDoors.length; j++) {
        if (allDoors[j].layerID == sLayerID) allDoors[j].size = sProductFilter;
      }
    }
    
    SelectStep('2');
    
    if (clearDoors) clearAll();
    
  }
  else {
    //DESIGN ---------------
    SelectStep('3');
    
    //diable any ques that are going on...
    for (i=0; i<drawGridQueUrl.length; i++) {
      CancelQue(drawGridQueUrl[i], i);
    }
    CancelQue(drawHouseQueUrl, -1);
    
    //setup image
    document.getElementById('viewTabID').value = '-999';
    document.getElementById('display_projects').style.display = 'none';
    document.getElementById('display_project').setAttribute('w', node.getAttribute('wid'));
    document.getElementById('display_project').setAttribute('h', node.getAttribute('hgt'));
    document.getElementById('display_project').setAttribute('ppf', node.getAttribute('ppf'));
    document.getElementById('display_project').src = currentProjectFolder + '/' + node.getAttribute('masterImage');
    document.getElementById('display_project').style.display = 'inline';
    //view tabs
    document.getElementById('display_tabs').innerHTML = getDoc('grid/1_viewtabs.asp?tabs=House|' + sTabs + '|Review&tabIDs=-999|' + sTabIDs + '|-333');
    //tabs
    document.getElementById('grid_tabs').innerHTML = getDoc('grid/1_tabs.asp?function=BuildTabs&' + BuildTabPost());
    
    //go to Collections tab
    SelectCollectionsTab(null);
    
    //initialize masks for selection...
    maskingInit(1);
    ResizeConfig();
    createMasksFromProject();
    
    var imgHouse = getHouseInfo();
    //alert(imgHouse.width + ' x ' + imgHouse.height);
    //alert(document.getElementById('canvas').style.width + ' x ' + document.getElementById('canvas').style.height);
    resizeCanvas(imgHouse.width, imgHouse.height, parseInt(document.getElementById('canvas').style.width), parseInt(document.getElementById('canvas').style.height));
	
    
    //init draw variables
    drawGridHttp = new Array();
    drawGridLayerID = new Array();
	drawGridQueUrl = new Array();
    
    //setup layer drawGridHttp[]
    j = 0;
    var productNode;
    var layerNode = appXML.getElementsByTagName('layer')
    for (i=0; i<layerNode.length; i++) {
      productNode = GetCurrent(layerNode[i].getAttribute('layerID')).productNode;
      if (productNode) {
	    if (window.XMLHttpRequest) drawGridHttp[j] = new XMLHttpRequest(); else drawGridHttp[j] = new ActiveXObject('Microsoft.XMLHTTP');
        drawGridLayerID[j] = layerNode[i].getAttribute('layerID');
        drawGridQueUrl[j] = '';
        
        //render the product, but don't draw the house (yet)
        DrawGrid('1', drawGridLayerID[j], '1');
        j = j + 1;
      }
    }
      
    //draw the house after these initial layers are drawn
    DrawHouseInit();
    
  }
}

function AttachFirstRWD(productNode, sProductFilter, sLayerID) {
  var i;
  
  if (productNode) {
    //check if the rwd is valid, if not, add a valid one!
    if (productNode.getAttribute('rwd') == '') {
      //attach first rwd file to layer (by filter)
      var productListXML = getXML('common/_rwEngine.asp?function=ProductList&productFilter=' + sProductFilter);
  	  var nodes = productListXML.getElementsByTagName('product');
      if (nodes.length > 0) {
        //attach rwd
        productNode.setAttribute('rwd', nodes[0].getAttribute('rwd'));
        productNode.setAttribute('wid', nodes[0].getAttribute('wid'));
        productNode.setAttribute('hgt', nodes[0].getAttribute('hgt'));
      }
      else {
        //there is no rwd according to the filter, attach just the very first rwd...
        var productListXML = getXML('../common/_rwEngine.asp?function=ProductList');
        if (productListXML) {
          productNode.setAttribute('rwd', productListXML.getElementsByTagName('product')[0].getAttribute('rwd'));
          productNode.setAttribute('wid', productListXML.getElementsByTagName('product')[0].getAttribute('wid'));
          productNode.setAttribute('hgt', productListXML.getElementsByTagName('product')[0].getAttribute('hgt'));
        }
      }
    }
  }
}

/* ----- GRID LIST ----- */
function SelectGrid(GUID, elem, noDraw, optGroupGUID, noUpdateNextTabs) {
  // switch grid highlight
  if (elem) {
    var sOptGroupGUID = '';
    if (optGroupGUID) sOptGroupGUID = optGroupGUID;
    
    //find all elements with this GUID and set the ID to 'gridselected' or 'gridselectedoption'
    var i, theGuid;
    var aItems = document.getElementsByTagName('a');
    for(i=0; i<aItems.length; i++) {
      theGuid = aItems[i].getAttribute('guid');
      if (theGuid) {
        if ((theGuid == GUID)||(theGuid == sOptGroupGUID)) aItems[i].id = 'gridselected'; else aItems[i].id = '';
        //check for grouped-options
        if (theGuid.indexOf('opt') == 0) {
          if (theGuid == 'opt' + GUID) aItems[i].id = 'gridselectedoption'; else aItems[i].id = '';
        }
      }
    }
  }
  
  var bNoDraw = '0';
  if (noDraw) bNoDraw = noDraw;
  
  var bNoUpdateNextTabs = '0';
  if (noUpdateNextTabs) bNoUpdateNextTabs = noUpdateNextTabs;
  
  // show the selected grid's options
  document.getElementById('grid_options').innerHTML = getDoc('grid/3_options.asp?' + BuildTabPost() + '&noUpdateNextTabs=' + bNoUpdateNextTabs + '&gridGUID=' + GUID);  
  
  //save the new settings
  var productNode = GetCurrent().productNode;
  //alert(GUID + '\n  \n' + productNode.getAttribute('gridSettings') + '\n  \n' + document.getElementById('update_gridSettings').value);
  productNode.setAttribute('gridSettings', document.getElementById('update_gridSettings').value);
  productNode.setAttribute('bestFit', document.getElementById('update_bestFit').value);
  productNode.setAttribute('ppf', document.getElementById('update_ppf').value);
  productNode.setAttribute('wid', document.getElementById('update_wid').value);
  productNode.setAttribute('hgt', document.getElementById('update_hgt').value);
  //if (bNoDraw == '0') productNode.setAttribute('renderedImage', '');
  
  //update grid list height
  var h = parseInt(document.getElementById('update_optionsDivHgt').value);
  h = h + 40;
  document.getElementById('grid_options').style.height = h.toString() + 'px';
  ResizeConfig();
  
  if (bNoDraw != '1') DrawGrid('1');
}

function SelectCollection(elem) {
  // switch highlight
  if (elem) {
    document.getElementById('gridselected').id = '';
    elem.id = 'gridselected';
    
    //update tabs
    var productNode = GetCurrent().productNode;
    productNode.setAttribute('rwd', elem.getAttribute('rwd'));
    productNode.setAttribute('gridSettings', '');
    productNode.setAttribute('bestFit', '');
    productNode.setAttribute('iTab', '-2');
    document.getElementById('grid_tabs').innerHTML = getDoc('grid/1_tabs.asp?function=BuildTabs&' + BuildTabPost());
    //get original wid/hgt of object
    productNode.setAttribute('wid', document.getElementById('wid').value);
    productNode.setAttribute('hgt', document.getElementById('hgt').value);
    productNode.setAttribute('firstRun', document.getElementById('firstRun').value);
    
    document.getElementById('btn_back').style.display = 'none';
    document.getElementById('btn_next').style.visibility = 'visible';
    
    //save the default grid settings
    productNode.setAttribute('gridSettings', document.getElementById('gridSettings').value);
    productNode.setAttribute('bestFit', document.getElementById('bestFit').value);
    productNode.setAttribute('ppf', document.getElementById('ppf').value);
    productNode.setAttribute('wid', document.getElementById('wid').value);
    productNode.setAttribute('hgt', document.getElementById('hgt').value);

    //show tab title
    //if (document.getElementById('tab_title')) document.getElementById('tab_title').innerHTML = 'Collections:&nbsp;';
    document.getElementById('tab_title').innerHTML = '<img src="images/interface/tab-collections.png">';
    document.getElementById('tab_desc').innerHTML = '';
    
    DrawGrid('1');
  }
}

function GridListResize() {
  if (!document.getElementById('grid_list')) return;
  
  if (document.getElementById('gridlist')) {
    document.getElementById('gridlist').style.height = document.getElementById('grid_list').style.height;
  }
  
  //resize the All Colors Tab colors list
  if ((document.getElementById('all_colors_tab'))&&(document.getElementById('colorlistdiv'))) {
    var h = parseInt(document.getElementById('grid_list').style.height) - 60;
    document.getElementById('colorlistdiv').style.height = h.toString() + 'px';
  }
}

/* ----- COLOR/OPTIONS LIST ----- */
function SelectColorTab(iColorTab, elem) {
  // switch color tab highlight
  if (elem) {
    document.getElementById('colortabselected').id = '';
    elem.id = 'colortabselected';
    
    //show the correct color tab list
    var theColorTab, i;
    var aItems = document.getElementsByTagName('ul');
    for(i=0; i<aItems.length; i++) {
      theColorTab = aItems[i].getAttribute('iColorTab');
      if (theColorTab) {
        if (theColorTab == iColorTab) aItems[i].style.display = 'inline'; else aItems[i].style.display = 'none';
      }
    }    

    //reset custom color variables
    var nid = document.getElementsByTagName('span');
    for (var ni=0; ni<nid.length; ni++) {if (nid[ni].id == 'custom_color_message') nid[ni].style.display = 'none';}
    document.getElementById('canvas').style.cursor = '';
    getCustomColor = '';
    ShowHideColorPicker();
    
  }
}

function SelectColor(GUID, iColorTab, elem, sColorName) {
  var gridSettings;
  var i, j, theColorGuid, currentColorGuid;
  var productNode = GetCurrent().productNode;
  
  if (getCustomColor != '') {
    //cancel custom color
    var nid = document.getElementsByTagName('span');
    for (var ni=0; ni<nid.length; ni++) {if (nid[ni].id == 'custom_color_message') nid[ni].style.display = 'none';}
    document.getElementById('canvas').style.cursor = '';
    getCustomColor = '';
    ShowHideColorPicker();
  } 
  else {
    //check if we use the eyedropper for a custom color
    if ((sColorName.toLowerCase().indexOf('custom') > -1)||(sColorName.toLowerCase().indexOf('ready') > -1)) {
      var nid = document.getElementsByTagName('span');
      for (var ni=0; ni<nid.length; ni++) {if (nid[ni].id == 'custom_color_message') nid[ni].style.display = 'inline';}
      document.getElementById('canvas').style.cursor = 'url(images/interface/eye_dropper.cur) 3 3, crosshair';
      getCustomColor = GUID;
      ShowHideColorPicker(elem, elem.getAttribute('colorGuid'));
    }
  }
  if ((sColorName.toLowerCase().indexOf('custom') > -1)||(sColorName.toLowerCase().indexOf('ready') > -1)) return;
  
  //set the color via the api and update gridSettings (which may select the same color name across different layers)
  gridSettings = getDoc('grid/3_set_color.asp?' + BuildTabPost() + '&gridGUID=' + GUID);
  //alert(GUID + '  ' + gridSettings + '     ' + productNode.getAttribute('gridSettings'));
  productNode.setAttribute('gridSettings', gridSettings);
  
  // switch grid highlight
  //find all elements with this GUID and set the ID to 'colorselected'
  var aItems = document.getElementsByTagName('a');
  //erase old selections
  for(i=0; i<aItems.length; i++) {  //check colorGuid
    theColorGuid = aItems[i].getAttribute('colorGuid');
    if (theColorGuid) aItems[i].id = '';
  }
  //now, highlight the currently selected color GUIDs
  for(i=0; i<aItems.length; i++) {  //check against colorGuid list
    theColorGuid = aItems[i].getAttribute('colorGuid');
    if (theColorGuid) {
      if (gridSettings.indexOf(theColorGuid) != -1) aItems[i].id = 'colorselected';
    }
  }
  DrawGrid('1');
}

function SetCustomColor(GUID, customColor) {
  var gridSettings;
  var i, j, theColorGuid, currentColorGuid;
  var productNode = GetCurrent().productNode;
  
  customColor = customColor.replace('#', '');
  
  //reset cursor
  var nid = document.getElementsByTagName('span');
  for (var ni=0; ni<nid.length; ni++) {if (nid[ni].id == 'custom_color_message') nid[ni].style.display = 'none';}
  document.getElementById('canvas').style.cursor = '';
  getCustomColor = '';
  ShowHideColorPicker();
  
  //set the color via the api and update gridSettings (which may select the same color name across different layers)
  gridSettings = getDoc('grid/3_set_color.asp?' + BuildTabPost() + '&gridGUID=' + GUID + '|' + customColor);
  //alert(GUID + '  ' + gridSettings + '     ' + productNode.getAttribute('gridSettings'));
  productNode.setAttribute('gridSettings', gridSettings);
  
  // switch grid highlight
  //find all elements with this GUID and set the ID to 'colorselected'
  var aItems = document.getElementsByTagName('a');
  //erase old selections
  for(i=0; i<aItems.length; i++) {  //check colorGuid
    theColorGuid = aItems[i].getAttribute('colorGuid');
    if (theColorGuid) aItems[i].id = '';
  }
  //now, highlight the currently selected color GUIDs
  for(i=0; i<aItems.length; i++) {  //check against colorGuid list
    theColorGuid = aItems[i].getAttribute('colorGuid');
    if (theColorGuid) {
      if (gridSettings.indexOf(theColorGuid) != -1) aItems[i].id = 'colorselected';
    }
  }
  
  //now, update the custom color background swatch
  var divItems = document.getElementsByTagName('div');
  for(i=0; i<divItems.length; i++) {  //check colorGuid
    theColorGuid = divItems[i].getAttribute('colorGuid');
    if (theColorGuid) {
      if (gridSettings.indexOf(theColorGuid + '|' + customColor) != -1) divItems[i].style.backgroundColor = '#' + customColor;
    }
  }  
  
  DrawGrid('1');
}



function SelectBestFit() {
  var bestFit, selStretch, selFixed, oldGUID, newGUID;
  
  bestFit = document.getElementById('bestFit').value;
  
  // find and replace old bestFitGUID with new bestFitGUID
  oldGUID = document.getElementById('bestFitGUID').value;
  selStretch = document.getElementById('bestFitStretch');
  selFixed = document.getElementById('bestFitFixed');
  newGUID = document.getElementById('gridGUID').value + '|' + selStretch.options[selStretch.selectedIndex].value + '|' + selFixed.options[selFixed.selectedIndex].value;
  
  var productNode = GetCurrent().productNode;
  productNode.setAttribute('bestFit', bestFit.replace(oldGUID, newGUID));
  document.getElementById('bestFitGUID').value = newGUID;
  
  DrawGrid('1');
}

function SelectMirrorArea() {
  var sel = document.getElementById('mirrorArea');
  var i = sel.selectedIndex;
  var sOption0 = sel.options[i].attributes.getNamedItem('option0').value;
  var sOption1 = sel.options[i].attributes.getNamedItem('option1').value;
  var sMirrorState = sel.options[i].attributes.getNamedItem('mirrorState').value;
  
  //change values in mirrorOption select
  sel = document.getElementById('mirrorOption');
  sel.options[0].text = sOption0;
  sel.options[1].text = sOption1;
  sel.selectedIndex = parseInt(sMirrorState);
}

function SelectMirrorOption() {
  var bestFit, selArea, oldGUID, newGUID, i;
  var productNode = GetCurrent().productNode;
  
  bestFit = productNode.getAttribute('bestFit');
  
  // find and replace old mirrorGUID with new mirrorGUID
  oldGUID = document.getElementById('mirrorGUID').value;
  newGUID = '';
  if (document.getElementById('mirrorArea')) {
    //there's multiple drop-downs for the area name
    selArea = document.getElementById('mirrorArea');
    for (i=0; i<selArea.options.length; i++) {
      if (i==selArea.selectedIndex) selArea.options[i].attributes.getNamedItem('mirrorState').value = document.getElementById('mirrorOption').value;
      newGUID = newGUID + document.getElementById('gridGUID').value + '|||' + selArea.options[i].value + '|' + selArea.options[i].attributes.getNamedItem('mirrorState').value + ',';
    }
  }
  else {
    //there's only one area name
    newGUID = document.getElementById('gridGUID').value + '|||' + document.getElementById('mirrorOption').attributes.getNamedItem('areaName').value + '|' + document.getElementById('mirrorOption').value + ',';
  }
  
  newGUID = newGUID.substring(0, newGUID.length - 1);  //remove trailing comma
  productNode.setAttribute('bestFit', bestFit.replace(oldGUID, newGUID));
  document.getElementById('mirrorGUID').value = newGUID;
  
  DrawGrid('1');
}

/* ------ Draw the Grid ----- */

//init
var drawGridHttp = new Array();
var drawGridLayerID = new Array();
var drawGridQueUrl = new Array();

function DrawGrid(bRedraw, sLayerID, bNoDrawHouse) {
  var layerNode = GetCurrent(sLayerID).layerNode;
  var productNode = GetCurrent(sLayerID).productNode;
  sLayerID = layerNode.getAttribute('layerID');
  
  //check if we need to find the drawGridHttp[] drawIndex, or just use the current productNode
  var drawIndex = 0;
  //find the drawIndex
  for (i=0; i<drawGridLayerID.length; i++) {
    if (drawGridLayerID[i] == sLayerID) drawIndex = i;
  }
  
  var renderedImage = '';
  if (productNode) renderedImage = productNode.getAttribute('renderedImage');
  
  if (((bRedraw == '1')||(renderedImage == ''))&&(productNode)&&(drawGridHttp[drawIndex])) {
    //place render request into que
    document.getElementById('display_loading').style.display = 'inline';  // show loading animation
    
    var divWid = parseInt(document.getElementById('grid_display').style.width);
    var divHgt = parseInt(document.getElementById('grid_display').style.height);
    productNode.setAttribute('renderedImage', '');
    
    //init the que
    CancelQue(drawGridQueUrl[drawIndex], drawIndex);
    drawGridHttp[drawIndex].open('GET', 'grid/4_display.asp?' + BuildTabPost(sLayerID) + '&winWid=' + divWid.toString() + '&winHgt=' + divHgt.toString(), false);
    drawGridHttp[drawIndex].onreadystatechange = function() {};
    drawGridHttp[drawIndex].send('');
    //get the response
    var t = drawGridHttp[drawIndex].responseText;
    //watch for the que completion
    drawGridQueUrl[drawIndex] = 'grid/4_watch.asp?ext=jpg&t=' + t;
    DrawGridQue(drawIndex, bNoDrawHouse);
    
  }
  else {
    //show previously rendered image
    document.getElementById('display_object0').style.display = 'none'
    document.getElementById('display_object1').style.display = 'none'
    document.getElementById('display_object2').style.display = 'none'
    document.getElementById('display_object3').style.display = 'none'
    for (var i=0; i<drawGridLayerID.length; i++) {
      if (drawGridLayerID[i] == viewTabID) {
        document.getElementById('display_object' + i).style.display = 'inline';
      }
    }
  }
}

function DrawGridQue(drawIndex, bNoDrawHouse) {
  //see we can process the que request (only process the last request)
  if (drawGridQueUrl[drawIndex] != '') {
    if ((drawGridHttp[drawIndex].readyState == 4)||(drawGridHttp[drawIndex].readyState == 0)) {
	  //send render request
	  if (GetCurrent(drawGridLayerID[drawIndex]).productNode) {  //make sure the layer is still there
	    drawGridHttp[drawIndex].open('GET', drawGridQueUrl[drawIndex], true);
	    drawGridHttp[drawIndex].onreadystatechange = function() {UpdateDrawGrid(drawIndex, bNoDrawHouse)};
	    drawGridHttp[drawIndex].send('');
	  }
	}
  }
}

function UpdateDrawGrid(drawIndex, bNoDrawHouse) {
  if (drawGridHttp[drawIndex].readyState == 4) {  //complete state
    //parse the responseText (ie:  <settings><file>images/rendered/234863456.png</file> <wid>300</wid> <hgt>550</hgt> <ppf>21.4567</ppf></settings>)
    var sSettingsXML = drawGridHttp[drawIndex].responseText;
    
    //update image
    document.getElementById('display_object' + drawIndex).setAttribute('w', parseSettings(sSettingsXML).wid);
    document.getElementById('display_object' + drawIndex).setAttribute('h', parseSettings(sSettingsXML).hgt);
    document.getElementById('display_object' + drawIndex).setAttribute('ppf', parseSettings(sSettingsXML).ppf);
    document.getElementById('display_object' + drawIndex).src = parseSettings(sSettingsXML).file2;  //drawGridHttp[drawIndex].responseText;
    drawGridHttp[drawIndex].onreadystatechange = function() {};
    drawGridQueUrl[drawIndex] = '';  //reset que for next request
    
    var productNode = GetCurrent(drawGridLayerID[drawIndex]).productNode;
    if (productNode) {
      productNode.setAttribute('renderedImage', parseSettings(sSettingsXML).file);  //drawGridHttp[drawIndex].responseText);
	  
      //check for grouping
      AttachProductToGroupedLayers(drawGridLayerID[drawIndex], drawIndex);
      
      if (!bNoDrawHouse) DrawHouse();
    }
  }
}

// ============================================================
var drawHouseHttp, drawHouseQueUrl;
function DrawHouse() {
  var sLayerID, productNode, xmlString;
  //get all the layers their product settings
  var projectNode = appXML.getElementsByTagName('project')[0];
  if (window.ActiveXObject) {
    xmlString = projectNode.xml;
  } else if (document.implementation && document.implementation.createDocument) {
    xmlString = (new XMLSerializer()).serializeToString(projectNode);
  }
  
  //init http request
  if (window.XMLHttpRequest) drawHouseHttp = new XMLHttpRequest(); else drawHouseHttp = new ActiveXObject('Microsoft.XMLHTTP');
  
  //set POST request
  var params = 'projectXML=' + escape(xmlString) + '&lastRendered=' + document.getElementById('display_project').src + '&wid=' + renderWid;
  
  //init the que
  CancelQue(drawHouseQueUrl, -1);
  drawHouseHttp.open('POST', 'grid/4_display_house.asp', false);
  drawHouseHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  drawHouseHttp.onreadystatechange = function() {};
  drawHouseHttp.send(params);
  //get the response
  var t = drawHouseHttp.responseText;
  //watch for the que completion
  drawHouseQueUrl = 'grid/4_watch.asp?ext=jpg&t=' + t;
  drawHouseHttp.open('GET', drawHouseQueUrl, true);
  drawHouseHttp.onreadystatechange = function() {UpdateDrawHouse()};
  drawHouseHttp.send('');
}

function UpdateDrawHouse() {
  if (drawHouseHttp.readyState == 4) {
    drawHouseQueUrl = '';
    
    //parse the responseText (ie:  <settings><file>images/rendered/234863456.png</file> <wid>300</wid> <hgt>550</hgt> <ppf>21.4567</ppf></settings>)
    var sSettingsXML = drawHouseHttp.responseText;
    
    document.getElementById('display_project').setAttribute('w', parseSettings(sSettingsXML).wid);
    document.getElementById('display_project').setAttribute('h', parseSettings(sSettingsXML).hgt);
    document.getElementById('display_project').setAttribute('ppf', parseSettings(sSettingsXML).ppf);
    document.getElementById('display_project').src = parseSettings(sSettingsXML).file;
    drawHouseHttp.onreadystatechange = function() {};
  }
}


function DrawHouseInit() {
  //wait until all first layers are drawn, and THEN draw the main project
  var bDone = 1;
  for (var i=0; i<drawGridQueUrl.length; i++) {
    if (drawGridQueUrl[i] != '') bDone = 0;
  }
  
  if (bDone == 1) 
  	DrawHouse();
  else
    setTimeout('DrawHouseInit()', 200);
}


function parseSettings(sSettingsXML) {
  //ie: sSettings = '<settings><file>images/rendered/234863456.png</file> <wid>300</wid> <hgt>550</hgt> <ppf>21.4567</ppf></settings>'
  var sFile = '', sFile2 = '', wid = '1', hgt = '1', ppf = '1', oParser, settingsXML, tNode;
  
  if (window.DOMParser) {
    oParser = new DOMParser();
    settingsXML = oParser.parseFromString(sSettingsXML, 'text/xml');
  }
  else { // Internet Explorer
    settingsXML = new ActiveXObject('Microsoft.XMLDOM');
    settingsXML.async = 'false';
    settingsXML.loadXML(sSettingsXML); 
  }
  
  //get variables in <settings> XML
  var tNode = settingsXML.getElementsByTagName('file')[0]; 
  if (tNode) {
    sFile = tNode.childNodes[0].nodeValue;
    sFile2 = sFile.substr(0, sFile.length-4) + '-2' + sFile.substr(sFile.length-4, 4);  //insert '-2'   "string".substring(str.length-2,str.length-5) = "tri"
  }
  var tNode = settingsXML.getElementsByTagName('wid')[0];  if (tNode) wid = tNode.childNodes[0].nodeValue;
  var tNode = settingsXML.getElementsByTagName('hgt')[0];  if (tNode) hgt = tNode.childNodes[0].nodeValue;
  var tNode = settingsXML.getElementsByTagName('ppf')[0];  if (tNode) ppf = tNode.childNodes[0].nodeValue;
  
  return {file:sFile, file2:sFile2, wid:wid, hgt:hgt, ppf:ppf};
}

// ============================================================
var cancelHttp = new Array();
function CancelQue(watchUrl, drawIndex) {
  if (watchUrl) {
    if (watchUrl != '') {
      if (watchUrl.indexOf('watch') != -1) {
        //init http request
        if (window.XMLHttpRequest) cancelHttp[drawIndex] = new XMLHttpRequest(); else cancelHttp[drawIndex] = new ActiveXObject('Microsoft.XMLHTTP');
        
        cancelHttp[drawIndex].open('GET', watchUrl.replace('watch', 'cancel'), true);  //'grid/4_cancel.asp?t=' + t
        cancelHttp[drawIndex].onreadystatechange = function() {};
        cancelHttp[drawIndex].send('');
      }
    }
  }
}



// ============================================================
function DrawGridOnLoad() {
  ResizeGridDisplay();
  
  if (document.getElementById('step').value == '1') {
    document.getElementById('display_loading').style.display = 'none';
    document.getElementById('display_object0').style.display = 'none';
    document.getElementById('display_object1').style.display = 'none';
    document.getElementById('display_object2').style.display = 'none';
    document.getElementById('display_object3').style.display = 'none';
    document.getElementById('display_project').style.display = 'none';
    document.getElementById('display_projects').style.display = 'inline';
    
  } 
  else {
    document.getElementById('display_projects').style.display = 'none';
    
    //LOADING -- check if there are still items being processed...
    var bDone = 1;
    for (var i=0; i<drawGridQueUrl.length; i++) {
      if (drawGridQueUrl[i] != '') bDone = 0;
    }
    if ((bDone == 1)&&(drawHouseQueUrl == '')) document.getElementById('display_loading').style.display = 'none';
    
    //tab image display
    if (document.getElementById('viewTabID').value == '-999') {   //House Tab
      document.getElementById('display_object0').style.display = 'none';
      document.getElementById('display_object1').style.display = 'none';
      document.getElementById('display_object2').style.display = 'none';
      document.getElementById('display_object3').style.display = 'none';
      document.getElementById('display_project').style.display = 'inline';
    }
    else if (document.getElementById('viewTabID').value == '-333') {  //Summary Tab
      ShowSummary();
    }
    else {  //Config Tab
      document.getElementById('display_object0').style.display = 'none';
      document.getElementById('display_object1').style.display = 'none';
      document.getElementById('display_object2').style.display = 'none';
      document.getElementById('display_object3').style.display = 'none';
      document.getElementById('display_project').style.display = 'none';
      
      //find which viewtab is visible
      for (var i=0; i<drawGridLayerID.length; i++) {
        if (drawGridLayerID[i] == document.getElementById('viewTabID').value) {
          document.getElementById('display_object' + i).style.display = 'inline';
        }
      }
    }
  }
}

//=====================================================
var getCustomColor = '';
function pickColor(img, x, y, w) {
  var sColor = '#ffffff';
  if (getCustomColor != '') {
    sColor = getDoc('grid/3_get_color_from_pixel.asp?img=' + img + '&x=' + x + '&y=' + y + '&w=' + w);
    if (sColor == '') sColor = '#ffffff';
  }
  return sColor;
}

function ShowHideColorPicker(elem, colorGUID, forceHide) {
  var i, rgbValue;
  if ((document.getElementById('canvas').style.cursor == '') || (forceHide == 1)) {
    document.getElementById('color_picker').style.top = '-500px';
    if (document.getElementById('customColor').color) document.getElementById('customColor').color.hidePicker();
  } else {
    if (elem) {
	  //get the color RGB
	  var divItems = document.getElementsByTagName('div');
	  for(i=0; i<divItems.length; i++) {  //check colorGuid
	    if (colorGUID == divItems[i].getAttribute('colorGuid')) {
          document.getElementById('customColor').style.backgroundColor = colorToHex(divItems[i].style.backgroundColor);
          //document.getElementById('customColorValue').style.backgroundColor = colorToHex(divItems[i].style.backgroundColor);
          document.getElementById('customColorValue').value = colorToHex(divItems[i].style.backgroundColor);
	    }
	  }
      document.getElementById('color_picker').style.top = (getElementPos(elem)[1] - 230) + 'px';
      document.getElementById('customColor').color.importColor();
      document.getElementById('customColor').color.showPicker();
    }
  }
}

function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
    
    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);
    
    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
}

function getElementPos(e) {
  var e1=e, e2=e;
  var x=0, y=0;
  if(e1.offsetParent) {
    do {
	  x += e1.offsetLeft;
	  y += e1.offsetTop;
	} while(e1 = e1.offsetParent);
  }
  while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY') {
    x -= e2.scrollLeft;
	y -= e2.scrollTop;
  }
  return [x, y];
}