// JScript File
//Global vars for this page
//this is used to keep the state context when the user goes to get results
var gSelectedState;

//this is used to hold the metro area context when the user changes the metro area
var gSelectedMetroArea;


function bestBuyStateList()
{
    
    //this is to insert options into an existing select box
    var selectList  = document.getElementById("bestBuyStateSelect");
    
    //set the first item in the option list to blank to allow the onchange event to fire for the select list
    selectList.options[0] = new Option("","", false, false);
    
    ///loop thru the top level of the data structure to get a list of states
    for(var i = 0; i < data.stateList.length; i++)
    {
        //build the slection list but starting at plus one
        selectList.options[i+1] = new Option(data.stateList[i].stateName,data.stateList[i].stateName, false, false);
        
    }
}


//this function is called when the select list changes so it then builds a metro area list based on the selection
function selectBestBuyMetroArea()
{
    
    //Make any results for stores that are showing be hidden
    document.getElementById("bestBuyList").innerHTML = "";
    
    //Set up metroAreaArray array to hold every metro area for a particular state
    var metroAreaArray   = new Array();
    
    //get a hold of the state select box
    var selectList = document.getElementById("bestBuyStateSelect");

    //Now get the value of the selected element remove 1 since not a 1 to 1 mapping
    var selectIndex = selectList.selectedIndex-1;
    
    //set up vars for this function and global var
    gSelectedState = selectIndex;
    
    //get the div id for the Metro Area
    var selectBoxDivId      =  document.getElementById("bestBuyRegion");
    var selectBoxListDivId  =  document.getElementById("bestBuyRegionSelectList");
  
    //Now we prep the metro area select box    
    selectBoxTwoID = document.getElementById("bestBuyMetroSelect");
    
    //reset it to zero for each change LLOK INTO THIS
    selectBoxTwoID.length = 0;
    
    //This holds the text for the state   
    var resultsHeadingDiv = document.getElementById("bestBuyStateHeader");

    //set the header text to the correct state
    var resultsHeadingFormating;
    
    //This loong if statement is here to handle some odd cases that can come up with the state
    //select. The cases are as follows:
    //IF 1) page is showing a metro area and user selects a blank state
    //IF 2) page is not showing a metro area but is showing results and user selects blank state
    //IF 3) this is for states that have no metro area only results
    //IF 4) This is for states that have metro areas
    
    if(selectBoxTwoID.style.visibility == "visible" && selectIndex < 0)
    {   
        //Here we check to see if the state select is less than 0 and if the metro area is visible
        //if it is then hide that puppy
        selectBoxTwoID.style.visibility = "hidden";
        selectBoxDivId.style.visibility = "hidden";
        selectBoxListDivId.style.visibility = "hidden";
        resultsHeadingDiv.style.visibility = "hidden";
    }
    else if(selectBoxTwoID.style.visibility == "hidden" && selectIndex < 0)
    {
        //this covers a case that can come where a user is in a state without a metro area and then the select the blank
        //state list
         selectBoxTwoID.style.visibility = "hidden";
         selectBoxDivId.style.visibility = "hidden";
         selectBoxListDivId.style.visibility = "hidden";
         resultsHeadingDiv.style.visibility = "hidden";
    }
    else if(data.stateList[selectIndex].metroAreaList.length == 1)
    {
        //This is for cases where there isnt any metro list for a state
        selectBoxTwoID.style.visibility = "hidden";
        selectBoxDivId.style.visibility = "hidden";
        selectBoxListDivId.style.visibility = "hidden";
        resultsHeadingDiv.style.visibility = "visible";
        
        //pass them strait to the results list
        showMetroAreaResults(); 
        return;      
    }
    else
    {
        //make the select box visible
        selectBoxTwoID.style.visibility = "visible";
        selectBoxDivId.style.visibility = "visible";
        selectBoxListDivId.style.visibility = "visible";
        resultsHeadingDiv.style.visibility = "hidden";
    }
    
    //Set the first selection option nothing
    selectBoxTwoID.options[0] = new Option("","", false, false);
    
    //this if statement is here as a safety if the users selects blank on the state(saves them from an error)
    //if there is a metro area
    if(selectIndex >= 0)
    {
         //just place data array into metroAreaArray to build the selection list
         metroAreaArray = data.stateList[selectIndex].metroAreaList;
    }
    
    //loop thru an build out the metro area selection list
    for(var i = 0; i < metroAreaArray.length; i++)
    {
        selectBoxTwoID.options[i+1] = new Option(metroAreaArray[i].metroArea,metroAreaArray[i].metroArea, false, false);
    
    }
}

function showMetroAreaResults()
{
    var storeResults = "";
    var resultsDiv = document.getElementById("bestBuyList");
    resultsDiv.style.visibility = "visible";
    
    //get the value of the metro area selected
    var metroAreaSelected = document.getElementById("bestBuyMetroSelect");
    
    //Now we prep the metro area select box    
    metroAreaSelectedDiv = document.getElementById("bestBuyRegion");
    metroAreaSelectListDiv = document.getElementById("bestBuyRegionSelectList");
    
    //Set up the var to hold the select index
    var selectIndex;
    
    //This holds the text for the state   
    var resultsHeadingDiv = document.getElementById("bestBuyStateHeader");

    //set the header text to the correct state
    var resultsHeadingFormating;
    
    //this saves us from an error that occurs if the user selects the blank selection
    //this just fails out instead of trying to look for index 0 in the array
    if(metroAreaSelected.selectedIndex == 0)
    {
        return;
    }
    
    // CHECK IF I NEED THIS
    if(data.stateList[gSelectedState].metroAreaList.length == 1)
    {
        metroAreaSelected.style.visibility = "hidden";
        metroAreaSelectedDiv.style.visibility = "hidden";
        metroAreaSelectListDiv.style.visibility = "hidden";
        resultsHeadingDiv.style.visibility = "hidden";
        selectIndex = 0;
    }
    else
    {
        //Now get the value of the selected element remove 1 since not a 1 to 1 mapping
        selectIndex = metroAreaSelected.selectedIndex-1;
    }
    
    gSelectedMetroArea = selectIndex;
    
    //This loops thru the array of stores and formats each one in the same way.
    for(var i =0; i < data.stateList[gSelectedState].metroAreaList[selectIndex].storeList.length; i++)
    {
        storeResults += FormatStoreResults(selectIndex, i);
    }
    
    resultsHeadingDiv.style.visibility = "visible";
    resultsHeadingFormating = "<h2>Best Buy Stores in " + data.stateList[gSelectedState].stateName + "</h2>";
    resultsHeadingDiv.innerHTML = resultsHeadingFormating;

    //Now commit the whole thing to the inner html of the div
    resultsDiv.innerHTML = storeResults;
}

//this function is to format the text results that are returned by the pop up list
//Ask Barclay if this is what he meant
function FormatStoreResults(metroAreaChoice, store)
{
    //this is to hold the fleshed out results
    var results;
    
    //this is to hold the feild address 2 if there is something there
    var address;
    if(data.stateList[gSelectedState].metroAreaList[metroAreaChoice].storeList[store].storeAddress2 != "")
      {
         address = data.stateList[gSelectedState].metroAreaList[metroAreaChoice].storeList[store].storeAddress1 +
                   '<br />'
                   + data.stateList[gSelectedState].metroAreaList[metroAreaChoice].storeList[store].storeAddress2; 
      }
      else
      {
        address = data.stateList[gSelectedState].metroAreaList[metroAreaChoice].storeList[store].storeAddress1;
      }
    
    //Fill the results variable with information
    results = '<div class="bestBuyResultDiv">'
             + "<strong>" + data.stateList[gSelectedState].metroAreaList[metroAreaChoice].storeList[store].storeName + 
             ' Store (' + data.stateList[gSelectedState].metroAreaList[metroAreaChoice].storeList[store].storeNumber + ')' + "</strong>" +
             '<br />'
             + address
             + '<br />'
             + data.stateList[gSelectedState].metroAreaList[metroAreaChoice].storeList[store].storeCity + "," +
             ' ' + data.stateList[gSelectedState].metroAreaList[metroAreaChoice].storeList[store].storeState +
             ' ' + data.stateList[gSelectedState].metroAreaList[metroAreaChoice].storeList[store].storeZip +
             '</div>';
    
    return results;
    

}