var arrHomeHeros=[];

$(function()
{
	var homehero=$('#homehero');
	
	if (homehero.length) {
		var activeIndex = parseInt(homehero.attr('class').replace(/channel_([0-9]+)/i, '$1'), 10);
		
		function insertImage(index) {
			$('#homeherotab_'+index+' a').attr('href', '').live('click', function() {
				$(this).blur();
			
				index=getID($(this).parent().attr('id'));
				
				$('img', homehero).hide();
				$('#homeherotabs li', homehero).removeClass('active');
				$('.homeherooverlay').hide();
				
				$('#homeheroimage_'+index).css('display', 'block');
				$('#homeherotab_'+index, homehero).addClass('active');
				homehero.attr('class', 'channel_'+index);
				
				$('#homeherooverlay_'+index).css('display', 'block');
				
				$('#homeherocontent').attr('href', arrHomeHeros[index][4]);
				
				return false;
			});
			
			$('<div id="homeherooverlay_'+index+'" class="homeherooverlay" style="display:none">'+
				'<h2>'+arrHomeHeros[index][2]+'</h2>'+
				'<p>'+arrHomeHeros[index][3]+'</p>'+
				'</div>').appendTo($('#homeherocontent', homehero));
			
		}
		
		//we have image with index activeindex already loaded, set up the click event for it
		insertImage(activeIndex);
		
		$('#homeherotabs li', homehero).each(function()  {
			var thisIndex=getID($(this).attr('id'));
			if (thisIndex != activeIndex) {
				$('<img style="display:none" src="'+arrHomeHeros[thisIndex][0]+'"'+
					' id="homeheroimage_'+thisIndex+'"'+
					' alt="'+arrHomeHeros[thisIndex][1]+'"'+
					'/>')
					.load(insertImage(thisIndex)).appendTo($('#homeherocontent', homehero));
			}
		});
	}
});