var lf_stacks = left_feature();
var lf_showing = null;
var lf_timeout_id = null;
var btn_img_on  = new Image();
var btn_img_off = new Image();
btn_img_on.src  = '/images/home_left_feat_dot_on.gif';
btn_img_off.src = '/images/home_left_feat_dot_off.gif';

function lf_show(stack_num) {
	//LEFT FEATURE: need to grab content and put it into these:
	//hplf_img       (image container div, image is set as background image so as to not break layout)
	//hplf_imglink   (link for the image)
	//hplf_text      (copy that goes with image)

	//clear any timeout.
	if (lf_timeout_id) { clearTimeout(lf_timeout_id); }
	
	var lf_stack = lf_stacks[stack_num];
	//because sitepilot forcibly read dimensions of, then hardcoded them into the img tag, (bad sitepilot, bad) we are going to have to manually fix it.
	//in fact, we'll literally have to load the image, read its dimensions, and then correct the dimensions of the target image. unreal I know.
	var lf_img_src = '/img_lib/' + lf_stack['img1Size'] + '/' + lf_stack['image1Name'];

	//stick the image into the link that surrounds it
	$('#hplf_img').css({'background-image':"url('" + lf_img_src + "')", 'background-repeat':'no-repeat'});
	
	//fix the link accordingly.
	if (lf_stack['img1Link']) {
		$('#hplf_imglink').attr("href", lf_stack['img1URL']);
	} else {
		$('#hplf_imglink').attr("href", "javascript:void(0);");
	}
	$('#hplf_text').html(lf_stack['p1text']);
	
	var previously_showing = lf_showing;
	lf_showing = stack_num; //take note of which one we are showing now in global var.

	//set live/on state of the selector button for the stack contents we just showed.
		//and turn off the one that previously turned on.
	$('#lf_stack_btn_'+stack_num).attr({'src':btn_img_on.src});
	$('#lf_stack_btn_'+previously_showing).attr({'src':btn_img_off.src});

	//queue up the call to lf_next() to happen in 10 sec.
	lf_timeout_id = setTimeout('lf_next()', 10000);
}	

function lf_prev(){
	var stack_num = lf_showing - 1;
	if (stack_num < 0) { stack_num = (lf_stacks.length-1); }
	lf_show(stack_num);
}
function lf_next(){
	var stack_num = lf_showing + 1;
	if (stack_num > (lf_stacks.length-1)) { stack_num = 0; }
	lf_show(stack_num);
}

function lf_stackbuttons() {
	//set up stack switching buttons in hplf_stack_buttons div
		//get div, empty it, loop over stacks, 
			//spawn an image, set src to off state, attach an onclick event, attach hover events
			//also preload feature col image while we are goin over the stacks

	var lf_stackbuttons_div = $('#hplf_stack_buttons');

	lf_stackbuttons_div.empty();
	for (var i = 0; i<lf_stacks.length; i++) {
		//preload stack image
		var preload_img = new Image();
		preload_img.src = '/img_lib/' + lf_stacks[i]['img1Size'] + '/' + lf_stacks[i]['image1Name'];

		//set up button to change to this stack.
		var lf_sbtn = $(document.createElement('img'));
		lf_sbtn.attr({
			'src':btn_img_off.src, 
			'border':'0', 
			'id':'lf_stack_btn_' + i
		});
		lf_sbtn.bind('click', {'lf_num':i}, function(e){
			if (e.data['lf_num'] != lf_showing) {
				lf_show(e.data['lf_num']);
			}
		});
		lf_sbtn.bind('mouseover', {'lf_num':i}, function(e){
			if (e.data['lf_num'] != lf_showing) {
				//alert('i am ' + e.data['lf_num'] + ' and lf_showing is ' + lf_showing);
				$(this).attr({'src':btn_img_on.src});
				this.style.cursor = 'pointer'; 
			} else {
				this.style.cursor = 'default'; 
			}
		});
		lf_sbtn.bind('mouseout', {'lf_num':i}, function(e){
			if (e.data['lf_num'] != lf_showing) {
				$(this).attr({'src':btn_img_off.src});
				this.style.cursor = 'default'; 
			}
		});
		
		//2008 10 14 ugh. Jay wants to hide the stack switching buttons. just uncomment the line below when he wants them back.
		//lf_stackbuttons_div.append(lf_sbtn);
	}
}

function rf_load() {
	//right feature!
	var items_nocache_random = Math.round(100000*Math.random());
	var items_url = "/hprf.pl?no_cache=" + items_nocache_random;
	var hprf_image_path = '/img_lib_oms/thumb2';
	$.getJSON(items_url, function(data){
		for (var i = 0; i<data.length; i++) {
			//get the td that we're gonna do stuff in, get the div for the image, set its background image, get the links around the image/text/arrow, set their hrefs, get the text container, fill it with the text.
			var td = $('#hprf_' + (i+1));
			//var prod_url = '/cgi-bin/oms.cgi?rm=show_product&cid=117&pid=' + data[i]['id'];
			var prod_url = '/c117_p' + data[i]['id'] + '/' + data[i]['fake_pagename'];
			$('.hprf_image div', td).css({'background-image':"url('" + hprf_image_path + '/' + data[i]['prod_image'] + "')", 'background-repeat':'no-repeat'});
			$('.hprf_image a', td).attr({'href':prod_url}); //link around image
			$('.hprf_arrow a', td).attr({'href':prod_url}); //link around the arrow
			//$('.hprf_descr a', td).attr({'href':prod_url}).text(data[i]['prod_name_en']); //link around text, also set the text.
			$('.hprf_descr a', td).attr({'href':prod_url}).html(data[i]['prod_name_en']); //link around text, also set the text UPDATE no, set html since setting text was causing entities to render as their underlying text instead of the entity!

			//also bind rollover/out/click events onto the td itself.
			td.bind('mouseover', function(e){
				this.style.cursor = 'pointer';
				$('a', $(this)).addClass('over'); //turn the link orange just for being in the cell (pseudo psuedo:hover lol)
			}).bind('mouseout', function(e){
				this.style.cursor = 'defualt';
				$('a', $(this)).removeClass('over'); //remove that.
			}).bind('click', {'prod_url':prod_url}, function(e){
				window.location.href = e.data.prod_url;
			});
		}
	});
}

rotating_rf_timout_id = null;
function rotating_rf() {
	//clear any timeout.
	if (rotating_rf_timout_id) { clearTimeout(rotating_rf_timout_id); }
	rf_load(); //load one.
	//queue up the call to this func again to happen in 10 sec.
	rotating_rf_timout_id = setTimeout('rotating_rf()', 10000);
}

rotating_banner_timeout_id = null;
function rotating_banner() {
	//clear any timeout.
	if (rotating_banner_timeout_id) { clearTimeout(rotating_banner_timeout_id); }

	var b_stacks = banner_feature();
	b_random = Math.floor(Math.random()*b_stacks.length);
	$('td.bottom_banner img').attr('src', '/img_lib/banner/' + b_stacks[b_random]['image1Name']);

	//queue up the call to this func again to happen in 10 sec.
	rotating_banner_timeout_id = setTimeout('rotating_banner()', 10000);
}

$(function(){

	lf_stackbuttons() //set up the left feature stack selection buttons.

	var lf_random = Math.floor(Math.random()*lf_stacks.length);
	lf_show(lf_random);

	//right feature: (if the rotating feature is not needed, then just change it to a call to rf_load();
	rotating_rf();
	//rf_load();
	
	//banner 
	//2008 10 02 they want a flash thing instead of banner images down here. we'll be hardcoding some other stuff for it then.
	//rotating_banner();
});