// FORM: title (will be capitalised), image (inc path), venue, description
/* var features = new Array(
  ["Global Gathering 2008", "featured/feature1.jpg", "Long Marston Airfield", "Global gathering 2008 takes place over two nights on Friday 25th and Saturday 26th July and will offer FREE camping facilities for all weekend guests.", "https://www.theticketsellers.co.uk/buy_tickets/events/?id=10003778&ref=featured"],
  ["two", "featured/feature2.jpg", "location, location, location!", "all the guff"],
  ["Lizards", "featured/feature3.jpg", "Birmingham Nature Centre", "Lizards are great aren't they?"],
  ["Red Man", "featured/redman.jpg"],
  ["ThrustSSC", "featured/thrustssc.jpg", "National transport museum", "The world's fastest car in Coventry"],
  ["six", "image.jpg"],
  ["seven", "image.jpg"],
  ["eight", "image.jpg"],
  ["nine", "image.jpg"],
  ["ten", "image.jpg"],
  ["eleven", "image.jpg"],
  ["twelve", "image.jpg"]
  );
*/
// cache images
var cache = new Array(features.length);
for(var i = 0; i < cache.length; i++) {
  cache[i] = new Image;
  cache[i].src = features[i][1];
}
var gradientImage = new Image();
gradientImage.src = "featured/gradfeature.jpg";

function id(x) {
	if(typeof x == "string") return document.getElementById(x);
	else return x;
}

function loadFeatures() {
  //append feature programmatically
  for(var i = 0; i < features.length; i++) {
    var feature = document.createElement("div");
    $(feature).attr("class", "feature");
    $(feature).attr("id", i);

    $(feature).click(function() {
      $(".feature").css('background-color', '#e5e5e5');
      $(this).css('background-color', '#d0e1ef');
      highlight($(this).attr('id'));
    });


	  var html =  "<b>" + features[i][0].toUpperCase() + "</b><br />";

	  html = html + "<a href='" + features[i][4] + "'><img class='buy' src='/site_images/button_buy_tickets.gif'></a>"+features[i][2];
	  feature.innerHTML = "<p>" + html + "</p>";

	  id('featurescontainer').appendChild(feature);
  }
}

function highlight(i) {
   var html = "<div class='boxtop'><div></div></div><h1>" + features[i][0].toUpperCase() + "</h1>";
	if(features[i][5] && features[i][5] > 0)
	{
		html = html + "<em style='margin-left: 265px; display: block;'>Featured artist: <a href='/buy_tickets/artists/?id=" + features[i][5] + "' title=\"See all events for " + features[i][6] + "\">" + features[i][6] + "</a></em>";
	}
   html = html + "<p>" + features[i][3] + "<a href='" + features[i][4] + "'><img align='right' src='/site_images/button_buy_tickets.gif'></a></p>";
    $("#featureheader").fadeOut("fast", function() {
      $("#featureheader").html(html);
      $('#featureheader').css('background-image', "url(" +features[i][1]+ ")")
    }).fadeIn("fast");
	 for(var j=0; j<12; j++)
	 {
		if(document.getElementById(j))
		{
			document.getElementById(j).className = "feature";
		}
	 }

	make_gray(i);
}

/**
 *
 * @access public
 * @return void
 **/
function make_gray(i)
{
	if(document.getElementById(i))
	{
		document.getElementById(i).className ='feature_selected';
	}
	else
	{
		setTimeout ("make_gray(" + i + ");", 1000);
	}
}