// Rollover functions for product thumbnails in listing
$(document).ready(function() {
    $('#listWrapper, .browseList, #pageMain').css({overflow: "visible"});
    $('#pageMain').css({paddingBottom: "60px"});
    $('.browseList #listWrapper').addClass('productRolloverList');
	$('.browseList #listWrapper ul li .magThumb a').hover(function() {
	    thumbSrc = $('img', this).attr('src');
	    largeSrc = thumbSrc.replace(/product-medium/, "product-large");
        $('.imageOverlay').stop();
        $(this).parent().parent().css({overflow: "visible"});
        buildOverlay($('img', this).attr('alt'), largeSrc, $(this).parent().parent());
	}, function(){
	    $(this).parent().parent().css({overflow: "hidden"});
	    removeOverlay($(this));
	});

    /* $('#signInRollBtn').hover(function() {
        $('.rolloverInner').stop(true, true);
        $('.signIn .rolloverInner').css({width: '186px', height: '63px', zIndex: '200'});
        $('.signIn .rolloverInner').animate({opacity: 1.0}, 100, "swing", function() {
            $('#header').mousemove(function(e){
                $('.signIn .rolloverInner').css({top: e.pageY-73+'px', left: e.pageX+40+'px'});
            }); 
        });
    }, function() {
        $('.signIn .rolloverInner').animate({opacity: 0.0}, 300, "swing", function() {
            $('.signIn .rolloverInner').css({top: '-200px', left: '0px'});
        });
    }); */

});

function buildOverlay(imageTitle, imageRef, element) {
    $('.imageOverlayWrapper').remove();
    element.append($('<div class="imageOverlayWrapper"><div class="imageOverlayContainer"><div class="imageOverlay"><div class="imageOverlayImage"><img src="" alt=""/></div><div class="imageOverlayTitle"></div></div></div></div>'));
    $('.imageOverlayTitle').html(imageTitle);
    $('.imageOverlayImage img').attr('alt', imageTitle);
    $('.imageOverlay').css({top: "-50px"});
    $('.imageOverlayImage img').attr('src', imageRef).load(function() {
        $('.imageOverlay').animate({opacity: 1.0}, {queue:false, duration:100})
            .animate({left: "145px"}, 300, "swing");
    });
}

function removeOverlay(element) {
    $('.imageOverlay').animate({left: "155px"}, {queue:false, duration:300})
    .animate({opacity: 0.0}, 300, "swing", function() {
        $('.imageOverlayWrapper').remove();
    });
}