$(function()
{
	$("body").append("<div style=\"position: absolute; z-index: 1000; background-image: url('/media/themes/default/images/jquery/slides_bar/zoom_background.png'); text-align: center;\" id=\"hoverImg\" href=\"\"><img id=\"hoverImgInnerImg\" src=\"\" style=\"margin-top: 32px;\"></div>");

    $(".smallSlide").hover(
        function()
        {
            var hoverImg = $("#hoverImg");
            var hoverImgInnerImg = $("#hoverImgInnerImg");
            var innerImg = $(this).find("img").first();
            var player = $("#lzapp");
            
            var aspect = innerImg.width() / innerImg.height();
            
            var height = player.height();
            var width = player.width();
            
            var left = player.offset().left;
            var top = player.offset().top;
            
            hoverImgInnerImg.attr("src", innerImg.attr("src"));
            hoverImgInnerImg.css({"height": height - 64});
            hoverImg.css({"display": "block"});
            hoverImg.css({"top": top, "left": left});
            hoverImg.css({"width": width, "height": height});
            
            hoverImg.stop().animate({opacity: 1.0}, 250);
        },
        function()
        {
            var hoverImg = $("#hoverImg");
            
            hoverImg.css({"opacity": 1.0});
            hoverImg.stop().animate({opacity: 0.0}, 250, function() {hoverImg.css({"display": "none"});});
        });
    
    $(".smallSlide").click(
        function()
        {
            var hoverImg = $("#hoverImg");
            
            hoverImg.css({"opacity": 1.0});
            hoverImg.stop().animate({opacity: 0.0}, 250, function() {hoverImg.css({"display": "none"});});
            
        });
});