var makeArray = new Array();
var makeToModelArray = new Array();
var modelToVersion = new Array();
var currentVersion;

var manufacturer = "";
var tempMakeArray = new Array();

// IE uses different properties for parsing XML files than other browsers
// to be tested in Safari**
var fileName = "../devices.xml";
var imageFolderName = "../images/phones/";
var supportedDevicesSubTitle = "Mobile Phones <a class='first' href='#ATT'>AT&T</a><a href='#Sprint'>Sprint</a><a href='#T-Mobile'>T-Mobile</a><a href='#Verizon'>Verizon</a>";

$(document).ready(function() {

  loadXML();
  $("#OtherDevicesIntro").hide();
});

function loadXML(sender) {
  var makeArray = new Array();

  $("#supportdeviceBody").empty();
  if (sender != null) {
    switch (sender.parentNode.id) {
      case "Other":
        fileName = "../other_devices.xml";
        imageFolderName = "../images/other_devices/";
        supportedDevicesSubTitle = "Other Devices (Desktops, Laptops, Tablets, MIDs)";
        $("#Recommended").hide();
        $("#Compatible").hide();
        $("#Other a").addClass("selected");
        $("#Mobile a").removeClass("selected");
        $("#MobileByOS a").removeClass("selected");
        $("#OtherDevicesIntro").show();
        break;
      case "Mobile":
        fileName = "../devices.xml";
        imageFolderName = "../images/phones/";
        supportedDevicesSubTitle = "Mobile Phones <a class='first' href='#ATT'>AT&T</a><a href='#Sprint'>Sprint</a><a href='#T-Mobile'>T-Mobile</a><a href='#Verizon'>Verizon</a>";
        $("#Recommended").show();
        $("#Compatible").show();
        $("#Other a").removeClass("selected");
        $("#MobileByOS a").removeClass("selected");
        $("#Mobile a").addClass("selected");
        $("#OtherDevicesIntro").hide();
        break;
    }
  }

  $.ajax({
    url: fileName,
    type: 'GET',
    dataType: 'xml',
    timeout: 10000,
    error: function() {
      alert('Error loading XML document');
    },

    success: function(xml) {
      var txt = '';
      $(xml).find('manufacturer').each(function() {
        if ($(this).text() != txt) {
          txt = $(this).text();
          makeArray.push(txt);
        }
      });

      var i = 0;
      $(xml).find('device').each(function() {
        var deviceEntry = $(this).children();

        // IE uses .text property
        if (BrowserDetect.browser == "Explorer") {
          if (manufacturer != deviceEntry[0].text) {
            makeToModelArray[manufacturer] = tempMakeArray;
            tempMakeArray = new Array();
            i = 0;
          }

          manufacturer = deviceEntry[0].text;
          tempMakeArray[i] = new Array();
          tempMakeArray[i][0] = deviceEntry[1].text;
          tempMakeArray[i][1] = deviceEntry[3].text;
          i++;
          modelToVersion[deviceEntry[1].text] = deviceEntry[2].text;
        }
        // Firefox, chrome, opera uses .textContent property
        // if (BrowserDetect.browser == "Firefox" || BrowserDetect.browser == "Chrome" || BrowserDetect.browser == "Opera") {
        else {
          if (manufacturer != deviceEntry[0].textContent) {
            makeToModelArray[manufacturer] = tempMakeArray;
            tempMakeArray = new Array();
            i = 0;
          }

          manufacturer = deviceEntry[0].textContent;
          tempMakeArray[i] = new Array();
          tempMakeArray[i][0] = deviceEntry[1].textContent;  // model
          tempMakeArray[i][1] = deviceEntry[3].textContent;  // thumbnail
          tempMakeArray[i][2] = deviceEntry[2].textContent;  // software
          i++;
          modelToVersion[deviceEntry[1].textContent] = deviceEntry[2].textContent;
        }

      });
      makeToModelArray[manufacturer] = tempMakeArray;
      populatePage(makeArray, makeToModelArray);
    }
  });
}

function populatePage(deviceProducer, deviceModel) {

  var newHtml = "";
  newHtml += "<div id='SupportedDevicesSubTitle'>" + supportedDevicesSubTitle + "</div>";

  for (var i = 0; i < deviceProducer.length; i++) {
    newHtml += "<div class='deviceProducer' id='" + deviceProducer[i] + "'>\n";

    // a hack for special chars such as AT&T
    if (deviceProducer[i] == "ATT")
      newHtml += "<a name='" + deviceProducer[i] + "'></a>" + "<h1>AT&T<a class='blue' href='#top'>top ^</a></h1>\n";
    else if (deviceProducer[i] == "BlackBerry")
      newHtml += "<a name='" + deviceProducer[i] + "'></a>" + "<h1>BlackBerry<a class='blue' href='#top'>top ^</a><a class='blue' style='margin-left:170px' href='BlackBerry.html'>additional information</a></h1>\n";
    else
      newHtml += "<a name='" + deviceProducer[i] + "'></a>" + "<h1>" + deviceProducer[i] + "<a class='blue' href='#top'>top ^</a></h1>\n";


    // if there are 2 or more rows
    if (deviceModel[deviceProducer[i]].length > 5) {
      newHtml += "<a style='display:block; height:3px; width:1px'><div class='expand' id='" + deviceProducer[i] + "Text'><span class='moreOrLessDevices'>show more >></span></div></a>\n";
    }

    for (x in deviceModel) {
      // sort the array to detect special chars
      //deviceModel[deviceProducer[i]].sort();

      if (x != "") {
        if (x == deviceProducer[i]) {
          //alert("device: "+deviceProducer[i]+", model: "+deviceModel[deviceProducer[i]][j][0]);
          var hidden = false;
          for (var j = 0; j < deviceModel[deviceProducer[i]].length; j++) {
            if (j == 5) {
              newHtml += '<div id="' + deviceProducer[i] + 'Show" class="hide">\n';
              var hidden = true;
            }
            newHtml += "<div class='deviceModel" + (j >= 5 ? " multiRow" : "") + "' id='" + deviceModel[deviceProducer[i]][j][0] + "'>\n";
            /*newHtml += "<a class='" + deviceModel[deviceProducer[i]][j][2] + "' target='_blank' href='#'>\n";
            newHtml += "<img src='" + imageFolderName + deviceProducer[i] + "/" + deviceModel[deviceProducer[i]][j][1] + ".jpg' onerror=this.onerror=null;this.src='images/missing.jpg'; alt=''/>\n    </a>\n";*/
            newHtml += "<a class='" + deviceModel[deviceProducer[i]][j][2] + "' target='_blank' >\n";
            newHtml += "<img src='" + imageFolderName + deviceProducer[i] + "/" + deviceModel[deviceProducer[i]][j][1] + ".jpg' onerror=this.onerror=null;this.src='images/missing.jpg'; alt=''/>\n    </a>\n";

            if (deviceModel[deviceProducer[i]][j][0].match("!!!")) {
              newHtml += "<div class='asterisk'><img src='../../images/recommended_devices.png' border='0'></div>";
              newHtml += "<div class='desc descRecomIE'>" + deviceModel[deviceProducer[i]][j][0].replace("!!!", "") + "</div>\n";
            }
            else if (deviceModel[deviceProducer[i]][j][0].match("---")) {
              newHtml += "<div class='desc'>" + deviceModel[deviceProducer[i]][j][0].replace("---", "") + "</div>\n";
            }
            else {
              newHtml += "<div class='desc'>" + deviceModel[deviceProducer[i]][j][0] + "</div>\n";
            }
            newHtml += "</div>\n";
          }
          if (hidden == true)
            newHtml += "</div>\n";
        }
      }
    }
    // end of the manufacture div
    newHtml += "</div>\n";
  }

  $("#supportdeviceBody").append(newHtml);

  // hack for future bug regarding firefox
  //$("#supportdevice").append('<div style="height: 30px; display: block;" class="deviceProducer" id=""/>');

  // toggles close and open
  $("a .expand").toggle(function() {
    var selectedDevice = this.parentNode.parentNode.id;
    $(".deviceProducer").animate({ height: '218px' }, "slow", "", $(".multiRow").show());
    $("a .expand").text("show more >>").addClass("moreOrLessDevices");
    if (deviceModel[selectedDevice].length > 5) {
      var divHeight = 218 * Math.ceil(deviceModel[selectedDevice].length / 5) - 28 * Math.ceil(deviceModel[selectedDevice].length / 5);
      $("#" + selectedDevice).animate({ height: divHeight }, "slow");
      $("#" + selectedDevice + "Show").show();
    }
    //debugger;
    $("#" + selectedDevice + "Text").text("<< show less").addClass("moreOrLessDevices");
    ;
  }, function() {
    var selectedDevice = this.parentNode.parentNode.id;
    $("#" + selectedDevice).animate({ height: '218px' }, "slow", "", $(".multiRow").hide());
    $("a .expand").text("show more >>").addClass("moreOrLessDevices");
    $("#" + selectedDevice + "Show").hide();

  });

  $('.deviceProducer').animate({ height: '218px' }, "slow");
}


// this function is aimed at loading an external 
// HTML content as "Supported Devices by OS" page
function loadSupportedDevicesByOS() {

  $.ajax({
    url: 'supported-devices-by-OS.html',
    type: 'GET',
    dataType: 'html',
    timeout: 10000,
    
    error: function() {
      alert('Error loading HTML document');
    },

    success: function(data) {
      $("#Other a").removeClass("selected");
      $("#MobileByOS a").addClass("selected");
      $("#Mobile a").removeClass("selected");
    
      $("#OtherDevicesIntro").hide();
      $("#Recommended").hide();
      $("#Compatible").hide();
      $("#supportdeviceBody").empty();
      $("#supportdeviceBody").html(data);
    }
  }); // end ajax

} // end function loadSupportedDevicesByOS