/**
 * jQuery Product Image Overlay / Enlarge Plugin
 * 
 * @package Wilson Cooke
 * @subpackage Compose Commerce
 * @copyright 2011 Wilson Cooke
 * 
 * This plugin provides the functionality to display an enlarged product 'preview' image that is usually used on a 
 * category listing. The plugin will display our 'enlargeDiv' at a specific offset relative to the product image
 * and automatically adjust depending on the viewport to ensure it is always visible.
 * 
 * @usage
 * $(document).ready(function() {
 *   $('a.product-enlarge-trigger').productEnlarge({
 *      fadeInSpeed: 350,
 *      'lastRowClass' : 'last',
 *      'overlayDiv' : 'item-overlay-global',
 *      'enlargeDiv' : 'product-scroll-enlarge'        
 *  });
 * });
 * 
 */
// Plugin Definition
$.fn.productEnlarge = function (options) {
    var defaults = {
        'fadeInSpeed' : 300,
        'lastRowClass' : 'last',
        'overlayDiv' : 'item-overlay-global',
        'enlargeDiv' : 'product-scroll-enlarge'
    }
    // Extend our default options with those provided
    var opts = $.extend({}, defaults, options);
    
    var getScrollTop = function() {
        var ScrollTop = document.body.scrollTop;
        if (ScrollTop == 0) {
            if (window.pageYOffset)
                ScrollTop = window.pageYOffset;
            else
                ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
        }
        return ScrollTop;            
    }
    
    var getViewportHeight = function() {
        var viewportheight;
        // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
        if (typeof window.innerWidth != 'undefined') {
            viewportheight = window.innerHeight
        } 
        // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
        else if (typeof document.documentElement != 'undefined'
             && typeof document.documentElement.clientWidth !=
             'undefined' && document.documentElement.clientWidth != 0)
        {
            viewportheight = document.documentElement.clientHeight
        } 
        // older versions of IE
        else
        {
            viewportheight = document.getElementsByTagName('body')[0].clientHeight
        }
        return viewportheight;
    }    
    
    // For every trigger passed bind our events
    return this.each(function () {
        $this = $(this);
        $this.mouseover(function() {
           // Create our overlay div
            $('body').append('<div class="' + opts.overlayDiv + ' ' + opts.enlargeDiv + '"></div>');
            
            // Get our targets
            var target = $('.' + opts.overlayDiv);
            
            // Set a fallback bind to remove this new target on mouseout
            target.mouseout(function() {
               $(this).remove(); 
            });
            
            var product_target = $(this).parent().parent().parent().find('.' + opts.enlargeDiv);
            
            if (product_target.length == 0) {
                return false;
            }
            
            $(target).html(product_target.html()).fadeIn(opts.fadeInSpeed);
    
            // Calculate our positioning
            var pos_top = ( ($(this).offset().top + ($(this).height() / 2)) - (target.height() / 2) );
            var pos_left = $(this).offset().left + $(this).width() + 25;
            var totalwidth = pos_left + target.width() + 25;
    
            // If our image goes beyond our viewport width or has a class of 'last' flip our offset
            if($(this).parent().hasClass(opts.lastRowClass) || totalwidth > document.body.offsetWidth) {
                pos_left = ($(this).offset().left - target.width()) - 30;
            }

            var totalheight = (pos_top - getScrollTop()) + parseInt(target.height());
            //var totalheight = ((pos_top - getScrollTop()) + ($(this).height() / 2)) - parseInt(taget.height() / 2);
            var windowHeight = getViewportHeight();
        
            // If our image goes beyond our window height
            if(totalheight > windowHeight) {
                var minusval = parseInt(totalheight) - windowHeight; 
                pos_top = pos_top - (minusval + 30);
            }
            
            // If our image is less than the product height, display below
            if (totalheight < target.height()) {
                pos_top = getScrollTop() + 50;
            }
            
            // Set our positional coordinates
            $(target).css('top', pos_top).css('left', pos_left);
        });
        
        $this.mouseout(function() {
            $('.' + opts.overlayDiv).hide().remove();      
        });
    });
};