﻿function InitializeDockProducts(nDockRow) {
    jQuery(function($) {
        var nContainerWidth = 630;
        var oDock = $('#imageListDockRow' + nDockRow);
        var nNumImages = $('img', oDock).length;
        var nImageWidthFull = $('img', oDock).width();
        var nImageHeightFull = $('img', oDock).height();
        
        //=================================================================================================================
        // CODE TO KEEP ALL IMAGE A CONSISTENT SIZE
        /*
        var nImageHeightResized = 110;
        var nImageWidthResized = parseInt((nImageWidthFull * nImageHeightResized) / nImageHeightFull);
        
        // If the image is wide, shrink it down a bit
        if (nImageWidthResized > 80) {
            if (sCurrentProductCategory == "Thins") {
                nImageWidthResized = 96;
            }
            else {
                nImageWidthResized = 80;
            }            
            nImageHeightResized = parseInt((nImageWidthResized * nImageHeightFull) / nImageWidthFull);
        }
        
        var nDistance = nImageWidthResized;
        var nDockWidth = nImageWidthResized * nNumImages;
        
        // jqDock automatically gives left padding equal to the difference in widths divided by 2 since it grows both ways
        var nDockLeftPositionInitial = parseInt((nImageWidthFull - nImageWidthResized) / 2);
        // Therefore, we get our final left position (to be centered) by using the width of the total dock and the initial left position
        var nDockLeftPosition = parseInt((nContainerWidth - nDockWidth)/2) - nDockLeftPositionInitial;
        
        $(oDock).css('left', nDockLeftPosition);
        
        */
        // END CODE
        //======================================================================================================================
        
        
        //======================================================================================================================
        // CODE TO RESIZE IMAGES TO FILL THE HORIZONTAL SPACE
        
        var nImageHeightResized = parseInt(((-65/81)*nImageWidthFull) + (21185/81));
        var nDistance;
        
        if (nNumImages <= 3) nImageHeightResized += 30;
        else if (nNumImages > 6) nImageHeightResized -= 30;
        
        var nImageWidthResized = parseInt((nImageWidthFull * nImageHeightResized) / nImageHeightFull);
        var nDockWidth = nImageWidthResized * nNumImages;
        
        nDistance = nImageWidthResized;
        
        // jqDock automatically gives left padding equal to the difference in widths divided by 2 since it grows both ways
        var nDockLeftPositionInitial = parseInt((nImageWidthFull - nImageWidthResized) / 2);
        // Therefore, we get our final left position (to be centered) by using the width of the total dock and the initial left position
        var nDockLeftPosition = parseInt((nContainerWidth - nDockWidth)/2) - nDockLeftPositionInitial;
        
        $(oDock).css('left', nDockLeftPosition);
        
        // END CODE
        //======================================================================================================================
                
        //apply jqDock to each of the demo menus, setting varying options for each one...
        $(oDock).each(function(i) { //opts updated so as not to use null as 'don't override default' - jQuery v1.2.5 changed extend() to not ignore nulls!
            var opts = { align:        'middle' //[ 'bottom', 'right', 'top' , 'middle', 'left', 'center' ][i] || 'bottom' //default
                       , size:         nImageHeightResized //[  48     ,  48    ,  48   ,  48     ,  36   ,  60      ][i] || 50       //default
                       , distance:     nDistance //[  60     ,  60    ,  60   ,  60     ,  48   ,  80      ][i] || 54       //default
                       , coefficient : 1.0 //[  1.5    ,  1.5   ,  1.5  ,  1      ,  1.5  ,  1.5     ][i] || 1.5      //default
                       , labels:       'bc' //[  true   ,  'mc'  ,  true ,  'br'   ,  true ,  false   ][i] || false    //default
                       , duration:     400 //default
            };
            $(this).jqDock(opts);
        });
    });
}

function InitializeDockProducts2() {
    $(function () { 
        var nMaxNumImages = 10;
        var nMarginOffset = 10;
        var nImageWidthFinalOffset = 58;
        var nImageWidthStart = $('img', '#dock-container').width();
        var nImageHeightStart = $('img', '#dock-container').height();
        var nImageWidthFinal;
        var nImageHeightFinal;
        var nPaddingTop;
        var nDivCopyWidth;
        
        // Set the width of the images. It is based on the total number of images
        var nNumImages = $('img', '#dock-container').length;
        
        // Thins images need to be wider
        if (sCurrentProductCategory == "Thins") nImageWidthFinalOffset = 85;
        
        // Set our values
        nImageWidthFinal = nImageWidthFinalOffset + ((nMaxNumImages - nNumImages) * 5);
        nImageHeightFinal = ((nImageHeightStart * nImageWidthFinal) / nImageWidthStart);
        nPaddingTop = nImageHeightFinal - nMarginOffset;
        nDivCopyWidth = nImageWidthFinal + 30;
        
        // Use the height to adjust the position of the dock.
	    $('.dock-container').css('padding-top', nPaddingTop);
        
        // Use the width to adjust the width of the copy divs
        $('.dock-item div').css('width', nDivCopyWidth);
                
	    // Dock initialize
	    $('#dock').Fisheye(
		    {
			    maxWidth: 30,
			    items: 'a',
			    itemsText: 'div',
			    container: '.dock-container',
			    itemWidth: nImageWidthFinal,
			    proximity: 90,
			    alignment : 'left',
			    valign: 'bottom',
			    halign : 'center',
			    size: 200
		    }
	    );	    
    });
}

function InitializeDockGrains(nDockRow) {
    jQuery(function($) {
        //var nContainerWidth = 630;
        var oDock = $('#imageListDockRow' + nDockRow);
        
        $(oDock).css('left', 70);
                
        //apply jqDock to each of the demo menus, setting varying options for each one...
        $(oDock).each(function(i) { //opts updated so as not to use null as 'don't override default' - jQuery v1.2.5 changed extend() to not ignore nulls!
            var opts = { align:        'middle' //[ 'bottom', 'right', 'top' , 'middle', 'left', 'center' ][i] || 'bottom' //default
                       , size:         70 //[  48     ,  48    ,  48   ,  48     ,  36   ,  60      ][i] || 50       //default
                       , distance:     70 //[  60     ,  60    ,  60   ,  60     ,  48   ,  80      ][i] || 54       //default
                       , coefficient : 1.0 //[  1.5    ,  1.5   ,  1.5  ,  1      ,  1.5  ,  1.5     ][i] || 1.5      //default
                       , labels:       'bc' //[  true   ,  'mc'  ,  true ,  'br'   ,  true ,  false   ][i] || false    //default
                       , duration:     400 //default
            };
            $(this).jqDock(opts);
        });
    });
}

function InitializeDockGrains2() {
    $(function () { 
        var nMaxNumImages = 10;
        var nMarginOffset = 40;
        var nImageWidthFinalOffset = 50;
        var nImageWidthStart = $('img', '#dock-container').width();
        var nImageHeightStart = $('img', '#dock-container').height();
        var nImageWidthFinal;
        var nImageHeightFinal;
        var nPaddingTop;
        var nDivCopyWidth;
        
        // Set the width of the images. It is based on the total number of images
        var nNumImages = $('img', '#dock-container').length;
        
        // Set our values
        nImageWidthFinal = nImageWidthFinalOffset + ((nMaxNumImages - nNumImages) * 5);
        nImageHeightFinal = ((nImageHeightStart * nImageWidthFinal) / nImageWidthStart);
        nPaddingTop = nImageHeightFinal - nMarginOffset;
        nDivCopyWidth = nImageWidthFinal + 50;
        
        // Use the height to adjust the position of the dock.
        $('.dock-container').css('padding-top', nPaddingTop);
        
        // Use the width to adjust the width of the copy divs
        $('.dock-item div').css('width', nDivCopyWidth);
        
	    // Dock initialize
	    $('#dock').Fisheye(
		    {
			    maxWidth: 30,
			    items: 'a',
			    itemsText: 'div',
			    container: '.dock-container',
			    itemWidth: nImageWidthFinal,
			    proximity: 90,
			    alignment : 'left',
			    valign: 'bottom',
			    halign : 'center'
		    }
	    );
    });
}