//depends on 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.hoverplay').css({
			display: 'block',
			position: 'relative'
		});
		$('body').prepend('<div id="hover_play"></div>');
		$('#hover_play').css({
			display: 'block',
			position: 'absolute',
			zIndex: '9999',
			left: '-9999',
			margin: '0',
			border: '0',
			padding: '0'
		});
		var hl_id = '';
		var id_inc = 0;

		$("a.hoverplay").each(function(i){
			if ($(this).attr("id") == '' || $(this).attr("id") == null) {
				id_inc++;
				$(this).attr("id", "hoverplaylink" + id_inc);
			}
			color_array[this.id] = $(this).css('border-left-color');
			color_array_hover[this.id] = darken(this.id);
		});

		$("a.hoverplay")
			.mouseover(function () {
				hl_id = this.id;
				var src = $(this).attr('hoverplay');
				var item_width = $(this).attr('hoverwidth');
				var item_height = $(this).attr('hoverheight');
				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;
				$("#hover_play").css({width: item_width + 'px', height: item_height  + 'px'});
				//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';
				
//				console.log('place_left: ' + place_left + ', place_top: ' + place_top + ', item_width: ' + item_width + ', item_height: ' + item_height + ', container_width: ' + container_width + ', container_height: ' + container_height + ', border_width: ' + border_width + ', position[left]:' + position['left'] + ', position[top]: ' + position['top']);
//				console.log('var place_top = position[\'top\'] + (container_height / 2) - (item_height / 2) + \'px\';');
//				console.log('var place_top = ' + (position['top'] + (container_height / 2)) + ' - ' + (item_height / 2) + 'px\';');
//				console.log('var place_top = (' + position['top'] + ' + (' + container_height + ' / 2))  - (' + item_height + ' / 2) + px\';');
				
				if (border_width != 0) {
					$(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").html('<img src="' + src + '" alt="" style="margin: 0; border: 0; padding: 0" />');
				$("#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]});
			});
	}
);