//depends on /home/webuser/page_factory/jslibrary/jquery.colors.js
var color_array = [];
var color_array_hover = [];
var darken = function (hl_id) {
	var rgb = $("#" + hl_id).css('border-left-color');
	if (rgb.length < 4 || rgb == '' || rgb == null) {
		return;
	}
	if (rgb.charAt(0) == "r") {
		rgb = rgb.substring(4, rgb.length - 1).split(', ');
		var light = $.color(rgb[0], rgb[1], rgb[2]);
	} else {
		var light = $.tocolor(rgb);
	}
	var dark = $.tocolor("#000000");
	GradLinkNormal = $.colorgrad(light, dark, 10);
	return GradLinkNormal.grad(1).hexHTML();
}

$(document).ready(
	function() {
		if ($.browser.msie) {
			if (parseInt($.browser.version.substr(0,1)) < 7) {
				return;
			}
		}
		$('a.hl_item').css({
			display: 'block',
			position: 'relative'
		});
		$('body').prepend('<div id="hover_play"></div>');
		var hl_id = '';
		$(".hl_item").each(function(i){
			color_array[this.id] = $(this).css('border-left-color');
			color_array_hover[this.id] = darken(this.id);
		});
		$(".hl_item")
			.mouseover(function () {
				hl_id = this.id;
				var link = $(this).attr('href');
				var position = $(this).offset();
				try {
					var border_width = parseInt($(this).css('border-left-width')) * 2;
				} catch (err) {
					var border_width = 0;
				}
				var container_height = $(this).find('img').height() + border_width;
				var container_width = $(this).find('img').width() + border_width;
				var item_width = $("#hover_play").width();
				var item_height = $("#hover_play").height();
				var place_left = position['left'] + (container_width / 2) - (item_width / 2) + 'px';
				var place_top = position['top'] + (container_height / 2) - (item_height / 2) + 'px';
				$(this).css({borderLeftColor: color_array_hover[hl_id], borderRightColor: color_array_hover[hl_id], borderTopColor: color_array_hover[hl_id], borderBottomColor: color_array_hover[hl_id]});
				$("#hover_play").css({left: place_left, top: place_top});
				$("#hover_play")
					.mouseover(function () {
						$("#" + hl_id).css({borderLeftColor: color_array_hover[hl_id], borderRightColor: color_array_hover[hl_id], borderTopColor: color_array_hover[hl_id], borderBottomColor: color_array_hover[hl_id]});
						$(this).css({left: place_left, top: place_top, cursor: 'pointer'});
						$(this).click(function () {
							window.location = link;
						});
					})
					.mouseout(function () {
						$("#hover_play").css({left: '-9999px'});
					});
			})
			.mouseout(function () {
				$("#hover_play").css({left: '-9999px'});
				$(this).css({borderLeftColor: color_array[hl_id], borderRightColor: color_array[hl_id], borderTopColor: color_array[hl_id], borderBottomColor: color_array[hl_id]});
			});
	}
);