var ajaxHelper = {

    run: function run() {

        var self = this;
        var boxNumber = 1;

        var loadedDivs = {};
        var productHtml = getProductHtml();


        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1);
            hash = hashes.split('#');
            if (hash.length > 1) {
                hash = hash[1].split('?');
                if (hash.length > 1) {
                    vars = hash[1].split('&');
                }
            }

            return vars;
        }

        function getUrlVar(varName) {
            var vars = getUrlVars();
            var varValue;
            if (vars.length > 0) {
                for (var i = 0; i < vars.length; i++) {
                    var splited = vars[i].split('=');
                    if ((splited.length == 2) && (splited[0] == varName))
                        varValue = splited[1];
                }
            }
            return varValue;
        }

        $('ul.swatches-list li').live('click', loadProductData);
        $('ul.boxes-list li').live('click', loadProductData);

        $(function () {
            var sku = getUrlVar('sku');
            if (sku)
                loadProductData('', sku);
        });



        function loadProductData(evetnt, hashSKU) {
            if (!hashSKU) {
                sku = $(this).children('a').attr('tabindex');
                var $a = $(this);
                evetnt.preventDefault();
                window.location.hash = '#shades?color=' + $a.attr('title') + '&sku=' + sku;
            }
            else {
                sku = hashSKU;
                var $a = $('ul.swatches-list li a[tabindex="' + sku + '"]');

            }
            var $loader = $('.product-loader');

            if (loadedDivs[sku] != true) {

                $('div.product-info').removeClass('visible');
                $('div.product-info').addClass('hidden');
                $loader.removeClass('hidden');
                $loader.addClass('visible');
                var subbrand = $('ul.filter').attr('title');
                $.getJSON('/api/product.aspx?action=getSingle&sku=' + sku + '&subBrand=' + subbrand, function (data) {
                    var jsonData = data;
                    loadedDivs[jsonData.SKU] = true;

                    var cloudDiv = $('div.product' + jsonData.SKU);

                    cloudDiv.append(productHtml);

                    var productImg = cloudDiv.find('.product-big');
                    var title = cloudDiv.find('.title');
                    var info = cloudDiv.find('.info');
                    var swatchPrev = cloudDiv.find('.swatch-prev');
                    var startingShade1 = cloudDiv.find('.product-pics ul li:eq(0) img');
                    var startingShade2 = cloudDiv.find('.product-pics ul li:eq(1) img');
                    var startingShade3 = cloudDiv.find('.product-pics ul li:eq(2) img');
                    var resultShade1 = cloudDiv.find('.product-pics ul li:eq(3) img');
                    var resultShade2 = cloudDiv.find('.product-pics ul li:eq(4) img');
                    var resultShade3 = cloudDiv.find('.product-pics ul li:eq(5) img');
                    var disclaimer = cloudDiv.find('.add');
                    var start = cloudDiv.find('.start');
                    var result = cloudDiv.find('.result');

                    var images = [productImg, swatchPrev, startingShade1, startingShade2, startingShade3, resultShade1, resultShade2, resultShade3];
                    var imagesLoaded = 0;

                    function checkLoaded() {
                        imagesLoaded++;
                        if (imagesLoaded == images.length) {
                            $a.trigger('click-loaded');
                            $loader.addClass('hidden');
                            $loader.removeClass('visible');
                        }
                        return;
                    }

                    jQuery.each(images, function (index) {
                        $(this).load(checkLoaded).error(checkLoaded);
                    });

                    if (jsonData.Disclaimer != "")
                        disclaimer.text(jsonData.Disclaimer);

                    if (jsonData.ProductPhoto == "")
                        imagesLoaded++;
                    productImg.attr('src', jsonData.ProductPhoto);
                    productImg.attr('alt', jsonData.ProductPhotoAlt);

                    title.html(jsonData.Collection + '<br />' + jsonData.SubBrand);

                    info.html(jsonData.ShadeNumber + '<br />' + jsonData.ColorName);

                    if (jsonData.EnlargedShade == "")
                        imagesLoaded++;
                    swatchPrev.attr('src', jsonData.EnlargedShade);
                    swatchPrev.attr('alt', jsonData.EnlargedShadeAlt);


                    if (jsonData.StartShade1 == "") {
                        startingShade1.hide();
                        imagesLoaded++;
                    }
                    startingShade1.attr('src', jsonData.StartShade1);
                    startingShade1.attr('alt', jsonData.StartShade1alt);

                    if (jsonData.StartShade2 == "") {
                        startingShade2.hide();
                        imagesLoaded++;
                    }
                    startingShade2.attr('src', jsonData.StartShade2);
                    startingShade2.attr('alt', jsonData.StartShade2alt);

                    if (jsonData.StartShade3 == "") {
                        startingShade3.hide();
                        imagesLoaded++;
                    }
                    startingShade3.attr('src', jsonData.StartShade3);
                    startingShade3.attr('alt', jsonData.StartShade3alt);

                    if (jsonData.ResultShade1 == "") {
                        resultShade1.hide();
                        imagesLoaded++;
                    }
                    resultShade1.attr('src', jsonData.ResultShade1);
                    resultShade1.attr('alt', jsonData.ResultShade1alt);

                    if (jsonData.ResultShade2 == "") {
                        resultShade2.hide();
                        imagesLoaded++;
                    }
                    resultShade2.attr('src', jsonData.ResultShade2);
                    resultShade2.attr('alt', jsonData.ResultShade2alt);

                    if (jsonData.ResultShade3 == "") {
                        resultShade3.hide();
                        imagesLoaded++;
                    }
                    resultShade3.attr('src', jsonData.ResultShade3);
                    resultShade3.attr('alt', jsonData.ResultShade3alt);

                    if ((!jsonData.StartShade1 || jsonData.StartShade1 == "")
                        && (!jsonData.StartShade2 || jsonData.StartShade2 == "")
                        && (!jsonData.StartShade3 || jsonData.StartShade3 == "")
                        && (!jsonData.ResultShade1 || jsonData.ResultShade1 == "")
                        && (!jsonData.ResultShade2 || jsonData.ResultShade2 == "")
                        && (!jsonData.ResultShade3 || jsonData.ResultShade3 == "")
                    ) {
                        start.hide();
                        result.hide();
                    }
                    else {
                        start.text(jsonData.StartingShadeTitle);
                        result.text(jsonData.ResultingShadeTitle);
                    }


                });
            } else { $a.trigger('click-loaded'); }

        }

        function getProductHtml() {
            return '<img src="" alt="" class="product-big" />' +
                        '<img src="/i/bg/shadow.png" alt="" class="shadow " />' +
                        '<p class="title"></p>' +
                        '<p class="info"></p>' +
                        '<div class="product-pics">' +
                            '<img src="" alt="" class="swatch-prev" />' +
                            '<div class="clear"></div>' +
                            '<p class="start"></p>' +
                            '<p class="result"></p>' +
                            '<ul>' +
                                '<li><img src="" alt="" /></li>' +
                                '<li><img src="" alt="" /></li>' +
                                '<li><img src="" alt="" /></li>' +
                                '<li><img src="" alt="" /></li>' +
                                '<li><img src="" alt="" /></li>' +
                                '<li><img src="" alt="" /></li>' +
                            '</ul>' +
                            '<div class="clear"></div>' +
                            '<p class="add"></p>' +
                        '</div>';

        }
    }
};