﻿jQuery(document).ready(function()
{
    // call function to load large alt images and hang mouseovers
    prepAltHover();
    setupQuantityTextChanged();
    if (jQuery("div.sizeChoiceContainer .sizeOptionElement").size() == 0)
        jQuery("#addToCart").addClass("enabled").removeClass("disabled");

});

function prepAltHover()
{
    // hang mouseovers
    jQuery("div.altImageWrapper > div.altImage").bind("mouseenter", function(e)
    {
        altHover(jQuery(this));
    });
    // pre-load large alt images
    var targets = jQuery('div.altImage');
    var data = '';
    targets.each(function()
    {
        var src = jQuery(this).find("img").attr("src");
        src = convertSrc(src);
        data = data + '<div style="background-image: url(' + src + ');">&nbsp;<' + '/div>';
    });
    jQuery('#pdpImageRetainer').html(data);
}

function altHover(source)
{
    var target = "#mainProductImage";
    var src = jQuery(source).find("img").attr("src");
    src = convertSrc(src);
    // var targetImage = document.getElementById('mainProductImage');
    // targetImage.src = src;
    jQuery(target).attr("src", src);
    jQuery(target).src = src;
}

function convertSrc(src)
{
    src = src.replace("//images.footballfanatics.com", "//images.footballfanatics.com/FFImage/thumb.aspx?i=");
    src = src.replace("_tb.jpg", "_xl.jpg");
    src = src + "&w=400";
    src = src.replace("http://", "//");
    return src;
}


// Javascript for the new product zoom.
jQuery(document).ready(function()
{
    jQuery("div.pdpImageContainer > img#mainProductImage").bind("click", function(e)
    {
        zoomClick(this);
    });
    jQuery("div.pdpButtonInsideContainer > a.zoom").bind("click", function(e)
    {
        zoomClick(this);
    });
    jQuery("div.altImageWrapper > div.altImage").bind("click", function(e)
    {
        zoomClick(this);
    });
});

// Shared Zoom Variables
var imageWidthPZ = 600;
var thumbWidthPZ = 60;
function zoomClick(element)
{
    // Variable settings
    var modalOpacity = .50;
    var backgroundOpacityColor = '#000000';

    // Do not edit these variables
    var mainImageLocation = 'img#mainProductImage';
    var mainOutsideFrame = 'body';
    // Use the search box as a was to change settings
    /*
    var inputString = jQuery('div#headerFrameSearchRowOne input.searchText').val();
    var inputString = inputString * 1;
    if (!(isNaN(inputString))) {
    if (inputString < 0) {
    inputString = inputString * -1;
    }
    if (inputString <= 1) {
    modalOpacity = inputString
    }
        
    else {
    if (inputString > 2500)
    {
    inputString = 2500;
    }
    imageWidthPZ = inputString;
    }
    }
    */
    var boxHeight = imageWidthPZ + 30;

    // Get collection of thumbs now so that we can count.
    var thumbSet = jQuery('div.altImage img');

    if (thumbSet.length > 6)
    {
        // Double thumb width, 30px for internal padding, 2px for the border, and 15px for the margin left
        var thumbContainerWidth = (thumbWidthPZ * 2) + 30 + 2 + 15;
        // var thumbContainerWidth = thumbWidthPZ + 20 + 2 + 15;
    }
    else
    {
        // 20px for internal padding, 2px for the border, and 15px for the margin left
        var thumbContainerWidth = thumbWidthPZ + 20 + 2 + 15;
    }

    var boxWidth = imageWidthPZ + thumbContainerWidth;

    var IEmodalOpacity = modalOpacity * 100;
    var mainImageSrc = jQuery(mainImageLocation).attr("src");
    var newWidth = '&w=' + imageWidthPZ;
    mainImageSrc = mainImageSrc.replace("&w=400", newWidth);
    var lpSize = 'scale=size[' + imageWidthPZ + ']';
    mainImageSrc = mainImageSrc.replace("scale=size[400]", lpSize);
    // Check for existance of the zoom container
    if (!(jQuery('div#zoomOutsideContainerJS').hasClass('zoom')))
    {
        // Build a new zoom container if it doesn't exist
        jQuery(mainOutsideFrame).append('<div id="zoomOutsideContainerWrapperJS" class="zoom"></div>');
        jQuery('div#zoomOutsideContainerWrapperJS').append('<div id="zoomOutsideContainerJS" class="zoom closeClick"></div>');
        jQuery('div#zoomOutsideContainerWrapperJS').append('<div class="zoomInsideContainerJS zoom clearfix closeClick"></div>');

    }
    jQuery(mainOutsideFrame).css("position", "relative");
    var frameHeight = jQuery(mainOutsideFrame).outerHeight();
    var frameWidth = jQuery(mainOutsideFrame).outerWidth();
    // Build CSS objects to apply to zoom containers
    var zoomOutsideContainerWrapperJSCSS =
	{
	    'height': frameHeight + 30,
	    'width': frameWidth + 30
	}
    var zoomOutsideContainerJSCSS =
	{
	    'height': frameHeight + 30,
	    'width': frameWidth + 30,
	    'background-color': backgroundOpacityColor,
	    '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + IEmodalOpacity + ')',
	    'filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + IEmodalOpacity + ')',
	    'opacity': modalOpacity,
	    '-moz-opacity': modalOpacity,
	    'filter': 'alpha(opacity=' + IEmodalOpacity + ')'
	}
    var windowHeight = jQuery(window).height();
    var scrollTop = jQuery(window).scrollTop();
    var topOffset = (((windowHeight - boxHeight) / 2) + scrollTop);
    if (topOffset < 0) { topOffset = 0; }
    var horizontalOffset = ((frameWidth - boxWidth) / 2);
    var zoomInsideContainerJSCSS =
	{
	    'top': topOffset,
	    'left': horizontalOffset,
	    'width': boxWidth + 'px'
	}
    var modthumbContainerWidth = thumbContainerWidth - 15;
    var thumbsContainerJSCSS =
	{
	    'width': modthumbContainerWidth + 'px'
	}
    // apply CSS objects
    jQuery('div#zoomOutsideContainerWrapperJS').css(zoomOutsideContainerWrapperJSCSS);
    jQuery('div#zoomOutsideContainerJS').css(zoomOutsideContainerJSCSS);
    // Build HTML for main zoom image
    var imageHTML = '<img src="' + mainImageSrc + '" class="mainZoomImageJS" alt="Zoom Image" width="' + imageWidthPZ + '" height="' + imageWidthPZ + '" />';
    // Build HTML for thumbs sidebar
    if (thumbSet.length > 6)
    {
        var thumbsHTML = '<div class="thumbsContainerJS"><div class="thumbsDoubleBorderContainerJS clearfix"><div class="thumbsCloseButtonJS" onclick="clearZoom();">&nbsp;</div>';
    }
    else
    {
        var thumbsHTML = '<div class="thumbsContainerJS"><div class="thumbsBorderContainerJS"><div class="thumbsCloseButtonJS" onclick="clearZoom();">&nbsp;</div>';
    }
    // Get Thumbs image sources and build thumb html

    if (thumbSet.length > 0)
    {
        thumbSet.each(function()
        {
            var thumbImageTemp = jQuery(this).attr("src");
            thumbImageTemp = thumbImageTemp.replace("_tb.jpg", "_xl.jpg");
            thumbImageTemp = thumbImageTemp.replace("http://", "//");
            thumbImageTemp = thumbImageTemp.replace("//images.footballfanatics.com", "");
            var thumbImageSrc = "//images.footballfanatics.com/FFImage/thumb.aspx?i=" + thumbImageTemp + "&w=" + thumbWidthPZ;
            thumbsHTML = thumbsHTML + '<div class="thumbContainerJS"><img src="' + thumbImageSrc + '" alt="thumb" class="zoomThumb" /></div>';
        });
        thumbsHTML = thumbsHTML + '<p>Mouse over images to enlarge</p></div></div>';
    }
    else
    {
        thumbsHTML = thumbsHTML + '</div></div>';
    }
    // Attach Image HTML and thumbs sidebar HTML
    jQuery('div.zoomInsideContainerJS').empty();
    jQuery('div.zoomInsideContainerJS').append(imageHTML);
    jQuery('div.zoomInsideContainerJS').append(thumbsHTML);
    // Hang on click events on thumbs
    jQuery("img.zoomThumb").bind("mouseenter", function(e)
    {
        changeThumbZoom(this);
    });
    // Hang on click close events
    jQuery('.closeClick').bind("click", function(e)
    {
        clearZoom(this);
    });
    jQuery('.thumbContainerJS').bind("click", function(e)
    {
        return false;
    });
    // apply Image Container CSS
    jQuery('div.thumbsContainerJS').css(thumbsContainerJSCSS);
    jQuery('div.zoomInsideContainerJS').css(zoomInsideContainerJSCSS);

    // Show Zoom Image
    jQuery('div#zoomOutsideContainerWrapperJS').css("display", "block");
    hideSelectsIE6('div#zoomOutsideContainerWrapperJS');
    return false;
}

// Zoom close function
function clearZoom()
{
    // Hide Zoom Containers
    jQuery('div#zoomOutsideContainerWrapperJS').css("display", "none");
    // Restore hidden selects in IE6
    showSelectsIE6();
}

// Zoom change image function
function changeThumbZoom(thumbTarget)
{
    // get thumb src
    var thumbSrc = jQuery(thumbTarget).attr("src");
    // modify thumb src to make it a zoom src
    var thumbWidthFrag = "&w=" + thumbWidthPZ;
    var zoomWidthFrag = "&w=" + imageWidthPZ;
    thumbSrc = thumbSrc.replace(thumbWidthFrag, zoomWidthFrag);
    thumbSrc = thumbSrc.replace("http://", "//");
    // change zoom src
    jQuery('img.mainZoomImageJS').attr('src', thumbSrc);
}

// PDP Hot Market / Drop Ship Message
jQuery(document).ready(function()
{
    jQuery(document).click(function()
    {
        jQuery(".moreInfoMessageText").hide();
        showSelectsIE6();

        if (jQuery("div.IE6 div.playerSelector select").length > 0)
        {
            jQuery("div.playerSelector select").show();
        }

    });
    jQuery("div#pdpProductContainer span.DropShipMoreInfoLink a").click(function(e)
    {
        var parentDiv = jQuery(this).parent().parent();
        var isHotMarket = parentDiv.hasClass("hotMarketMessage");
        var isDropShip = parentDiv.hasClass("dropShipMessage");
        var isCustomized = parentDiv.hasClass("customizedItemMessage");

        var div = jQuery();

        if (isHotMarket)
            div = jQuery("div#HotMarketMessageText");
        else if (isDropShip)
            div = jQuery("div#DropShipMessageText");
        else if (isCustomized)
            div = jQuery("div#CustomizedItemMessageText");

        if (div.length != 0)
        {
            var l = jQuery(this).position().left;
            var t = jQuery(this).position().top;
            div.css({ "top": (t - 5) + "px", "left": (l - 5) + "px" });

            if (jQuery("div.IE6 div.playerSelector select").length > 0)
            {
                jQuery("div.playerSelector select").hide();
            }

            div.show();
            hideSelectsIE6(div);
        }
        
        e.preventDefault();
        return false;
    });
});

// Check sizes to see if completely out of stock, and hide in stock message
jQuery(document).ready(function()
{
    var sizes = jQuery('div.sizeChoiceContainer div.sizeOption');
    var outOfStockSizes = jQuery('div.sizeChoiceContainer div.disabled');
    if ( ( sizes.length == outOfStockSizes.length ) && ( sizes.length != 0 ) )
    {
        // no in stock options, hide in stock message
        jQuery('div.PriceStockContainer div.inStockMessage').css("color", "#ca0000");
        jQuery('div.PriceStockContainer div.inStockMessage').html("Out of Stock");
    }
});

/* Javascript for "Dynamic Custom PDP", aka a custom jersey that uses Liquid Pixels */
var dynamicImageBaseUrl = "";
var dynamicSizesHTML = "";
var dynamicPricesHTML = "";

jQuery(document).ready(function() {

    // check if text present, if so, reload. this can happen after server-side errors occur
    if ( jQuery("div.pdpDynamicCustomProductContainer").hasClass('pdpDynamicCustomProductContainer') )
    {
		if (jQuery("div.pdpDynamicCustomProductContainer div.customOptions input[type=text]:eq(0)").val() != ""
			&& jQuery("div.pdpDynamicCustomProductContainer div.customOptions input[type=text]:eq(1)").val() != "") {
			
			UpdateDynamicData();
		}
    }
	// Move the Error message up.
	jQuery('div.pdpDynamicCustomProductContainer div.pdpRightContainer div.customOptions').after(jQuery("div.pdpDynamicCustomProductContainer div#ui-alert-message"));
	
    jQuery("a.pdpViewJerseyButton").click(function() {
        UpdateDynamicData();
        return false;
    });
    jQuery("div.pdpDynamicCustomProductContainer div.customOptions input[type=text]").change(function() {
        UpdateDynamicData();
        jQuery('div.playerSelector select').val(0);
    });
    jQuery("div.playerSelector select").change(function() {
        var val = jQuery(this).val();
        var parts = val.split('/');
        if (parts[0] != '0') {
            jQuery("div.customOptions input[type=text]:eq(0)").val(parts[1]);
            jQuery("div.customOptions input[type=text]:eq(1)").val(parts[2]);
            UpdateDynamicData();
        }
    });
	jQuery("div.pdpDynamicCustomProductContainer div.customOptions input").keydown(function(event)
	{
		if ((event.keyCode == '13') || (event.keyCode == '27'))
		{
			event.preventDefault();
			UpdateDynamicData();
		}
	});
	var inputArray = dynamicCustomGrabNumberName();
	var numberInput = inputArray[0];
	jQuery(numberInput).keypress(function(event)
	{
		return isNumberKey(event)
	});
	jQuery("#mainProductImage").load(function()
	{
		dynamicCustomImageLoadResponse();
	});
	dynamicSizesHTML = jQuery('div.sizeChoiceContainer').html();
	dynamicPricesHTML = jQuery('div.PriceContainer').html();
});


function UpdateDynamicData() {
    var text1 = jQuery("div.customOptions input[type=text]:eq(0)");
    var text2 = jQuery("div.customOptions input[type=text]:eq(1)");

    var number = text1.val().toUpperCase();
    var name = text2.val().toUpperCase();

    var temp;

    // swap if name comes first
    if (text2.attr("maxlength") == "2") {
        temp = number;
        number = name;
        name = temp;
    }

    if (number == "" || name == "")
        return;
        
    if (number.match(/[^0-9]/g) || name.match(/[^a-zA-Z\s]/g)) {
        showError("", "Please enter only letters and spaces for the Name value, and one or two digits for the Number value.", "ui-alert-message");
        return;
    }

    dynamicImageBaseUrl = jQuery("#data-dynamic-image-base-url").html();

    CheckCustomDataIsValid(number, name);
}

function CheckCustomDataIsValid(number, name) {
    var teamID = jQuery("#data-team-id").html();
    var productID = jQuery("#data-product-id").html();
    var productGuid = jQuery("#data-product-guid").html();
    var imageChain = jQuery("#data-dynamic-image-chain").html();

    var selectedSize = "";

    if (jQuery("div.sizeChoiceContainer div.selected").length == 1)
    {
        selectedSize = jQuery("div.sizeChoiceContainer div.selected").html();
    }

    jQuery.getJSON("/ProductInfoHandler.ashx",
    { action: "checkcustom", teamID: teamID, productID: productID, productGuid: productGuid, v1: number, v2: name },
    function(json)
    {
        if (json.Valid != undefined && json.Valid == true)
        {
            hideError("ui-alert-message");
            var img = jQuery("#mainProductImage");
            var url = dynamicImageBaseUrl + "?set=key[name],value[" + name + "]&set=key[number],value[" + number + "]&call=url[" + imageChain + "]&scale=size[400]&sink";
            if (json.Product != undefined)
            {
                // update sizes
                dynamicCustomUpdateSizes(json.Product.StandardOptions);
                // update price
                dynamicCustomUpdatePrices(json.Product.Prices)
                // alert(json.Product.ImagePath);
                inStockUrl = json.Product.ImagePath.replace("amp;", "");
                // alert(url);
                url = '//images.footballfanatics.com' + inStockUrl;
                // update product ID override hidden field
                jQuery("#productOverride").val(json.Product.ID);
            }
            else
            {
                jQuery('div.sizeChoiceContainer').html(dynamicSizesHTML);
                jQuery('div.PriceStockContainer div.PriceContainer').html(dynamicPricesHTML);

                // clear product ID override hidden field
                jQuery("#productOverride").val("");
            }

            if (selectedSize != "")
            {
                // find size with same name, select it
                jQuery.each(jQuery("div.sizeChoiceContainer div.sizeOption"),
                function(i, item)
                {
                    var el = jQuery(item);
                    if (selectedSize != "" && el.html() === selectedSize && !el.hasClass("disabled"))
                    {
                        el.addClass("selected");
                        selectedSize = "";
                    }
                });
            }

            dynamicCustomImageLoad(img, url);
        } else if (json.Valid != undefined && json.Valid == false)
        {
            // handle invalid input
            if (json.Reason == "forbidden")
            {
                showError("", jQuery("#data-forbidden-text-msg").html(), "ui-alert-message");
            } else if (json.Reason == "player")
            {
                showError("", jQuery("#data-invalid-player-msg").html(), "ui-alert-message");
            } else if (json.Reason == "error")
            {
                showError("", "An error has occurred processing your custom item text. Please try again.", "ui-alert-message");
            } else if (json.Reason == "blank")
            {
                showError("", "Please enter a name and number to preview your item.", "ui-alert-message");
            }
        }
    });
}

function dynamicCustomImageLoad(img, url)
{
	// create indicator HTML
	var loadingIndicatorHTML = '<div id="imageLoadingBGContainer" class="imageLoadingBGContainer"></div><div id="imageLoadingIndicator"><p>Please wait,<br/>Loading..</p></div>';
	// append hidden HTML to body
	if ( !(jQuery('div#imageLoadingBGContainer').hasClass('imageLoadingBGContainer') ) )
	{
		jQuery('div.pdpImageContainer').append(loadingIndicatorHTML);
	}
	// build CSS for elements
    var bgCss = {
      'display' : 'block' }
    var liCss = {
      'left' : '125px',
      'top' : '100px',
      'display' : 'block' }
	// show hidden element
	jQuery('div#imageLoadingBGContainer').css(bgCss);
	jQuery('div#imageLoadingIndicator').css(liCss);
	// change image
	img.attr("src", url);
}

function dynamicCustomImageLoadResponse()
{
	// hide indicator when image loads.
	jQuery('div#imageLoadingBGContainer').css('display', 'none');
	jQuery('div#imageLoadingIndicator').css('display', 'none');
}

function dynamicCustomGrabNumberName()
{
	var number = jQuery("div.pdpDynamicCustomProductContainer div.customOptions input[type=text]:eq(0)");
	var name = jQuery("div.pdpDynamicCustomProductContainer div.customOptions input[type=text]:eq(1)");
	var temp;
	// swap if name comes first
	if ( name.attr("maxlength") == "2")
	{
		temp = number;
		number = name;
		name = temp;
	}
	var inputArray = new Array();
	inputArray[0] = number;
	inputArray[1] = name;
	return inputArray;
}

function dynamicCustomUpdateSizes(optionsData)
{
	var sizesHTML = '';
	jQuery.each(optionsData, function(i, item)
	{
		if (item.IsOutOfStock == true)
		{
			oosClass = ' disabled';
		}
		else
		{
			oosClass = '';
		}
		sizesHTML = sizesHTML + '<div class="sizeOption sizeOptionElement' + oosClass + '" onclick="sizeClick(this, \'' + item.ID + '\', \'' + item.ProductPriceAdjustment + '\', \'\')">' + item.Name + '</div>';
	});
	jQuery('div.sizeChoiceContainer').html(sizesHTML);
}

function dynamicCustomUpdatePrices(priceData)
{
	var priceCount = priceData.length;
	var priceHTML = '';
	var priceName = '';
	if ( !( priceCount == 0 ) )
	{
		switch ( priceCount )
		{
		case 1:
			var priceName = 'regular';
			break;
		case 2:
			var priceName = 'sale';
			break;
		case 3:
			var priceName = 'clearance';
			break;
		default:
			var priceName = 'regular';
			break;
		}
		priceHTML = '<div class="' + priceName + '">';
		var priceTemplate = '<h2 class="regularPrice">\
<span class="regularLabel">Regular </span>\
<span class="label">Price: </span>\
<span class="regularPrice"><FFRegular></span>\
<span class="additionalPrice"></span>\
</h2>\
<h2 class="salePrice">\
<span class="saleLabel">Sale Price: </span>\
<span class="salePrice"><FFSale></span>\
<span class="saleLabel additionalPrice"></span>\
</h2>\
<h2 class="clearancePrice">\
<span class="clearanceLabel">Extra 20% Off:</span>\
<span class="clearancePrice"><FFClearance></span>\
<span class="clearanceLabel additionalPrice"></span>\
</h2>';

		if ( priceData[0].Value != undefined )
		{
			priceTemplate = priceTemplate.replace('<FFRegular>', priceData[0].Value);
		}
		if ( ( priceCount >= 2 ) && ( priceData[1].Value != undefined ) )
		{
			priceTemplate = priceTemplate.replace('<FFSale>', priceData[1].Value);
		}
		if ( ( priceCount >= 3 ) && ( priceData[2].Value != undefined ) )
		{
			priceTemplate = priceTemplate.replace('<FFClearance>', priceData[2].Value);
		}
		priceHTML = priceHTML + priceTemplate;
		priceHTML = priceHTML + '</div>';
		jQuery('div.PriceStockContainer div.PriceContainer').html(priceHTML);
	}
}

var defaultImageUrl = "";

// JS for PDP Share Link Pop Up
jQuery(document).ready(function() {
	jQuery(".pdpSocialNetworkingToggle").click(function() {
		jQuery('div#pdpSocialNetworkingShareDivLayer').toggleClass('display');
		return false;
	});
    /* custom option values support */
    var customSelect = jQuery("div.customOptions select");

    if (customSelect.length > 0)
        UpdateCustomSelectOptions();

    customSelect.change(function() {
        UpdateCustomSelectOptions();        
    });
});

function UpdateCustomSelectOptions()
{
    // build image url
    var imageChain = jQuery("#data-dynamic-image-chain").html();
    var baseurl = jQuery("#data-dynamic-image-base-url").html();

    var parts = [];
    var skipImage = false;

    jQuery("div.customOptions select").each(function (i, item) {
        var attr = jQuery(this).attr("data-key");
        var val = jQuery(this).find("option:selected").attr("value");

        if (!val)
            skipImage = true;

        parts.push("set=key[" + attr + "],value[" + val + "]");
    });

    jQuery("div.customOptions input[type=text]").each(function (i, item) {
        var attr = jQuery(this).attr("data-key");
        var val = jQuery(this).val();
        parts.push("set=key[" + attr + "],value[" + val + "]");
    });

    if (!skipImage) {
        var imgurl = baseurl + "?" + parts.join("&") + "&call=url[" + imageChain + "]&scale=size[400]&sink";

        dynamicCustomImageLoad(jQuery("#mainProductImage"), imgurl);
    }
}

jQuery(document).ready(function() {
    var sizeval = jQuery("#sizeSelect").val();
    if (sizeval) {
        jQuery("div.sizeChoiceContainer div.sizeOption[data-option-id=" + sizeval + "]").click();
    }
});

function AvailableQuantityChanged(available, cartcount, selectedOption, addtocartbtn, hiddenval) {
    var cartmsg = cartcount > 0 ? "(You have " + cartcount + " in your cart already.) " : "";

    if (confirm("Oops! We only have " + available + " of this item in stock. " + cartmsg + "Click OK to add " + available + " to your cart.")) { 
        jQuery('#' + hiddenval).val('false');
        jQuery('#sizeSelect').val(selectedOption);
        //jQuery(document).ready(function() { jQuery('#' + addtocartbtn).click(); });
        jQuery(document).ready(function() { __doPostBack(addtocartbtn, ''); }); // try on load
    } else {
        jQuery('#' + hiddenval).val('true');
    }
}
