var currentlySelected = 5;
var features = null;

Ext.onReady(function()
{
  Ext.Ajax.request({
    loadMask: true,
    url: 'data.json',
    success: function(response) {
      
      features = eval('(' + response.responseText + ')').features;
      
      for(var id = 1; id <= 5; id++)
      {
        var featureImage = document.getElementById("feature_" + id);
        featureImage.style.backgroundImage = "url('" + features["feature_" + id].imageSmall.src + "')";
        
        var featureImageText = document.getElementById("feature_" + id + "_text");
        featureImageText.innerHTML = features["feature_" + id].imageSmall.alt;
      }
      
      selectFeature(1);
    },
    failure: function(response) {
      
    }
});
});

function selectFeature(selected) {
  if(currentlySelected != selected)
  {
    var oldSelected = document.getElementById("feature_" + currentlySelected);
    oldSelected.setAttribute("class", "feature");
    
    //var oldfeaturedImageText = document.getElementById("feature_" + currentlySelected + "_text");
    //oldfeaturedImageText.style.height = '30px';
    //oldfeaturedImageText.style.bottom = '-62px';
    
    var newSelected = document.getElementById("feature_" + selected);
    newSelected.setAttribute("class", "featureSelected");
    
    //var featuredImageText = document.getElementById("feature_" + selected + "_text");
    //featuredImageText.style.height = '43px';
    //featuredImageText.style.bottom = '-47px';
    
    var mainImage = document.getElementById("mainFeatureImage")
    mainImage.style.backgroundImage = "url('" + features["feature_" + selected].imageLarge.src + "')";
    
    var mainText = document.getElementById("mainFeatureText");
    mainText.innerHTML = features["feature_" + selected].text;
    
    currentlySelected = selected;
  }
}

function highlightFeature(selected) {
  if(selected != currentlySelected)
  {
    var oldHighlighted = document.getElementById("feature_" + selected);
    oldHighlighted.setAttribute("class", "featureHighlighted");
    
    //var featuredImageText = document.getElementById("feature_" + selected + "_text");
    //featuredImageText.style.height = '43px';
    //featuredImageText.style.bottom = '-47px';
  }
}

function unHighlightFeature(selected) {
  if(selected != currentlySelected)
  {
    var oldHighlighted = document.getElementById("feature_" + selected);
    oldHighlighted.setAttribute("class", "feature");
    
    //var oldfeaturedImageText = document.getElementById("feature_" + selected + "_text");
    //oldfeaturedImageText.style.height = '30px';
    //oldfeaturedImageText.style.bottom = '-62px';
  }
}