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 supportedDevicesSubTitleText = "Mobile Phones <a class='first' href='#ATT'>AT&T</a> <span class='del'>|</span> <a href='#Sprint'>Sprint</a> " +
    "<span class='del'>|</span> <a href='#T-Mobile'>T-Mobile</a> <span class='del'>|</span> <a href='#Verizon'>Verizon</a> <span class='del'>|</span> " +
    "<a href='#BlackBerry'>BlackBerry</a> <span class='del'>|</span> <a href='#HTC'>HTC</a> <span class='del'>|</span> <a href='#Nokia'>Nokia</a> " +
    "<span class='del'>|</span> <a href='#Samsung'>Samsung</a> <span class='del'>|</span> <a href='#SonyEricsson'>Sony Ericsson</a>";
var supportedDevicesSubTitle = supportedDevicesSubTitleText;

$(document).ready(function() {
  loadXML();
});

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

  $("#supportdeviceBody").empty();
  if (sender != null) {
    switch (sender.parentNode.id) {
    
      case "MobileList":
        fileName = "../devices.xml";
        imageFolderName = "../images/phones/";
        supportedDevicesSubTitle = supportedDevicesSubTitleText;
        //$("#Recommended").hide();
        $("#Compatible").hide();
        $(".mobile-tabs a").removeClass("selected");
        $("#MobileList a").addClass("selected")
        break;   
        
      case "MobileGallery":
        fileName = "../devices.xml";
        imageFolderName = "../images/phones/";
        supportedDevicesSubTitle = supportedDevicesSubTitleText;
        //$("#Recommended").show();
        $("#Compatible").show();
        $(".mobile-tabs a").removeClass("selected");
        $("#MobileGallery a").addClass("selected")
        break;      
        
      case "Other":
        fileName = "../other_devices.xml";
        imageFolderName = "../images/other_devices/";
        supportedDevicesSubTitle = "Other Devices (Desktops, Laptops, Tablets, MIDs, UMPC)";
        //$("#Recommended").hide();
        $("#Compatible").hide();
        $(".mobile-tabs a").removeClass("selected");
        $("#Other a").addClass("selected");
        break;
    }
  }

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

    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;

      if (sender == null || sender == "") {
        populateList(makeArray, makeToModelArray);
      }
      else {
        switch (sender.parentNode.id) {
          case "MobileList":
            populateList(makeArray, makeToModelArray);
            break;
          case "MobileGallery":
          case "Other":
            populatePage(makeArray, makeToModelArray);
            break;
        } // end switch
      }
    }
  });
}

/*********************************************************************
*  populateList function generates HTML for the list option
**********************************************************************/

function populateList(deviceProducer, deviceModel) {

  supportedDevicesSubTitle = supportedDevicesSubTitleText;
  
  $("#Recommended").hide();
  $("#Compatible").hide();
  $(".mobile-tabs a").removeClass("selected");
  $("#MobileList a").addClass("selected")

  var newHtml = "";
  newHtml += "<div id='SupportedDevicesSubTitle'>" + supportedDevicesSubTitle + "</div>";
  
  //CONSTRUCT THE PAGE
  for (var i = 0; i < deviceProducer.length; i++) {
    newHtml += "<div class='deviceProducerListView' id='" + deviceProducer[i] + "'>\n";

    // detect special chars such as AT&T
    if (deviceProducer[i] == "ATT")
      newHtml += "<a name='" + deviceProducer[i] + "'></a>" + "<h1><span class='producer-name'>AT&T</span><a class='blue' href='#top'>top ^</a></h1>\n";
    else if (deviceProducer[i] == "UMPC")
      newHtml += "<a name='" + deviceProducer[i] + "'></a>" + "<h1><span class='producer-name'>Ultra Mobile PCs (UMPC)</span><a class='blue' href='#top'>top ^</a></h1>\n";
    else
      newHtml += "<a name='" + deviceProducer[i] + "'></a>" + "<h1><span class='producer-name'>" + deviceProducer[i] + "</span><a class='blue' href='#top'>top ^</a></h1>\n";

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

      if (x != "") {
        
        if (x == deviceProducer[i]) {

          var hidden = false;
          for (var j = 0; j < deviceModel[deviceProducer[i]].length; j++) {

            newHtml += "<div class='deviceModelListView" + (j >= 5 ? " multiRow" : "") + "' id='" + deviceModel[deviceProducer[i]][j][0] + "'>";

            if (deviceModel[deviceProducer[i]][j][0].match("!!!")) {
              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 if (x == deviceProducer[i])
      } // end if (x != "")
    } // end for (x in deviceModel)

    // end of the manufacture div
    newHtml += "</div>\n";
  }

  $("#supportdeviceBody").append(newHtml);
} // end populateList
//++++++++++++++++++++++ end populateList ++++++++++++++++++++++++++++



// populatePage function generates HTML for the gallery option
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
      deviceModel[deviceProducer[i]].sort();

      if (x != "") {
        if (x == deviceProducer[i]) {
          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' >\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();
    }

    $("#" + 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) {

      $(".mobile-tabs a").removeClass("selected");
      $("#MobileByOS a").addClass("selected");

      $("#OtherDevicesIntro").hide();
      $("#Recommended").hide();
      $("#Compatible").hide();
      $("#supportdeviceBody").empty();
      $("#supportdeviceBody").html(data);
    }
  }); // end ajax

} // ----------- end function loadSupportedDevicesByOS -----------