//Turn the XML text into a JavaScript XML doc
function parseXML(xmlText) {
  try { //Internet Explorer
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async="false";
    xmlDoc.loadXML(xmlText);
  } catch(e) {
    try { //Firefox, Mozilla, Opera, etc.
      parser = new DOMParser();
      xmlDoc = parser.parseFromString(xmlText,"text/xml");
    } catch(e) {
      alert(e.message);
      return;
    }
  }
  return xmlDoc;
}

// Get the HTTP Object
function getHTTPObject(){
  if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
  } else {
    if (window.XMLHttpRequest) 
      return new XMLHttpRequest();
    else {
      alert("Your browser does not support AJAX.");
      return null;
    }
  }
}

/************************************************************/
/*** The following functions set DOM elements on the page ***/
/*** once the response comes back from the web server     ***/
/************************************************************/

//Got dress description back from the server
function setDressDescriptionOutput() {
  if(desc_httpObject.readyState == 4) {
    //alert(desc_httpObject.responseText);
    var xmlObject = parseXML(desc_httpObject.responseText);
    //alert(xmlObject.getElementsByTagName("dress")[0]);
    document.getElementById('dressTitlePanel').innerHTML = xmlObject.getElementsByTagName("code")[0].childNodes[0].nodeValue;
    document.getElementById('dressDescriptionPanel').innerHTML = xmlObject.getElementsByTagName("description")[0].childNodes[0].nodeValue;
    var retailPriceXMLElements = xmlObject.getElementsByTagName("retailPrice");
    var salePriceXMLElements = xmlObject.getElementsByTagName("salePrice");
    //Check if this is a sale item with a WAS and NOW
    var descHTML = "";
    if(retailPriceXMLElements.length > 0 && salePriceXMLElements.length > 0) {
      descHTML += "<br/><br/>";
      descHTML += "WAS: " + retailPriceXMLElements[0].childNodes[0].nodeValue;
      descHTML += "<br/><strong>NOW: ";
      descHTML += salePriceXMLElements[0].childNodes[0].nodeValue;
      descHTML += "</strong><br/>";
    }
    //Check if this just has a sale price - no retail
    if(retailPriceXMLElements.length == 0 && salePriceXMLElements.length > 0) {
      descHTML += "<br/><br/><strong>";
      descHTML += "SALE PRICE: " + salePriceXMLElements[0].childNodes[0].nodeValue;
      descHTML += "</strong>";
    }
    //Check if this just has a retail price - no sale price
    if(retailPriceXMLElements.length > 0 && salePriceXMLElements.length == 0) {
      descHTML += "<br/><br/>";
      descHTML += "Price: " + retailPriceXMLElements[0].childNodes[0].nodeValue;
    }
    document.getElementById('dressDescriptionPanel').innerHTML += descHTML;
  }
}

//Got dress images back from the server
function setDressImages() {
  //alert(img_httpObject.responseText);
  if(img_httpObject.readyState == 4) {
    //Decode the XML string into an object
    var xmlObject = parseXML(img_httpObject.responseText);
    //First, populate the image sources and caption text fields
    var dressImageCollection = xmlObject.getElementsByTagName("dressImages")[0];
    totalImageCount = dressImageCollection.attributes[0].value;
    var dressImageElements = xmlObject.getElementsByTagName("dressImage");
    //Loop round the returned images and set the image source
    for(var i = 1; i <= dressImageElements.length; i++) {
      var thisDressImageUrl = dressImageElements[i - 1].getElementsByTagName("imageUrl")[0];
      var thisDressThumbUrl = dressImageElements[i - 1].getElementsByTagName("thumbnailUrl")[0];
      var thisDressImageCaption = dressImageElements[i - 1].getElementsByTagName("imageCaption")[0];
      document.getElementById("dressImage_" + i).src = thisDressImageUrl.childNodes[0].nodeValue;
      document.getElementById("dressThumbnail_" + i).src = thisDressThumbUrl.childNodes[0].nodeValue;
      if(thisDressImageCaption.childNodes.length > 0)
        document.getElementById("dressImageCaption_" + i).innerHTML = thisDressImageCaption.childNodes[0].nodeValue;
    }
    //Make the first image visible
    if(dressImageElements.length > 0) {
      document.getElementById("dressImage_1").style.visibility = "visible";
      document.getElementById("dressThumbnail_1").style.display = "block";
      document.getElementById("dressImageCaption_1").style.display = "block";
    }
    
    //If there is more than one image, make the next button work
    if(dressImageElements.length > 1) {
      document.getElementById("nextImage_link").disabled = false;
    }

    //Next, populate the image count field and activate next/prev button(s)
    document.getElementById("imageCount").innerHTML = "1 of " + String(totalImageCount);

  }
}

//Got realBride description back from the server
function setRealBrideDescriptionOutput() {
  if(desc_httpObject.readyState == 4) {
    //alert(desc_httpObject.responseText);
    var xmlObject = parseXML(desc_httpObject.responseText);
    //alert(xmlObject.getElementsByTagName("realBride")[0]);
    var brideName = xmlObject.getElementsByTagName("brideName")[0].childNodes[0].nodeValue;
    var monthYearMarried = xmlObject.getElementsByTagName("monthYearMarried")[0].childNodes[0].nodeValue;
    document.getElementById('realBrideTitlePanel').innerHTML = brideName;
    var story = "<blockquote>\"" + xmlObject.getElementsByTagName("story")[0].childNodes[0].nodeValue + "\"</blockQuote>";
    story += "<p><em>" + brideName + ", Married " + monthYearMarried + "</em></p>";
    document.getElementById('realBrideDescriptionPanel').innerHTML = story;
  }
}

//Got realBride images back from the server
function setRealBrideImages() {
  //alert(img_httpObject.responseText);
  if(img_httpObject.readyState == 4) {
    //Decode the XML string into an object
    var xmlObject = parseXML(img_httpObject.responseText);
    //First, populate the image sources and caption text fields
    var realBrideImageCollection = xmlObject.getElementsByTagName("realBrideImages")[0];
    totalImageCount = realBrideImageCollection.attributes[0].value;
    var realBrideImageElements = xmlObject.getElementsByTagName("realBrideImage");
    //Loop round the returned images and set the image source
    for(var i = 1; i <= realBrideImageElements.length; i++) {
      var thisRealBrideImageUrl = realBrideImageElements[i - 1].getElementsByTagName("imageUrl")[0];
      var thisRealBrideThumbUrl = realBrideImageElements[i - 1].getElementsByTagName("thumbnailUrl")[0];
      var thisRealBrideImageCaption = realBrideImageElements[i - 1].getElementsByTagName("imageCaption")[0];
      document.getElementById("realBrideImage_" + i).src = thisRealBrideImageUrl.childNodes[0].nodeValue;
      document.getElementById("realBrideThumbnail_" + i).src = thisRealBrideThumbUrl.childNodes[0].nodeValue;
      if(thisRealBrideImageCaption.childNodes.length > 0)
        document.getElementById("realBrideImageCaption_" + i).innerHTML = thisRealBrideImageCaption.childNodes[0].nodeValue;
      else
        document.getElementById("realBrideImageCaption_" + i).innerHTML = "";
    }
    //Make the first image visible
    if(realBrideImageElements.length > 0) {
      document.getElementById("realBrideImage_1").style.visibility = "visible";
      document.getElementById("realBrideThumbnail_1").style.display = "block";
      document.getElementById("realBrideImageCaption_1").style.display = "block";
    }

    //If there is more than one image, make the next button work
    if(realBrideImageElements.length > 1) {
      document.getElementById("nextImage_link").disabled = false;
    }

    //Next, populate the image count field and activate next/prev button(s)
    document.getElementById("imageCount").innerHTML = "1 of " + String(totalImageCount);

  }
}

//Set the pop up with the colour swatch JPEGs
function setColourSwatches() {
  if(sw_httpObject.readyState == 4) {
    //alert(sw_httpObject.responseText);
    var colourPanel = document.getElementById("dressColourPanel");
    colourPanel.style.visibility = "visible";
    var xmlObject = parseXML(sw_httpObject.responseText);
    var fabric = xmlObject.getElementsByTagName("fabric")[0];
    var fabricName = fabric.attributes[0].value;
    var fabricDescription = fabric.attributes[1].value;
    var htmlStr = "<div style=\"position:relative;width:25px;height:25px;left:360px;border-style:solid;border-width:1px;color:#979fa2;text-align:center\"><a style=\"margin-top:5px\" href=\"javascript:void(0)\" onclick=\"document.getElementById('dressColourPanel').style.visibility = 'hidden'\">X</a></div>";
    htmlStr += "<div style=\"width:99%\" align=\"center\">";
    htmlStr += "This dress is made of <strong>" + fabricName + "</strong> - " + fabricDescription + "<br/>";
    htmlStr += "Available in the following colours:<br/>";
    var swatches = xmlObject.getElementsByTagName("swatch");
    htmlStr += "<table>";
    //Loop around rows
    for(var r = 0; r < swatches.length; r += 5) {
      //Loop around columns
      htmlStr += "<tr>";
      for(var c = 0; c < 5; c++) {
        htmlStr += "<td style=\"width:77px\">";
        if((r + c) < swatches.length) {
          var thisUrl = swatches[(r + c)].attributes[0].value;
          var thisTitle = swatches[(r + c)].childNodes[0].nodeValue;
          htmlStr += "<img src=\"" + thisUrl + "\">";
          htmlStr += "<br/>" + thisTitle;
        } else {
          htmlStr += "&nbsp";
        }
        htmlStr += "</td>";
      }
      htmlStr += "</tr>";
    }
    htmlStr += "</table>";
    htmlStr += "</div>";
    colourPanel.innerHTML = htmlStr;
  }
}

//Display the search results that have come back from the server
function setSearchResults() {
  if(se_httpObject.readyState == 4) {
    //alert(se_httpObject.responseText);
    var resultsPanel = document.getElementById("searchResultsPanel");
    resultsPanel.innerHTML = "";
    resultsPanel.style.visibility = "visible";
    var xmlObject = parseXML(se_httpObject.responseText);
    var searchResults = xmlObject.getElementsByTagName("searchResults");
    if(searchResults.length > 0) {
      if(searchResults[0].attributes[0].value == "found") {
        //Some search results have been found for the user's query
        //Display them in the search results window
        var resultList = xmlObject.getElementsByTagName("result");
        for(var r = 0; r < resultList.length; r++) {
          resultsPanel.innerHTML += "<div class=\"searchResultListing\"><a href=\"showSpecificDress.php5?dressCode=" + resultList[r].childNodes[0].nodeValue + "\">" + resultList[r].childNodes[0].nodeValue + " (" + resultList[r].attributes[0].value + ")</a></div>";
        }
      } else {
        //No results have been found - inform the user in the results window
        resultsPanel.innerHTML += "No matching dresses found";
      }
    } else {
      alert("Sorry - search is not working right now, please try again later");
    }
  }
}

/**********************************************************/
/*** These functions are called from events on the page ***/
/*** and send off requests to the web server            ***/
/**********************************************************/

//Get information about the dresses and set it asynchronously
function getDressDescription(dressCode) {
  desc_httpObject = getHTTPObject();
  if (desc_httpObject != null) {
      desc_httpObject.onreadystatechange = setDressDescriptionOutput;
      desc_httpObject.open("GET", "ajaxFacade.php?function=getDress&dressCode=" + dressCode, true);
      desc_httpObject.send(null); 
  }
}

//Get dress images and set them
function getDressImages(dressCode) {
  img_httpObject = getHTTPObject();
  if(img_httpObject != null) {
    img_httpObject.onreadystatechange = setDressImages;
    img_httpObject.open("GET","ajaxFacade.php?function=getDressImages&dressCode=" + dressCode, true);
    img_httpObject.send(null);
  }
}

//Get fabric details colour swatches for a given dress fabric
function getColourSwatches() {
  if(currentDressFabric.length > 0) {
    sw_httpObject = getHTTPObject();
    if(sw_httpObject != null) {
      sw_httpObject.onreadystatechange = setColourSwatches;
      sw_httpObject.open("GET","ajaxFacade.php?function=getSwatches&fabricCode=" + currentDressFabric, true);
      sw_httpObject.send(null);
    }
  }
}

//Get search results based on contents of search input box
function getSearchResults(searchString) {
  //alert("Key pressed: " + searchString.length);
  if(searchString.length > 1) {
    se_httpObject = getHTTPObject();
    if(se_httpObject != null) {
      se_httpObject.onreadystatechange = setSearchResults;
      se_httpObject.open("GET","ajaxFacade.php?function=search&searchQuery=" + searchString);
      se_httpObject.send(null);
    }
  } else {
    document.getElementById("searchResultsPanel").style.visibility = "hidden";
  }
}

//Get information about the dresses and set it asynchronously
function getRealBrideDescription(realBrideId) {
  desc_httpObject = getHTTPObject();
  if (desc_httpObject != null) {
      desc_httpObject.onreadystatechange = setRealBrideDescriptionOutput;
      desc_httpObject.open("GET", "ajaxFacade.php?function=getRealBride&realBrideId=" + realBrideId, true);
      desc_httpObject.send(null);
  }
}

//Get dress images and set them
function getRealBrideImages(realBrideId) {
  img_httpObject = getHTTPObject();
  if(img_httpObject != null) {
    img_httpObject.onreadystatechange = setRealBrideImages;
    img_httpObject.open("GET","ajaxFacade.php?function=getRealBrideImages&realBrideId=" + realBrideId, true);
    img_httpObject.send(null);
  }
}