var timeout;
var arrayDesig=0;
var curSelected=1;
var prevSelected=1;
var tempselected=0;
var _item=new Object();
var delay=5000;
//
$(document).ready(function(){
	// set the timeout to account for IE weirdness - triggers function after half a second
	setTimeout(renderBoxes,500);
});
function renderBoxes(){
	// sets box 1 to opaque (selected) state
	var colorArray=['#EB8C00','#DC9600','#E0301E','#DB536A','#A32020','#602320'];
	$('#button_1').css('opacity','1');
	$('#button_1').css('filter','alpha(opacity=100)');
	$('#tile_1').css('opacity','1');
	$('#tile_1').css('filter','alpha(opacity=100)');
	$('.ar_hp_numberbox > ul > li').each(function(){
		$(this).css('background-color',colorArray[arrayDesig]);
		arrayDesig+=1;
		if(arrayDesig>5){
			arrayDesig=0;
		}
	});
	// add in mouseover function which adds a white border and a tooltip...
	$('.ar_hp_numberbox > ul > li').mouseover(function(){
		if(Number(this.id.split("_")[1])!=curSelected){
			$(this).css('border','1px solid #404041');	
			$(this).css('margin','-1px');
			$(this).css({'margin-left':'4px'});
		}
		$(this).css('cursor','pointer');
		if(Number(this.id.split("_")[1])>1){
			$('#tooltip_'+this.id.split("_")[1]).css('left',$(this).position().left-40);
		} else {
			$('#tooltip_'+this.id.split("_")[1]).css('left',$(this).position().left+10);
		}
		//alert($(this).position().left);
		$('#tooltip_'+this.id.split("_")[1]).css('display','block');
	});
	// ... and removes it on mouseout.
	$('.ar_hp_numberbox > ul > li').mouseout(function(){
		if(Number(this.id.split("_")[1])!=curSelected){
			$(this).css('border','none');
			$(this).css('margin','0px');
			$(this).css({'margin-left':'5px'});	
		}
		$(this).css('cursor','auto');
		$('#tooltip_'+this.id.split("_")[1]).css('display','none');
	});
	arrayDesig=0;
	var tipDesig=1;
	$('.ar_hp_boxwrapper > ul > li > .ar_hp_tile > .ar_hp_tileheaderbox').each(function(){
		$(this).css('background-color',colorArray[arrayDesig]);
		arrayDesig+=1;
		if(arrayDesig>5){
			arrayDesig=0;
		}
		$('.ar_hp_tipholder').append('<div class="ar_hp_tooltip_container" id="tooltip_'+tipDesig+'"><div class="ar_hp_tooltiptext">'+$(this).children('.ar_hp_tileheader').text()+'</div><img src="images/ar_tip_spike.png"/></div>');
		tipDesig++;
	});
	$('#tooltip_1').css({'text-align':'left'});
	// the onclick function for the tiles is a dummy at the moment - all it does is call a .js alert.
	/*$('.ar_hp_boxwrapper > ul > li').click(function(){
		alert("tile "+this.id.split("_")[1]+" clicked");
	});*/
	// the onclick function for the number boxes triggers the moveTiles() function - see below
	$('.ar_hp_numberbox > ul > li').click(function(){
		$('#button_'+curSelected).css({'border':'none','margin':'0px','margin-left':'5px'});
		$(this).css('border','1px solid #404041');
		$(this).css('margin','-1px');
		$(this).css({'margin-left':'4px'});	
		prevSelected=curSelected;
		curSelected=Number(this.id.split("_")[1]);
		delay=30000;
		moveTiles(curSelected);
	 });
	$('.ar_hp_boxwrapper > ul > li').mouseover(function() {
		$(this).css('cursor','pointer');
	});
	$('.ar_hp_boxwrapper > ul > li').mouseout(function() {
		$(this).css('cursor','auto');
	});
	timeout=setTimeout(moveOnTimer,delay);
}
function moveTiles(_itemnum){
	//alert('_itemnum: '+_itemnum);
	_item=$('#button_'+_itemnum);
	clearTimeout(timeout);
	// first set the opacity for selected / non-selected number boxes
	$('.ar_hp_numberbox > ul > li').css('opacity','0.75');
	$('.ar_hp_numberbox > ul > li').css('filter','alpha(opacity=75)');
	// take the number from the id name of the clicked number box.
	var targetTile=Number(_itemnum);
	$(_item).css('opacity','1');
	$(_item).css('filter','alpha(opacity=100)');
	$('.ar_hp_boxwrapper > ul > li').css('opacity','0.50');
	$('.ar_hp_boxwrapper > ul > li').css('filter','alpha(opacity=50)');
	$('#tile_'+targetTile).css('opacity','1');
	$('#tile_'+targetTile).css('filter','alpha(opacity=100)');
	// currentPos is the x position of the div which contains all the tiles.
	var currentPos=$('#boxwrapper').position().left;
	// targetPos is the x position of the tile we want to show.
	var targetPos=$('#tile_'+targetTile).position().left;
	// offset is the distance we need to move the container div...
	var offset=0-targetPos;
	// ...and then we animate it.
	$('#boxwrapper').animate({left: offset}, 500, function() {timeout=setTimeout(moveOnTimer,delay);});
}
function moveOnTimer(){
	delay=5000;
	//alert('curSelected: '+curSelected+'\nlength: '+$('.ar_hp_boxwrapper > ul > li').length);
	if(Number(curSelected)<Number($('.ar_hp_boxwrapper > ul > li').length)){
		tempselected=curSelected+1;
		//alert(tempselected);
		prevSelected=curSelected;
		curSelected=tempselected;
	} else {
		//alert('we\'ve run out of tiles');
		tempselected=1;
		prevSelected=curSelected;
		curSelected=tempselected;
	}
	$('#button_'+prevSelected).css('border','none');
	$('#button_'+prevSelected).css('margin','0px');
	$('#button_'+prevSelected).css({'margin-left':'5px'});
	//
	$('#button_'+curSelected).css('border','1px solid #404041');
	$('#button_'+curSelected).css('margin','-1px');
	$('#button_'+curSelected).css({'margin-left':'4px'});
	moveTiles(tempselected);
}