// Enables binding objects to callbacks.
if (!Function.prototype.bind) {
    Function.prototype.bind = function() {
        if (arguments.length < 2 && arguments[0] === undefined)
            return this;

        var toArray = function(iterable) {
            if (!iterable) return [];
            if (iterable.toArray) return iterable.toArray();
            var length = iterable.length
            var results = new Array(length);
            while (length--)
                results[length] = iterable[length];
            return results;
        }

        var __method = this;
        var args = toArray(arguments);
        var object = args.shift();

        return function() {
            return __method.apply(object, args.concat(toArray(arguments)));
        }
    }
}

// Hides one element and shows another.
// This is used for java / no java functionality so
// a java reliant control can be shown if java is enabled.
var HideAndSeek = {
    idHide: null,
    idShow: null,

    play: function() {

        if (this.idHide != null)
            $j("#" + HideAndSeek.idHide).css('display', 'none');

        if (this.idShow != null)
            $j("#" + HideAndSeek.idShow).css('display', 'block');
    }
}

document.getElementsByClassName = function(cl) {
    var retnode = [];
    var myclass = new RegExp('\\b' + cl + '\\b');
    var elem = this.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
        var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
    }
    return retnode;
};



var splashClassArray = new Array('product1x1', 'product2x2_right');
var activeSplash = new Array();

function toggleSplash(setActive, setClass) {
    for (i = 0; i < splashClassArray.length; i++) {
        if (activeSplash = document.getElementsByClassName(splashClassArray[i] + '_mo')) {
            for (j = 0; j < activeSplash.length; j++) {
                activeSplash[j].className = splashClassArray[i];
            }
        }
    }
    if (setActive) {
        setActive.className = setClass;
    }
}

function toggleDisplay(showId, hideId) {
    document.getElementById(showId).style.display = 'block';
    document.getElementById(hideId).style.display = 'none';
    return false;
}

function toggleClass(divId, className1, className2) {
    if (document.getElementById(divId).className == className1) {
        document.getElementById(divId).className = className2
    } else {
        document.getElementById(divId).className = className1
    }
    return false;
}

var AgeSlider = {
    pixelArray: [0, 35, 51, 67, 83, 99, 115, 131, 147, 163, 179, 195, 211, 227, 239],

    init: function(defaultText, ageMonthFrom, ageMonthTo) {
        $j(document).ready(function() {
            var handles = $j("#slider-age").find(".ui-slider-handle");
            if (ageMonthFrom > 0 || ageMonthTo > 0) {
                $j("#slider-age").parent().removeClass("slider_unused");
                handles[0].innerHTML = (ageMonthFrom > 144) ? 12 : (ageMonthFrom == 6) ? "&frac12;" : ageMonthFrom / 12;
                handles[1].innerHTML = (ageMonthTo > 144) ? 12 : (ageMonthTo == 6) ? "&frac12;" : ageMonthTo / 12;
            }
            else {
                handles[0].innerHTML = 0;
                handles[1].innerHTML = defaultText;
            }
        });
    },
	
	// Set slider handles to desired to/from age. This will not trigger a search.
	set: function(fromAgeMonths, toAgeMonths) {
		var fromText = (fromAgeMonths > 144) ? "12+" : (fromAgeMonths == 6) ? "&frac12;" : fromAgeMonths / 12;
		var toText   = (toAgeMonths > 144) ? "12+" : (toAgeMonths == 6) ? "&frac12;" : toAgeMonths / 12;
		
		var handles = $j("#slider-age").find(".ui-slider-handle");
		
		handles[0].innerHTML = fromText;
		handles[1].innerHTML = toText;
		$j("#slider-age").parent().removeClass("slider_unused");
		
		var fromPixel = AgeSlider.convertValueToPixel(fromAgeMonths);
		var toPixel = AgeSlider.convertValueToPixel(toAgeMonths);
        $j("#slider-age").slider({values: [fromPixel, toPixel]});  		
	},

    convertPixelToValue: function(pixel) {
        if (pixel <= this.pixelArray[1])
            return 0;
        if (pixel <= this.pixelArray[2])
            return 0.5;
        if (pixel <= this.pixelArray[3])
            return 1;
        if (pixel <= this.pixelArray[4])
            return 2;
        if (pixel <= this.pixelArray[5])
            return 3;
        if (pixel <= this.pixelArray[6])
            return 4;
        if (pixel <= this.pixelArray[7])
            return 5;
        if (pixel <= this.pixelArray[8])
            return 6;
        if (pixel <= this.pixelArray[9])
            return 7;
        if (pixel <= this.pixelArray[10])
            return 8;
        if (pixel <= this.pixelArray[11])
            return 9;
        if (pixel <= this.pixelArray[12])
            return 10;
        if (pixel <= this.pixelArray[13])
            return 11;
        if (pixel <= this.pixelArray[14])
            return 12;

        //12+
        return 200;
    },

    convertValueToPixel: function(value) {
        if (value <= 0)
            return 0;
        if (value <= 6)
            return 43;
        if (value <= 12)
            return 59;
        if (value <= 24)
            return 75;
        if (value <= 36)
            return 91;
        if (value <= 48)
            return 107;
        if (value <= 60)
            return 123;
        if (value <= 72)
            return 139;
        if (value <= 84)
            return 155;
        if (value <= 96)
            return 171;
        if (value <= 108)
            return 187;
        if (value <= 120)
            return 203;
        if (value <= 132)
            return 219;
        if (value <= 144)
            return 239;

        return 240;
    }
}

var PriceSlider = {
    priceArray: null,
    pixelArray: [0, 32, 76, 120, 164, 209],

    init: function(defaultText, priceFrom, priceTo) {
        $j(document).ready(function() {
            var handles = $j("#slider-price").find(".ui-slider-handle");
            if (priceFrom > 0 || priceTo > 0) {
                handles[0].innerHTML = priceFrom;
                handles[1].innerHTML = (priceTo > this.priceArray[4]) ? this.priceArray[4] + "+" : priceTo;
                $j("#slider-price").parent().removeClass("slider_unused");
            }
            else {
                handles[0].innerHTML = 0;
                handles[1].innerHTML = defaultText;
            }
        });
    },
	
	set: function(fromPrice, toPrice) {
		var handles = $j("#slider-price").find(".ui-slider-handle");
		
		handles[0].innerHTML = fromPrice;
		handles[1].innerHTML = toPrice;
		$j("#slider-price").parent().removeClass("slider_unused");
		
		var fromPixel = PriceSlider.convertValueToPixel(fromPrice);
		var toPixel = PriceSlider.convertValueToPixel(toPrice);
        $j("#slider-price").slider({values: [fromPixel, toPixel]});  		
	},

    convertPixelToValue: function(pixel) {
        if (pixel <= this.pixelArray[1])
            return this.priceArray[0];
        if (pixel <= this.pixelArray[2])
            return Math.round(this.priceArray[0] + (this.priceArray[1] - this.priceArray[0]) * (pixel - this.pixelArray[1]) / 44.0);
        if (pixel <= this.pixelArray[3])
            return Math.round(this.priceArray[1] + (this.priceArray[2] - this.priceArray[1]) * (pixel - this.pixelArray[2]) / 44.0);
        if (pixel <= this.pixelArray[4])
            return Math.round(this.priceArray[2] + (this.priceArray[3] - this.priceArray[2]) * (pixel - this.pixelArray[3]) / 44.0);
        if (pixel <= this.pixelArray[5])
            return Math.round(this.priceArray[3] + (this.priceArray[4] - this.priceArray[3]) * (pixel - this.pixelArray[4]) / 45.0);

        //no max
        return 1000000;
    },

    convertValueToPixel: function(value) {
        if (value <= this.priceArray[0])
            return 0;
        if (value <= this.priceArray[1])
            return Math.round(this.pixelArray[1] + (this.pixelArray[1] - this.pixelArray[0]) * (value - this.priceArray[0]) / (this.priceArray[1] - this.priceArray[0]));
        if (value <= this.priceArray[2])
            return Math.round(this.pixelArray[2] + (this.pixelArray[2] - this.pixelArray[1]) * (value - this.priceArray[1]) / (this.priceArray[2] - this.priceArray[1]));
        if (value <= this.priceArray[3])
            return Math.round(this.pixelArray[3] + (this.pixelArray[3] - this.pixelArray[2]) * (value - this.priceArray[2]) / (this.priceArray[3] - this.priceArray[2]));
        if (value <= this.priceArray[4])
            return Math.round(this.pixelArray[4] + (this.pixelArray[4] - this.pixelArray[3]) * (value - this.priceArray[3]) / (this.priceArray[4] - this.priceArray[3]));

        return 210;
    }
}

var SearchBox = {
    id: null,
    defaultText: null,
    productsTitle: null,
    pageTitle: null,
    storeTitle: null,
    telephoneText: null,
    seeAllText: null,
    searchService: null,
    timeoutId: null,
    hasResult: false,
    defaultPicture: null,
	defaultShopPicture: null,
    searchResultUrl: null,
    divId: null,
    closedTopImage: null,
    openedTopImage: null,

    init: function() {
        // Set default text.
        var box = $j("#" + SearchBox.id);
        if (box.val() == "")
            box.val(this.defaultText);

        // Initialize search service.
        this.searchService = new SearchServiceFE();
        this.searchService.ajax.success = this.searchResultReceived;

        // Hide typeahead dropdown if anything but
        // the typeahead dropdown or the search textbox is clicked.
        $j(document).click(function(e) {
            var target;
            if (!e) var e = window.event;
            if (e.target) target = e.target;
            else if (e.srcElement) target = e.srcElement;
            if (target.nodeType == 3) // defeat Safari bug
                target = target.parentNode;

            if (target.id != "suggestion-content" && target.id != SearchBox.id) {
                // Set default text.
                if ($j("#" + SearchBox.id).val().replace(/\s/g, "") == "")
                    $j("#" + SearchBox.id).val(SearchBox.defaultText);

                // Close result box.
                $j("#" + SearchBox.divId).removeClass("search_active").addClass("search");
                SearchBox.setSearchBoxClosedImage();
            }
        });

        // Open typeahead dropdown if there are results when 
        // the search textbox is brought to focus.
        $j("#" + SearchBox.id).focus(function() {
            // Clear default text.
            if ($j(this).val() == SearchBox.defaultText)
                $j(this).val("");

            // Open result box.
            if (SearchBox.hasResult == true) {
                $j("#" + SearchBox.divId).removeClass("search").addClass("search_active");
                SearchBox.setSearchBoxOpenedImage();
            }
        });

        // Start timer after keyup.
        $j("#" + SearchBox.id).keyup(function(e) {

            // ignore if Home, End or arrow keys (shift or non-shift)
            if ((e.keyCode >= 35 && e.keyCode <= 40)||(e.keyCode == 16))
            {
                return;
            }

            if (SearchBox.timeoutId != null)
            {
                clearTimeout(SearchBox.timeoutId);
                SearchBox.timeoutId = null;
            }

            SearchBox.timeoutId = setTimeout("SearchBox.doSearch()", 300);
        });

        var searchEvent = function() {
            var query = $j("#" + SearchBox.id).val();
            if (query.replace(/\s/g, "") == "") return false;
            window.location = SearchBox.searchResultUrl + query;
            return false;
        }

        // Enter check.
        $j("#" + SearchBox.id).keypress(function(e) {
            switch (e.keyCode) {
                case 13:
                    return searchEvent();
                default:
                    return true;
            }
        });

        $j("#search .button").click(function() {
            searchEvent();
        });
    },

    // Performs the typeahead search.
    doSearch: function() {
        var searchQuery = $j("#" + SearchBox.id).val();
        if (searchQuery.replace(/\s/g, "") == "") {

            if (SearchBox.hasResult == true) {
                var contentContainer = $j("#suggestion-content");
                contentContainer.html("");
                SearchBox.hasResult = false;
                $j("#" + SearchBox.divId).removeClass("search_active").addClass("search");
                SearchBox.setSearchBoxClosedImage();
            }
            return;
        }
        SearchBox.searchService.GetSuggestions(encodeURIComponent(searchQuery));
    },

    // Renders the typeahead result retrieved from the server.
    searchResultReceived: function(result) {
        SearchBox.hasResult = false;
        var contentContainer = $j("#suggestion-content");
        contentContainer.html("");

        if (result.Products.length > 0 || result.Page || result.Store) {
            SearchBox.hasResult = true;

            // Products.
            if (result.Products.length > 0) {
                contentContainer.append(SearchBox.getHeadlineHtml(SearchBox.productsTitle));

                for (var i = 0; i < result.Products.length; i++) {
                    var product = result.Products[i];

                    contentContainer.append(SearchBox.getItemHtml
                    (
                        product.Title,
                        product.Teaser,
                        (product.ThumbnailImage == null || product.ThumbnailImage == '') ? SearchBox.defaultPicture : product.ThumbnailImage,
                        product.Price,
                        product.Url,
                        product.SearchableId,
                        $j("#" + SearchBox.id).val()
                    ));
                }

                //                if (!result.Page && !result.Store)
                //                    contentContainer.append("<div class=\"divider\"></div>");
            }

            // Sitecore page.
            if (result.Page) {
                contentContainer.append(SearchBox.getHeadlineHtml(SearchBox.pageTitle));

                contentContainer.append(SearchBox.getItemHtml
                    (
                        result.Page.Title,
                        result.Page.Teaser,
                        (result.Page.Image == null || result.Page.Image == '') ? SearchBox.defaultPicture : result.Page.Image,
                        null,
                        result.Page.Uri,
                        null,
                        null
                    ));

                //                if (!result.Store)
                //                    contentContainer.append("<div class=\"divider\"></div>");
            }

            // Shop.
            if (result.Store) {

                var titleAddress = "";

                for (var i = 0; i < result.Store.AddressLines.length; i++) {
                    if (i > 0) titleAddress += ", ";
                    titleAddress += result.Store.AddressLines[i];
                }

                var title = SearchBox.storeTitle + " - " + result.Store.Name;

                var bodyAddress = "";

                for (var i = 0; i < result.Store.AddressLines.length; i++) {
                    bodyAddress += result.Store.AddressLines[i] + "<br />";
                }

                var body = bodyAddress + SearchBox.telephoneText + ": " + result.Store.PhoneNumber;

                //contentContainer.append(SearchBox.getHeadlineHtml(title.toUpperCase()));

                contentContainer.append(SearchBox.getItemHtml
                    (
                        title.toUpperCase(),
                        "",
                        (result.Store.FacadeImageId == null || result.Store.FacadeImageId == '') ? ((SearchBox.defaultShopPicture == null || SearchBox.defaultShopPicture == '') ? SearchBox.defaultPicture : SearchBox.defaultShopPicture) : result.Store.FacadeImageId,
                        null,
                        result.Store.Url,
                        null,
                        null
                    ));

                //                if (result.Products.length > 0)
                //                    contentContainer.append("<div class=\"divider\"></div>");
            }

            if (result.Products.length > 0) {
                // "See all" button.
                var buttonPlaceholder = $j("<div></div>");
                buttonPlaceholder.addClass("submit");
                buttonPlaceholder.append("<div class=\"overlay\"><a href=\"" + result.FullResultUrl + "\"><img alt=\"\" src=\"/Resources/TRU/Images/Main/transpixel.gif\" /></a></div>");
                buttonPlaceholder.append("<div class=\"text\">" + SearchBox.seeAllText + "</div>");
                contentContainer.append(buttonPlaceholder);
            }

            contentContainer.append("<div class=\"rightclear\"></div>");

            $j("#" + SearchBox.divId).removeClass("search").addClass("search_active");
            SearchBox.setSearchBoxOpenedImage();
        }
        else {
            $j("#" + SearchBox.divId).removeClass("search_active").addClass("search");
            SearchBox.setSearchBoxClosedImage();
        }
    },

    getHeadlineHtml: function(headline) {
        var div = $j("<div></div>");
        div.addClass("headline");

        if (headline.length > 40)
            headline = headline.substring(0, 40) + "...";

        //div.html(headline);

        return div;
    },

    getItemHtml: function(title, body, image, price, url, searchableId, searchPhrase) {
        var topContainer = $j("<div></div>");
        topContainer.addClass("item");
        //topContainer.attr("onmouseout", "this.className='item';");
        topContainer.mouseout(function() { this.className = 'item'; });
        //topContainer.attr("onmouseover", "this.className='item_mo';");
        topContainer.mouseover(function() {
            //Must remove onblur event. Otherwise click on item link wont redirect to productpage.
            $j("#" + SearchBox.id).removeAttr("onblur");
            this.className = 'item_mo';
        });
        //topContainer.attr("onclick", "window.location  = '" + url + "'");
        topContainer.click(function() { window.location = url; });

        var container = $j("<div></div>");
        container.addClass("item_content");

        // Image
        var imageDiv = $j("<div></div>");
        imageDiv.addClass("image");
        var imageAnchor = $j("<a></a>");
        imageAnchor.attr("href", url);
        var imageElm = $j("<img/>");
        imageElm.attr("src", image == null || image == "" ? SearchBox.defaultPicture : image);
        imageElm.attr("alt", "");
        imageAnchor.append(imageElm);
        imageDiv.append(imageAnchor);

        // Headline
        var headlineDiv = $j("<div></div>");
        headlineDiv.addClass("item_top");

        if (title != null) {
            var headlineAnchor = $j("<a></a>");
            headlineAnchor.attr("href", url);
            //headlineAnchor.html(title.length > 22 ? title.substring(0, 22) + "..." : title);
            headlineDiv.append(headlineAnchor);
        }

        // Price
        var priceDiv = $j("<div></div>");
        priceDiv.addClass("price");

        if (price != null) {
            var priceAnchor = $j("<a></a>");
            priceAnchor.attr("href", url);
            priceAnchor.html(price);
            priceDiv.append(priceAnchor);
        }

        // Text
        var textDiv = $j("<div></div>");
        textDiv.addClass("text");
        var textAnchor = $j("<a></a>");
        textAnchor.attr("href", url);
        //textAnchor.html(body.length > 60 ? body.substring(0, 60) + "..." : body);
        textAnchor.html(title.length > 60 ? title.substring(0, 60) + "..." : title);
        textDiv.append(textAnchor);


        var descriptionDiv = $j("<div></div>");
        descriptionDiv.addClass("description");
        descriptionDiv.append(textDiv);
        descriptionDiv.append(priceDiv);

        var clearDiv = $j("<div></div>");
        clearDiv.addClass("leftclear");

        var itemBottom = $j("<div></div>");
        itemBottom.addClass("item_bottom");

        container.append(imageDiv);
        container.append(descriptionDiv);
        container.append(clearDiv);

        topContainer.append(headlineDiv);
        topContainer.append(container);
        topContainer.append(itemBottom);

        return topContainer;
    },

    setSearchBoxClosedImage: function() {
        $j("#" + SearchBox.divId)
            .css("background-image", "url('" + SearchBox.closedTopImage + "')")
            .attr('class', 'search');
    },

    setSearchBoxOpenedImage: function() {
        $j("#" + SearchBox.divId)
            .css("background-image", "url('" + SearchBox.openedTopImage + "')")
            .attr('class', 'search_active');
    }
}

var CommonHelper = {
    // Tests if an object is an Array. Not tested 
    // in all browsers so may need some modification.
    isArray: function(obj) {
        if (obj == null) return false;
        return typeof (obj) == "object" && obj.length && typeof (obj.length) == "number";
        // Alternatives.
        //return obj instanceof Array.
    },
    // Converts the date text returned from the
    // server to a JavaScript Date object.
    toJavaScriptDate: function(obj) {
        if (CommonHelper.isArray(obj)) {
            var arr = new Array();
            for (var i = 0; i < obj.length; i++)
                arr.push(CommonHelper.toJavaScriptDate(obj[i]));
            return arr;
        }
        if (obj == null) return null;
        obj = obj.replace('/Date(', '');
        obj = obj.replace(')/', '');
        var index = obj.indexOf("+");
        if (index == -1)
            index = obj.indexOf("-");
        obj = obj.substring(0, index);
        var date = new Date();
        date.setTime(obj);
        return date;
    },
    // Converts a JavaScript Date object to a
    // string that can be parsed by the server.
    fromJavaScriptDate: function(obj) {
        if (CommonHelper.isArray(obj)) {
            var arr = new Array();
            for (var i = 0; i < obj.length; i++)
                arr.push(CommonHelper.fromJavaScriptDate(obj[i]));
            return arr;
        }
        return "/Date(" + obj.getTime() + "+0)/";
    },

    getParameterByName: function(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
            return "";
        else
            return decodeURIComponent(results[1].replace(/\+/g, " "));
    },

    HTMLencode: function escapeHTML(str) {
        var div = document.createElement('div');
        var text = document.createTextNode(str);
        div.appendChild(text);
        return div.innerHTML;
    }
}

var TelevisionSearch = {
    searchService: null,
    dropdownTaxonomyPrefix: null,
    dropdownDefaultTitle: null,

    gender: null,
    ageMonthFrom: null,
    ageMonthTo: null,
    fromPrice: null,
    toPrice: null,
    brand: null,
    sort: null,
    noResultImageId: null,

    init: function() {
        // Initialize search service.
        this.searchService = new SearchServiceFE();
        this.searchService.ajax.success = this.searchResultReceived;
    },

    //genderCheck, 0 = none, 1 = male, 2 = female, 3 = both
    genderCheck: function(box, value) {
        if (box.checked)
            this.gender += value;
        else
            this.gender -= value;
        this.doSearch();
    },

    // Performs the typeahead search.
    doSearch: function(searchableId) {
        if (!searchableId)
            searchableId = null;

        if (this.searchService == null)
            this.init();

        //put up loading images
        var contentContainer = $j("#televisionsearch_products");
        contentContainer.children(".product2x2_right").children("img").attr("src", "/Resources/TRU/Images/Main/ajax-loader.gif");

        this.searchService.GetTelevisionSearchResult(this.gender, this.ageMonthFrom, this.ageMonthTo, this.fromPrice, this.toPrice, this.brand, encodeURIComponent(this.dropdownTaxonomyPrefix), encodeURIComponent(this.dropdownDefaultTitle), searchableId, this.sort, this.noResultImageId);
    },

    searchResultReceived: function(result) {
        if (result != null && result.Products != null && result.Products.length > 0) {
            var contentContainer = $j("#televisionsearch_products");
            contentContainer.html('<div class="overlay"><img src="/Resources/TRU/Images/Main/transpixel.gif" alt="" /></div>');

            for (var i = 0; i < result.Products.length; i++) {
                var product = result.Products[i];

                contentContainer.append(TelevisionSearch.renderProduct(product));
            }

            TelevisionSearch.updateFacets(result.FacetList);
        }
    },

    updateFacets: function(facets) {
        var container = $j("#television_search_brandlist");
        if (container == null)
            return;

        container.html('');

        if (facets == null || facets.length == 0)
            return;

        //For each facet item, render a drop down
        for (var i = 0; i < facets.length; i++) {
            var facet = facets[i];
            var rootCategory = facet.FacetItems[0].Value;

            for (var j = 0; j < facet.FacetItems.length; j++) {
                var facetItem = facet.FacetItems[j];

                var itemDiv = $j('<div></div>');
                itemDiv.mouseover(function() {
                    $j(this).removeClass('item');
                    $j(this).addClass('item_mo');
                });
                itemDiv.mouseout(function() {
                    $j(this).removeClass('item_mo');
                    $j(this).addClass('item');
                });
                itemDiv.addClass("item");
                itemDiv.html(facetItem.Text);

                if (facetItem.Selected) {
                    itemDiv.addClass("selected");
                }

                (function(value, selected, root) {
                    itemDiv.click(function() {
                        TelevisionSearch.brand = null;

                        //Add if it's not a base (non-selected) category
                        var newValue = selected ? root : value;
                        if (newValue.split("%7c").length >= 2)
                            TelevisionSearch.brand = newValue;

                        TelevisionSearch.doSearch();
                    });
                })(facetItem.Value, facetItem.Selected, rootCategory);

                container.append(itemDiv);
            };
        }
    },

    renderProduct: function(product) {
        //Create elements
        var container = $j("<div></div>");
        container.addClass(product.Class);
        container.mouseover(function() {
            toggleSplash(this, product.Class + "_mo");
        });
        if (product.Class == "product2x2_right") {
            container.click(function() {
                window.location = product.Url;
            });
        }
        else {
            container.click(function() {
                TelevisionSearch.doSearch(product.SearchableId);
            });
        }


        var overlay = $j("<div></div>");
        overlay.addClass("overlay");

        var transImage = $j("<img />");
        transImage.attr("src", "/Resources/TRU/Images/Main/transpixel.gif");
        transImage.attr("alt", product.Title);

        var overlayMo = $j("<div></div>");
        overlayMo.addClass("overlay_mo");
        overlayMo.mouseout(function() {
            toggleSplash();
        });

        var splash = $j("<div></div>");
        splash.addClass("splash");

        var splashType = $j("<div></div>");
        splashType.addClass(product.SplashClass);

        var splashContent = $j("<div></div>");
        splashContent.addClass("content");

        var title = $j("<div></div>");
        title.addClass("headline");
        title.append(product.Title);

        var price = $j("<div></div>");
        price.addClass("price");
        price.append(product.Price);
        
        var discount = $j(product.DiscountBasketText);

        var image = $j("<img />");
        image.attr("src", product.Image);
        image.attr("alt", product.Title);

        //Setup structure
        container.append(
            overlay.append(
                transImage
            )
        )
        .append(
            overlayMo.append(
                splash.append(
                    splashType.append(
                        splashContent.append(
                            title
                        )
                        .append(
                            price
                        )
                    )
                    .append(
                        discount
                    )
                )
            )
        )
        .append(
            image
        );

        return container;
    }
}


var Search = {
    //Service
    searchService: null,

    //Texts
    showText: null,
    resultType: null,
    readMore: null,

    //SearchContextSettings
    ageMonthFrom: null,
    ageMonthTo: null,
    breadcrumbTaxonomy: null,
    categories: null,
    freeText: null,
    gender: null,
    numberOfRows: null,
    pageNumber: null,
    priceFrom: null,
    priceTo: null,
    sort: null,
    searchableId: null,
    findRelatedProducts: null,
    showPaging: null,

    //SearchType
    searchFunction: null,
    itemClass: null,

    //Helper Functions
    init: function() {
        // Initialize search service.
        if (this.searchService == null) {
            this.searchService = new SearchServiceFE();
            this.searchService.ajax.success = this.searchResultReceived;
        }
        if (Search.pageNumber == null) {
            Search.pageNumber = 0;
        }
        if (Search.numberOfRows == null) {
            Search.numberOfRows = 12;
        }
        if (Search.freeText == null) {
            Search.freeText = CommonHelper.getParameterByName("q");
        }
    },
	// Search for products.
    doSearch: function() {
        this.init();
        this.searchFunction = function() { Search.doSearch(); };
        var sId = null;
        if (this.findRelatedProducts && this.searchableId != null && this.searchableId != '')
            sId = this.searchableId;
				
		PersistSearch.PersistProductSearch(this.pageNumber, this.numberOfRows, encodeURIComponent(this.freeText), this.sort, this.gender, this.ageMonthFrom, this.ageMonthTo, this.priceFrom, this.priceTo, this.categories, ContextItemId, this.breadcrumbTaxonomy, sId);     
		this.searchService.GetTRUSearchResult(this.pageNumber, this.numberOfRows, encodeURIComponent(this.freeText), this.sort, this.gender, this.ageMonthFrom, this.ageMonthTo, this.priceFrom, this.priceTo, this.categories, ContextItemId, this.breadcrumbTaxonomy, sId);
    },
	// Same as doSearch only it does not persist search and it has to manually set search controls.
    doPersistedSearch: function() {
        this.init();
        this.searchFunction = function() { Search.doSearch(); };
        var sId = null;
        if (this.findRelatedProducts && this.searchableId != null && this.searchableId != '')
            sId = this.searchableId;
			
		if (this.priceFrom != null && this.priceTo != null) {
			PriceSlider.set(this.priceFrom, this.priceTo);
		}		
		
		if (this.ageMonthFrom != null && this.ageMonthTo != null) {
		
		AgeSlider.set(this.ageMonthFrom,this.ageMonthTo);
		}
		
		if (Search.gender != null) {
			SearchBar.setGender(Search.gender);
		}
			
		this.searchService.GetTRUSearchResult(this.pageNumber, this.numberOfRows, encodeURIComponent(this.freeText), this.sort, this.gender, this.ageMonthFrom, this.ageMonthTo, this.priceFrom, this.priceTo, this.categories, ContextItemId, this.breadcrumbTaxonomy, sId);
    },
    doShopSearch: function() {
        this.init();
        this.searchFunction = function() { Search.doShopSearch(); };
		PersistSearch.PersistShopSearch(encodeURIComponent(Search.freeText), Search.pageNumber, Search.numberOfRows);
        this.searchService.TRUPerformShopSearchAsProductEntities(encodeURIComponent(Search.freeText), Search.pageNumber, Search.numberOfRows);
    },
	// Same as doShopSearch only it does not persist search.
	doPersistedShopSearch: function() {
        this.init();
        this.searchFunction = function() { Search.doShopSearch(); };
        this.searchService.TRUPerformShopSearchAsProductEntities(encodeURIComponent(Search.freeText), Search.pageNumber, Search.numberOfRows);		
	},
    doSitecoreSearch: function() {
        this.init();
        this.searchFunction = function() { Search.doSitecoreSearch(); };
		PersistSearch.PersistSitecoreSearch(encodeURIComponent(Search.freeText), Search.pageNumber, Search.numberOfRows);
        this.searchService.TRUPerformSitecoreSearchAsProductEntities(encodeURIComponent(Search.freeText), Search.pageNumber, Search.numberOfRows);
    },
	// Same as doSitecoreSearch only it does not persist search.
	doPersistedSitecoreSearch: function() {
        this.init();
        this.searchFunction = function() { Search.doSitecoreSearch(); };
        this.searchService.TRUPerformSitecoreSearchAsProductEntities(encodeURIComponent(Search.freeText), Search.pageNumber, Search.numberOfRows);	
	},
	
    clearSort: function() {
        this.sort = new Array();
    },
    setSort: function(newSort) {
        if (this.sort == null) {
            this.sort = new Array();
        }
        this.sort.push(newSort);
    },
    clearCategories: function() {
        this.categories = new Array();
    },
    setCategory: function(category) {
        if (this.categories == null) {
            this.categories = new Array();
        }
        this.categories.push(category);
    },
    setNumberOfRows: function(number) {
        if (number != null && number != '' && number > 0) {
            this.numberOfRows = number;
        }
    },

    //Rendering functions
    searchResultReceived: function(result) {
        var contentContainer = $j("#searchResultItems");
        contentContainer.html('<div class="iefix"><img src="/Resources/TRU/Images/Main/transpixel.gif" alt="" /></div>');

        if (result != null && result.Products != null && result.Products.length > 0) {
            for (var i = 0; i < result.Products.length; i++) {
                var product = result.Products[i];

                contentContainer.append(Search.renderItem(product));
            }
            contentContainer.append('<div class="leftclear"></div>');
            contentContainer.append(Search.renderPaging(result.NumberOfElements));
            SearchBar.updateFacets(result.FacetList);
        }
        else {
            //ajax loader?
            contentContainer.html('');
        }
    },
    renderItem: function(item) {
        var container = $j("<div></div>");
        container.addClass(Search.itemClass);

        //add frame
        var framediv = $j("<div></div>");
        framediv.addClass("frame");
        var framelink = $j("<a></a>");
        framelink.attr("href", item.Url);
        var frameimage = $j("<img />");
        frameimage.attr("src", "/Resources/TRU/Images/Main/transpixel.gif");
        frameimage.attr("alt", "");
        container.append(
            framediv.append(
                framelink.append(
                    frameimage
                )
            )
        );

        //add image 
        var imagediv = $j("<div></div>");
        imagediv.addClass("image");
        var imagelink = $j("<a></a>");
        imagelink.attr("href", item.Url);
        var productimage = $j("<img />");
        productimage.attr("src", item.Image);
        productimage.attr("alt", item.Title);
        container.append(
            imagediv.append(
                imagelink.append(
                    productimage
                )
            )
        );

        //add price (if there is one)
        if (item.Price != null && item.Price != '') {
            var pricediv = $j("<div></div>");
            pricediv.addClass("price");
            pricediv.html(item.Price);

            container.append(pricediv);
        }

        //add description
        var descriptiondiv = $j("<div></div>");
        descriptiondiv.addClass("description");
        var headlinediv = $j("<div></div>");
        headlinediv.addClass("headline");
        var headlinelink = $j("<a></a>");
        headlinelink.attr("href", item.Url);
        headlinelink.html(item.Title);
        var textdiv = $j("<div></div>");
        textdiv.addClass("text");
        var textlink = $j("<a></a>");
        textlink.attr("href", item.Url);
        textlink.html(item.Teaser);
        container.append(
            descriptiondiv.append(
                headlinediv.append(
                    headlinelink
                )
            )
            .append(
                textdiv.append(
                    textlink
                )
            )
        );

        //add readmore link
        var readmorediv = $j("<div></div>");
        readmorediv.addClass("link");
        var readmorelink = $j("<a></a>");
        readmorelink.attr("href", item.Url);
        readmorelink.html(this.readMore);

        container.append(
            readmorediv.append(
                readmorelink
            )
        );

        return container;
    },
    renderPaging: function(totalSearchHits) {

        if (totalSearchHits <= 12 || !this.showPaging) {
            return;
        }

        var PageOneSet = false;

        if (Search.pageNumber == null || Search.pageNumber == '') {
            Search.pageNumber = 0;
        }
        if (Search.numberOfRows == null || Search.numberOfRows == '') {
            Search.numberOfRows = 12;
        }

        var numberOfPages = Math.ceil(totalSearchHits / Search.numberOfRows);

        var pagingdiv = $j("<div></div>");
        pagingdiv.addClass("paging");

        /*numberOfRows buttons START*/
        var leftsidediv = $j("<div></div>");
        leftsidediv.addClass("leftside");

        var showtext = $j("<div><div>");
        showtext.addClass("text");
        showtext.html(Search.showText);
        leftsidediv.append(showtext);

        var choices = new Array();
        if (totalSearchHits > 12) {
            choices.push(12);
        }
        if (totalSearchHits > 24) {
            choices.push(24);
        }
        if (totalSearchHits > 36) {
            choices.push(36);
        }

        for (var i = 0; i < choices.length; i++) {
            leftsidediv.append(Search.renderNumberOfRowsButton(choices[i], Search.numberOfRows == choices[i]));
        }

        var resulttypetext = $j("<div><div>");
        resulttypetext.addClass("text");
        resulttypetext.html(Search.resultType);
        leftsidediv.append(resulttypetext);
        pagingdiv.append(leftsidediv);
        /*numberOfRows buttons END*/

        /*Number buttons START*/
        var rightsidediv = $j("<div></div>");
        rightsidediv.addClass("rightside");

        if (numberOfPages > 1) {
            //Add backbutton if we're past page 0
            if (Search.pageNumber > 0) {
                rightsidediv.append(Search.renderPagerPrevNextButton(true));
            }

            //Add buttons 1-3 up till current page
            var renderButton = 0;
            while (renderButton < Search.pageNumber && renderButton < 3) {
                rightsidediv.append(Search.renderPagerNumberButton(renderButton, false));
                renderButton++;
            }

            //Add '...' button if there's a gap between 3 and current
            if (Search.pageNumber > 3)
                rightsidediv.append(Search.renderDotsButton());

            //Add current button
            rightsidediv.append(Search.renderPagerNumberButton(Search.pageNumber, true));

            //Add up to 3 buttons after current button
            renderButton = Search.pageNumber + 1;
            while (renderButton < numberOfPages && renderButton <= Search.pageNumber + 3) {
                rightsidediv.append(Search.renderPagerNumberButton(renderButton, false));
                renderButton++;
            }

            //Add '...' button if there's more buttons
            if (renderButton + 1 < numberOfPages)
                rightsidediv.append(Search.renderDotsButton());

            //Add forwardbutton if there are more pages
            if (Search.pageNumber + 1 < numberOfPages) {
                rightsidediv.append(Search.renderPagerPrevNextButton(false));
            }
        }
        /*Number buttons END*/

        pagingdiv.append(rightsidediv);
        pagingdiv.append('<div class="clearboth"></div>');

        return pagingdiv;
    },
    //render paging helpers
    renderNumberOfRowsButton: function(number, active) {
        var buttondiv = $j("<div></div>");
        if (active) {
            buttondiv.addClass("button_active");
        }
        else {
            buttondiv.addClass("button");
            buttondiv.click(function() {
                Search.numberOfRows = number;
                Search.pageNumber = 0;
                Search.searchFunction();
            });
        }

        var overlaydiv = $j("<div></div>");
        overlaydiv.addClass("overlay");

        overlayimage = $j("<img />");
        overlayimage.attr("src", "/Resources/TRU/Images/Main/transpixel.gif");
        overlayimage.attr("alt", "");

        var textdiv = $j("<div></div>");
        textdiv.addClass("text");
        textdiv.html(number);

        buttondiv.append(
            overlaydiv.append(
                overlayimage
            )
        )
        .append(
            textdiv
        );

        return buttondiv;
    },
    renderPagerPrevNextButton: function(isprev) {
        var buttonclass = isprev ? "prev" : "next";
        var pagenumber = isprev ? Search.pageNumber - 1 : Search.pageNumber + 1;

        var buttondiv = $j('<div style="cursor: pointer;"></div>');
        buttondiv.addClass(buttonclass);
        buttondiv.click(function() {
            Search.pageNumber = pagenumber;
            window.scrollTo(0, 0);
            Search.searchFunction();
        });

        var link = $j("<a></a>");

        var overlayimage = $j("<img />");
        overlayimage.attr("src", "/Resources/TRU/Images/Main/transpixel.gif");
        overlayimage.attr("alt", "");

        buttondiv.append(
            link.append(
                overlayimage
            )
        );

        return buttondiv;
    },
    renderPagerNumberButton: function(number, active) {
        var buttonclass = active ? "page_active" : "page";

        var buttondiv = $j('<div style="cursor: pointer;"></div>');
        buttondiv.addClass(buttonclass);
        if (!active) {
            buttondiv.click(function() {
                Search.pageNumber = number;
                window.scrollTo(0, 0);
                Search.searchFunction();
            });
        }

        var overlaydiv = $j("<div></div>");
        overlaydiv.addClass("overlay");

        var link = $j("<a></a>");

        var overlayimage = $j("<img />");
        overlayimage.attr("src", "/Resources/TRU/Images/Main/transpixel.gif");
        overlayimage.attr("alt", "");

        var textdiv = $j("<div></div>");
        textdiv.addClass("text");
        textdiv.html(number + 1);

        buttondiv.append(
            overlaydiv.append(
                link.append(
                    overlayimage
                )
            )
        )
        .append(
            textdiv
        );

        return buttondiv;
    },
    renderDotsButton: function() {
        var buttondiv = $j('<div style="cursor: default;"></div>');
        buttondiv.addClass("page");

        var overlaydiv = $j("<div></div>");
        overlaydiv.addClass("overlay");

        var link = $j("<a></a>");

        var overlayimage = $j("<img />");
        overlayimage.attr("src", "/Resources/TRU/Images/Main/transpixel.gif");
        overlayimage.attr("alt", "");

        var textdiv = $j("<div></div>");
        textdiv.addClass("text");
        textdiv.html("...");

        buttondiv.append(
            overlaydiv.append(
                link.append(
                    overlayimage
                )
            )
        )
        .append(
            textdiv
        );

        return buttondiv;
    }
}

var SearchBar = {
    brandboxId: null,
    brandContainer: null,
    categoryboxId: null,
    categoryContainer: null,
	chkbx_gender_boy_id: null,
	chkbx_gender_girl_id: null,
	

    //genderCheck, 0 = none, 1 = male, 2 = female, 3 = both
    genderCheck: function(box, value) {
	//	alert("gender check");
        if (box.checked)
            Search.gender += value;
        else
            Search.gender -= value;
        Search.searchFunction();
    },
	
	setGender: function(value) {
		
		Search.gender = value;
		
		if (value == 1 || value==3) {
			$j("#"+SearchBar.chkbx_gender_boy_id).attr('checked', true);
		}
		else {
			$j("#"+SearchBar.chkbx_gender_boy_id).attr('checked', false);
		}

		if (value == 2 || value == 3) {
			$j("#"+SearchBar.chkbx_gender_girl_id).attr('checked', true);
		}
		else {
			$j("#"+SearchBar.chkbx_gender_girl_id).attr('checked', false);
		}			
	},

    updateFacets: function(facets) {
        if (this.categoryContainer == null && this.categoryboxId != null) {
            this.categoryContainer = $j('#' + this.categoryboxId);
        }
        if (this.categoryContainer != null) {
            this.categoryContainer.find(".select").remove();
            this.categoryContainer.find(".select_active").remove();
        }

        if (this.brandContainer == null && this.brandboxId != null) {
            this.brandContainer = $j('#' + this.brandboxId);
        }
        if (this.brandContainer != null) {
            this.brandContainer.find(".select").remove();
            this.brandContainer.find(".select_active").remove();
        }

        if (facets == null || facets.length == 0)
            return;

        //For each facet item, render a drop down
        for (var i = 0; i < facets.length; i++) {
            var facet = facets[i];
            var rootCategory = facet.FacetItems[0].Value;

            if (facet.FacetItems == null || facet.FacetItems.length == 0)
                continue;

            if (facet.FacetType == null || facet.FacetType == "")
                continue;

            var container;

            if (facet.FacetType == "brand")
                container = this.brandContainer
            else
                container = this.categoryContainer

            if (container == null)
                continue;

            var id = "facet" + i;

            var selectDiv = $j("<div></div>");
            selectDiv.addClass("select");
            selectDiv.attr("id", id);

            var topDiv = $j("<div></div>");
            topDiv.addClass("top");

            var overlayDiv = $j("<div></div>");
            overlayDiv.addClass("overlay");
            (function(oid) {
                overlayDiv.click(function() {
                    toggleClass(oid, 'select_active', 'select');
                });
            })(id);

            var image = $j("<img />");
            image.attr("alt", "");
            image.attr("src", "/Resources/TRU/Images/Main/transpixel.gif");

            var textDiv = $j("<div></div>");
            textDiv.addClass("text");
            textDiv.attr("id", id + "_selected");
            textDiv.html(facet.FacetName);

            var dropdownDiv = $j("<div></div>");
            dropdownDiv.addClass("dropdown");

            var contentDiv = $j("<div></div>");
            contentDiv.addClass("content");

            for (var j = 0; j < facet.FacetItems.length; j++) {
                var facetItem = facet.FacetItems[j];

                var itemDiv = $j('<div></div>');
                itemDiv.mouseover(function() {
                    $j(this).removeClass('item');
                    $j(this).addClass('item_mo');
                });
                itemDiv.mouseout(function() {
                    $j(this).removeClass('item_mo');
                    $j(this).addClass('item');
                });
                itemDiv.addClass("item");
                itemDiv.html(facetItem.Text);

                if (facetItem.Selected) {
                    itemDiv.addClass("selected");
                    textDiv.html(facetItem.Text);
                }

                (function(value, selected, root) {
                    itemDiv.click(function() {
                        SearchBar.removeCategoryPrefix(value);

                        //Add if it's not a base (non-selected) category
                        var newValue = selected ? root : value;
                        if (newValue.split("%7c").length >= 2)
                            Search.setCategory(newValue);

                        Search.pageNumber = 0;
                        Search.doSearch();
                    });
                })(facetItem.Value, facetItem.Selected, rootCategory);

                contentDiv.append(itemDiv);
            };

            var bottomDiv = $j("<div></div>");
            bottomDiv.addClass("bottom");

            selectDiv.append(
                topDiv.append(
                    overlayDiv.append(
                        image
                    )
                ).append(
                    textDiv
                )
            ).append(
                dropdownDiv.append(
                    contentDiv
                ).append(
                    bottomDiv
                )
            );

            container.append(
                selectDiv
            );
        }
    },

    removeCategoryPrefix: function(category) {
        if (Search.categories != null && category != null) {
            var categoryPrefix = category.split('%7c')[0] + "%7c";
            for (var i = 0; i < Search.categories.length; i++) {
                if (Search.categories[i].substring(0, categoryPrefix.length) == categoryPrefix)
                    Search.categories.splice(i, 1);
            }
        }
    }

}


/*****************************
* layerDark, fadeout options *
*****************************/

var layerDark = {
    layer: null,
    boxId: null,
    scrollheight: null,

    init: function(id) {
        if (id)
            this.boxId = id;
        if (this.layer == null) {
            var div = $j('<div id="layerdark"></div>');
            div.click(function() { layerDark.hide(); });
            var docheight = $j(document).height();
            div.height(docheight);
            $j(document.body).append(div);
            this.layer = $j("#layerdark");
        }
        else if (this.layer.height != $j(document).height()) {
            var docheight = $j(document).height();
            this.layer.height(docheight);
        }
    },

    show: function(id) {
        var itemToShow = $j(id)
        if (itemToShow) {
            this.init(id);
            itemToShow.css("display", "block");
            this.layer.css("display", "block");
        }
    },

    hide: function() {
        this.init();
        this.layer.css("display", "none");

        if (this.boxId) {
            var itemToHide = $j(this.boxId)
            if (itemToHide)
                itemToHide.css("display", "none");
        }
    }
}

var GoogleMap = {

    map: null,
    geocoder: null,
    container: null,
    initialZoomLevel: null,
    initialLatitude: null,
    initialLongitude: null,
    initialAddress: null,
    markers: null,
    infowindowCache: new Object(),
    addressNotFoundText: null,
    customPopup: null,
    searchForMarker: false,

    callbacks: {
        getInfowindowHtml: null,
        change: null
    },

    load: function() {
        $j(window).load(function() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=GoogleMap.initialize";
            $j(document.body).append(script);
        });
    },

    initialize: function() {

        this.geocoder = new google.maps.Geocoder();

        // Initialize google maps function.
        var googleMapInit = function(point) {
            var myOptions = {
                zoom: GoogleMap.initialZoomLevel,
                center: point,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            GoogleMap.map = new google.maps.Map(GoogleMap.container, myOptions);

            // Prioritize the initial bounds for address lookups.
            google.maps.event.addListener(GoogleMap.map, 'tilesloaded', function() {
                GoogleMap.initialBounds = GoogleMap.map.getBounds();
                google.maps.event.clearListeners(GoogleMap.map, 'tilesloaded');
            });

            GoogleMap.drawMarkers();

            CustomPopup.toOverlaySubclass();

            google.maps.event.addListener(GoogleMap.map, 'dragend', GoogleMap.change);
            google.maps.event.addListener(GoogleMap.map, 'zoom_changed', GoogleMap.zoomChange);
        }

        // Create map using initial latitude and longitude.
        if (this.initialAddress.replace(/\s/g, "") == "") {
            googleMapInit(new google.maps.LatLng(this.initialLatitude, this.initialLongitude));
        }
        // Create map using initial address.
        else {
            var callback = function(point) {
                googleMapInit(point);
            }
            GoogleMap.search(GoogleMap.initialAddress, callback);
        }
    },

    change: function() {

        if (GoogleMap.callbacks.change)
            GoogleMap.callbacks.change();
    },

    zoomChange: function() {

        google.maps.event.addListener(GoogleMap.map, 'tilesloaded', GoogleMap.tilesLoaded);
    },

    tilesLoaded: function() {

        google.maps.event.clearListeners(GoogleMap.map, 'tilesloaded');

        if (GoogleMap.searchForMarker == true) {

            var zoom = GoogleMap.map.getZoom();

            var zoomFound = false;

            var bounds = GoogleMap.map.getBounds();

            for (var i = 0; i < GoogleMap.markers.length; i++) {

                var latLng = new google.maps.LatLng(GoogleMap.markers[i].lat, GoogleMap.markers[i].lng);

                if (bounds.contains(latLng)) {

                    zoomFound = true;

                    break;
                }
            }

            if (zoomFound != true) {

                zoom--;

                if (zoom == 0) {

                    GoogleMap.searchForMarker = false;
                }
                else {

                    GoogleMap.map.setZoom(zoom);
                }
            }
            else {

                GoogleMap.searchForMarker = false;
            }
        }

        if (GoogleMap.searchForMarker == false) {

            GoogleMap.change();
        }
    },

    search: function(address, callback) {

        if (address.replace(/\s/g, "") == "") return;

        this.geocoder.geocode({ 'address': address, 'bounds': GoogleMap.initialBounds }, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {

                GoogleMap.searchForMarker = true;

                if (callback) {

                    callback(results[0].geometry.location);
                }
                else {

                    GoogleMap.map.setCenter(results[0].geometry.location);

                    if (results[0].geometry.bounds) {

                        GoogleMap.map.fitBounds(results[0].geometry.bounds);
                    }
                    else {

                        google.maps.event.addListener(GoogleMap.map, 'tilesloaded', GoogleMap.tilesLoaded);
                    }
                }
            } else {

                if (GoogleMap.addressNotFoundText)
                    alert(GoogleMap.addressNotFoundText);
            }
        });
    },

    drawMarkers: function() {

        //var infowindow = new google.maps.InfoWindow();

        for (var i = 0; i < GoogleMap.markers.length; i++) {
            var marker = new google.maps.Marker({
                map: GoogleMap.map,
                position: new google.maps.LatLng(GoogleMap.markers[i].lat, GoogleMap.markers[i].lng),
                icon: GoogleMap.markers[i].icon,
                title: GoogleMap.markers[i].title
            });

            google.maps.event.addListener(marker, 'click', (function(marker, id) {
                return function() {
                    if (GoogleMap.infowindowCache[id]) {
                        //infowindow.setContent(GoogleMap.infowindowCache[id]);
                        //infowindow.open(GoogleMap.map, marker);
                        if (GoogleMap.customPopup)
                            GoogleMap.customPopup.setMap(null);

                        GoogleMap.customPopup = new CustomPopup(marker.getPosition(), GoogleMap.map, GoogleMap.infowindowCache[id]);
                    }
                    else {
                        var callback = function(html) {
                            GoogleMap.infowindowCache[id] = html;
                            //infowindow.setContent(html);
                            //infowindow.open(GoogleMap.map, marker);

                            if (GoogleMap.customPopup)
                                GoogleMap.customPopup.setMap(null);

                            GoogleMap.customPopup = new CustomPopup(marker.getPosition(), GoogleMap.map, html);
                        }

                        if (GoogleMap.callbacks.getInfowindowHtml)
                            GoogleMap.callbacks.getInfowindowHtml(id, callback);
                    }
                }
            })(marker, GoogleMap.markers[i].id));
        }
    },

    showMap: function() {
        var container = $j(GoogleMap.container);
        $j(container.children()[1]).hide();
        $j(container.children()[0]).show();
    },

    getVisibleMarkers: function() {
        var bounds = GoogleMap.map.getBounds();
        var markers = new Array();
        for (var i = 0; i < GoogleMap.markers.length; i++) {
            var latLng = new google.maps.LatLng(GoogleMap.markers[i].lat, GoogleMap.markers[i].lng);
            if (bounds.contains(latLng)) {
                markers.push(GoogleMap.markers[i]);
            }
        }
        return markers;
    },

    setZoomAndCenter: function(lat, lng) {
        GoogleMap.map.setCenter(new google.maps.LatLng(lat, lng));
        GoogleMap.map.setZoom(FindShopHandler.zoomFromMenu);
    },

    print: function() {
        var container = $j(GoogleMap.container);

        var staticImgDiv;

        if (container.children().length == 1) {
            staticImgDiv = $j("<div></div>");
            staticImgDiv.css("text-align", "center");
            container.append(staticImgDiv);
        }
        else {
            staticImgDiv = $j(container.children()[1]);
            staticImgDiv.show();
        }

        $j(container.children()[0]).hide();

        var center = GoogleMap.map.getCenter();
        var zoom = GoogleMap.map.getZoom();
        var maptype = GoogleMap.map.mapTypeId;
        var markers = GoogleMap.getVisibleMarkers();

        var markersString = "";
        var maxMarkers = 50;
        var length = markers.length > maxMarkers ? maxMarkers : markers.length;

        for (var i = 0; i < length; i++) {
            markersString += "|" + markers[i].lat + "," + markers[i].lng;
        }

        if (markersString != "") markersString = "&markers=icon:" + FindShopHandler.currentSiteUrl + FindShopHandler.currentMarkerIcon + markersString;

        var url = "http://maps.google.com/maps/api/staticmap?" +
                "center=" + center +
                "&zoom=" + zoom +
                "&size=640x600" +
                "&maptype=" + maptype +
                markersString +
                "&sensor=false";

        staticImgDiv.html("<img alt=\"\" src=\"" + url + "\" />");

        window.print();

        setTimeout("GoogleMap.showMap();", 1000);
    }
}



// Handles shop finding logic.
var FindShopHandler = {
    texts: {
        defaultAddressInput: null,
        defaultPostalCodeInput: null,
        openingHours: null,
        phoneNumber: null,
        moreInfo: null,
        monday: null,
        tuesday: null,
        wednesday: null,
        thursday: null,
        friday: null,
        saturday: null,
        sunday: null,
        pageSizeTitle: null,
        pageSizeShowAll: null,
        shopdetailWithProductSearch: null,
        shopdetailWithProductSearchFew: null,
        shopdetailWithProductSearchVariant: null,
        productName: null,
        email: null,
        shopmanagertitle: null
    },

    inputs: {
        address: null,
        postalcode: null,
        searchbutton: null
    },

    pager: {
        pageSize: 20,
        pageNumber: 1,
        pageSizes: [20, 60, 100]
    },

    renderPopupLink: null,
    localCity: null,
    zoomThreshold: null,
    zoomFromMenu: null,
    searchService: null,
    currentMarkerIcon: null,
    currentSiteUrl: null,
    productSearchableId: null,
    productSkuId: null,
    numbersOfDays: null,

    init: function() {
        GoogleMap.callbacks.getInfowindowHtml = FindShopHandler.getShopInfo;
        GoogleMap.callbacks.change = FindShopHandler.doSearch;

        $j("#localshops_search").click(function() {
            GoogleMap.search(FindShopHandler.localCity);
        });

        this.searchService = new SearchServiceFE();
        this.searchService.ajax.success = this.renderSearchResult;
    },

    clickTrigger: function() {
        FindShopHandler.inputs.searchbutton.trigger("click");
    },

    getShopInfo: function(id, callback) {
        var service = new RetailShopServiceFE();

        service.ajax.success = function(shop) {
            if (shop) {
                var overlay = $j("<div></div>");
                overlay.addClass("overlay");

                overlay.append("<div class=\"top\"></div>");

                var popup = $j("<div></div>");
                popup.addClass("content");

                // Add close button
                var closeDiv = $j("<div></div>");
                closeDiv.addClass("close");
                var closeButton = $j("<a></a>");
                closeButton.click(function() {
                    $j(this).parent().parent().parent().css('visibility', 'hidden');
                });
                closeButton.append("<img alt=\"\" src=\"" + RootResourceFolder + "/Images/Main/gmap_overlay_closebutton.png\"/>");
                closeDiv.append(closeButton);
                popup.append(closeDiv);

                if (shop.QueriedProductStockCount > 0) {
                    var stock = "";
                    if (shop.QueriedProductBuyableItemIsVariant) {
                        stock = FindShopHandler.texts.shopdetailWithProductSearchVariant;
                    }
                    else {
                        stock = FindShopHandler.texts.shopdetailWithProductSearch;
                    }
                    stock = stock.replace("[producttitle]", FindShopHandler.texts.productName)
                    popup.append("<div class=\"address\">" + stock + "</div>");
                }

                // Address
                var address = "";

                for (var i = 0; i < shop.AddressLines.length; i++)
                    address += shop.AddressLines[i] + "<br />";

                address += FindShopHandler.texts.phoneNumber + " " + shop.PhoneNumber + "<br />";

                popup.append("<div class=\"address\">" + address + "</div>");

                var days = 7;
				
                // Shop hours.
                for (var i = 0; i < shop.Hours.length; i++) {
                    var hours = shop.Hours[i];

                    popup.append("<div class=\"openleft\">" + FindShopHandler.texts[hours.Day] + "</div>");
                    popup.append("<div class=\"opendate\">" + hours.Date + "</div>");
                    popup.append("<div class=\"openright\">" + hours.OpeningTime + " - " + hours.ClosingTime + "</div>");

                }

                popup.append("<div class=\"leftclear\"></div>");

                overlay.append(popup);
                overlay.append("<div class=\"bottom\"></div>");

                callback(overlay[0]);
            }
        }

        service.GetRetailShop(id, FindShopHandler.productSkuId);
    },

    doSearch: function() {

        if (!FindShopHandler.zoomThreshold) return;

        var zoom = GoogleMap.map.getZoom();

        if (zoom >= FindShopHandler.zoomThreshold) {

            var ne = GoogleMap.map.getBounds().getNorthEast();
            var sw = GoogleMap.map.getBounds().getSouthWest();


            var bounds = new Array();
            bounds.push(ne.lat());
            bounds.push(ne.lng());
            bounds.push(sw.lat());
            bounds.push(sw.lng());

            FindShopHandler.searchService.GetRetailShops(bounds, FindShopHandler.pager.pageNumber, FindShopHandler.pager.pageSize, FindShopHandler.productSearchableId, FindShopHandler.productSkuId);
        }
        else {
            var container = $j("#shop_searchresult").html("");
        }
    },

    renderSearchResult: function(result) {

        var container = $j("#shop_searchresult").html("");

        if (result.RetailStores.length > 0) {

            var container = $j("#shop_searchresult");
            container.append("<div class=\"top\"></div>");

            for (var i = 0; i < result.RetailStores.length; i++) {

                var shop = result.RetailStores[i];

                var innerContent = $j("<div class=\"content\"></div>");

                // Headline, phonenumber.
                var headline = "";

                innerContent.append("<div class=\"headline\">" + headline + "</div>");
                innerContent.append("<div class=\"frame\"></div>");
                innerContent.append("<div class=\"storeimage\"><img alt=\"\" height=\"200px\" width=\"220px\" src=\"" + shop.FacadeImageId + "\"></div>");

                var infoContent = $j("<div class=\"info\"></div>");

                var thisweekContent = $j("<div class=\"thisweek\"></div>");

                for (var j = 0; j < shop.Hours.length; j++) {

                    var hours = shop.Hours[j];

                    thisweekContent.append("<div class=\"openleft\">" + FindShopHandler.texts[hours.Day] + "</div>");
                    thisweekContent.append("<div class=\"opendate\">" + hours.Date + "</div>");
                    thisweekContent.append("<div class=\"openright\">" + hours.OpeningTime + " - " + hours.ClosingTime + "</div>");
                    thisweekContent.append("<div class=\"leftclear\"></div>");
                }

                infoContent.append(thisweekContent);

                var nextweekContent = $j("<div class=\"nextweek\"></div>");

                for (var j = 0; j < shop.HoursNextWeek.length; j++) {

                    var hours = shop.HoursNextWeek[j];

                    nextweekContent.append("<div class=\"openleft\">" + FindShopHandler.texts[hours.Day] + "</div>");
                    nextweekContent.append("<div class=\"opendate\">" + hours.Date + "</div>");
                    nextweekContent.append("<div class=\"openright\">" + hours.OpeningTime + " - " + hours.ClosingTime + "</div>");
                    nextweekContent.append("<div class=\"leftclear\"></div>");
                }

                var address = "";

                for (var j = 0; j < shop.AddressLines.length; j++) {
                    if (j > 0) address += ", ";
                    address += shop.AddressLines[j];
                }

                var manager = $j("<div class=\"manager\">" + FindShopHandler.texts.shopmanagertitle + ":<br/>" + shop.StoreManagerName + "<br/>" + "<a href=\"" + shop.StoreManagerEmail + "\">" + FindShopHandler.texts.email + "</div>");

                infoContent.append("<div class=\"address\">" + address + "<br/>" + FindShopHandler.texts.phoneNumber + " " + shop.PhoneNumber + "</div>");
                infoContent.append(thisweekContent);
                infoContent.append(nextweekContent);
                infoContent.append("<div class=\"leftclear\"></div>");
                if (shop.StoreManagerName != null && shop.StoreManagerEmail != null)
                    infoContent.append(manager);

                innerContent.append(infoContent);
                innerContent.append("<div class=\"leftclear\"></div>");
                container.append(innerContent);
            }
            container.append("<div class=\"bottom\"></div>");

            //            var pagingContainer = $j("<div class=\"paging\" id=\"shop_paging\"></div>");

            //            // Render left side of paging control.
            //            var pagingLeft = $j("<div class=\"left\"></div>");
            //            pagingLeft.append("<div class=\"text\">" + FindShopHandler.texts.pageSizeTitle + "</div>");

            //            for (var i = 0; i < FindShopHandler.pager.pageSizes.length; i++) {

            //                var size = FindShopHandler.pager.pageSizes[i];

            //                pagingLeft.append(FindShopHandler.renderPageSizeElement(size));
            //            }

            //            var pagingRight = $j("<div class=\"right\"></div>");

            //            if (result.NumberOfElements > result.RetailStores.length) {
            //                if (FindShopHandler.pager.pageNumber > 1) {
            //                    var prevButton = $j("<div class=\"navbutton\"><img alt=\"\" src=\"" + RootResourceFolder + "/Images/Main/productsbox_paging_button_prev.png\" /></div>");

            //                    prevButton.click(function() {
            //                        FindShopHandler.pager.pageNumber--;
            //                        FindShopHandler.doSearch();
            //                    });

            //                    pagingRight.append(prevButton);
            //                }

            //                var totalPages = parseInt(result.NumberOfElements / FindShopHandler.pager.pageSize);

            //                if (result.NumberOfElements % FindShopHandler.pager.pageSize > 0)
            //                    totalPages++;

            //                for (var i = 1; i <= totalPages; i++) {
            //                    pagingRight.append(FindShopHandler.renderPageNumberElement(i));
            //                }

            //                if (FindShopHandler.pager.pageNumber < totalPages) {
            //                    var nextButton = $j("<div class=\"navbutton\"><img alt=\"\" src=\"" + RootResourceFolder + "/Images/Main/productsbox_paging_button_next.png\" /></div>");

            //                    nextButton.click(function() {
            //                        FindShopHandler.pager.pageNumber++;
            //                        FindShopHandler.doSearch();
            //                    });

            //                    pagingRight.append(nextButton);
            //                }
            //            }

            //            pagingContainer.append(pagingLeft);
            //            pagingContainer.append(pagingRight);
            //            pagingContainer.append("<div class=\"bothclear\"></div>");

            //            container.append(pagingContainer);
        }
    }

    //    renderPageSizeElement: function(pageSize) {
    //        var pageSizeButton = $j("<div></div>");
    //        pageSizeButton.addClass(FindShopHandler.pager.pageSize == pageSize ? "button_active" : "button");
    //        pageSizeButton.append("<div class=\"left\"></div>");
    //        pageSizeButton.append("<div class=\"text\">" + pageSize + "</div>");
    //        pageSizeButton.append("<div class=\"right\"></div>");

    //        pageSizeButton.click(function() {
    //            $j("#shop_paging .left .button_active").removeClass("button_active").addClass("button");
    //            $j(this).addClass("button_active");
    //            FindShopHandler.pager.pageSize = pageSize;
    //            FindShopHandler.pager.pageNumber = 1;
    //            FindShopHandler.doSearch();
    //        });

    //        return pageSizeButton;
    //    },

    //    renderPageNumberElement: function(pageNumber) {
    //        var pageNumberButton = $j("<div></div>");
    //        pageNumberButton.addClass(FindShopHandler.pager.pageNumber == pageNumber ? "button_active" : "button");
    //        pageNumberButton.append("<div class=\"left\"></div>");
    //        pageNumberButton.append("<div class=\"text\">" + pageNumber + "</div>");
    //        pageNumberButton.append("<div class=\"right\"></div>");

    //        pageNumberButton.click(function() {
    //            $j("#shop_paging .right .button_active").removeClass("button_active").addClass("button");
    //            $j(this).addClass("button_active");
    //            FindShopHandler.pager.pageNumber = pageNumber;
    //            FindShopHandler.doSearch();
    //        });

    //        return pageNumberButton;
    //    }
}

// Custom google popup overlay.
function CustomPopup(position, map, content) {
    // Now initialize all properties.
    this.position_ = position;
    this.map_ = map;

    // Holds the popup content div.
    this.content_ = content;

    // Explicitly call setMap() on this overlay.
    this.setMap(map);

    this.finalized_ = false;
}

CustomPopup.toOverlaySubclass = function() {

    CustomPopup.prototype = new google.maps.OverlayView();

    CustomPopup.prototype.onAdd = function() {

        this.content_.style.position = "absolute";

        var panes = this.getPanes();

        panes.floatPane.appendChild(this.content_);
    }

    CustomPopup.prototype.draw = function() {

        var overlayProjection = this.getProjection();
        var pos = overlayProjection.fromLatLngToDivPixel(this.position_);

        this.content_.style.left = pos.x + 'px';
        this.content_.style.top = pos.y + 'px';

        // Only set visibility and pan to fit once.
        if (this.finalized_) return;
        this.autoPan();
        this.content_.style.visibility = "visible";
        this.finalized_ = true;
    }

    CustomPopup.prototype.onRemove = function() {
        this.content_.parentNode.removeChild(this.content_);
        this.content_ = null;
    }

    CustomPopup.prototype.autoPan = function() {

        var pos = this.getProjection().fromLatLngToContainerPixel(this.position_);

        var markerX = pos.x;
        var markerY = pos.y;

        var popupWidth = $j(this.content_).width();
        var popupHeight = $j(this.content_).height();

        var popupRight = popupWidth + markerX + 47;
        var popupBottom = popupHeight + markerY + 33;

        var mapWidth = $j(this.map_.getDiv()).width();
        var mapHeight = $j(this.map_.getDiv()).height();

        var panX = 0;
        var panY = 0;

        if (popupRight > mapWidth)
            panX = popupRight - mapWidth + 10;

        if (popupBottom > mapHeight)
            panY = popupBottom - mapHeight + 10;

        this.map_.panBy(panX, panY);
    }
}



var OpeningHoursPortlet = {
	
	self: this,
	retailService: null,
	
	texts: {	
		monday: null,
		tuesday: null,
		wednesday: null,
		thursday: null,
		friday: null,
		saturday: null,
		sunday: null
	},
		
	init:	function() {
		
	},
	
    getShopInfo: function(id) {
        OpeningHoursPortlet.retailService = new RetailShopServiceFE();	
		OpeningHoursPortlet.retailService.ajax.success = OpeningHoursPortlet.receivedShop;		
		OpeningHoursPortlet.retailService.GetRetailShop(id, '');
	},
	
	receivedShop: function(shop)
	{		
		$j("#openinghours").html("");
		
        for (var i = 0; i < shop.Hours.length && i < 8; i++) {
			var hours = shop.Hours[i];						
			$j("#openinghours").append("<div class='day'>" + OpeningHoursPortlet.GetDay(hours.Day) + "</div>");
			$j("#openinghours").append("<div class='date'>" + hours.Date + "</div>");
			$j("#openinghours").append("<div class='openingtime'>" + hours.OpeningTime + " - " + hours.ClosingTime + "</div>");
			$j("#openinghours").append("<div class='leftclear'></div>");
			
			$j("#findshopgenerichtml").css('display', 'none');
			$j("#findshopopeninghours").css('display', '');


        }
		
	},
	
	GetDay: function(day)
	{
		switch(day)
		{
			case "monday":
				return OpeningHoursPortlet.texts.monday;	
			case "tuesday":
				return OpeningHoursPortlet.texts.tuesday;
			case "wednesday":
				return OpeningHoursPortlet.texts.wednesday;
			case "thursday":
				return OpeningHoursPortlet.texts.thursday;
			case "friday":
				return OpeningHoursPortlet.texts.friday;
			case "saturday":
				return OpeningHoursPortlet.texts.saturday;
			case "sunday":
				return OpeningHoursPortlet.texts.sunday;
		}
		return "";
	}
}

var ProductDetails = {

    currentProduct: null,
    currentVariant: null,
    variants: null,

    texts: {
        closeWindow: null,
        chooseVariant: null
    },

    paths: {
        rootResourceFolder: null
    },

    pages: {
        wishlist: null,
        findshop: null
    },

    images: {
        imageArray: null,
        currentIndex: 0
    },

    ids: {
        discountTag: null
    },

    productService: null,

    init: function() {
        $j(document).ready(function() {
            ProductDetails.productService = new ProductServiceFE();
            ProductDetails.initImageLogic();
            ProductDetails.initVariants();
            ProductDetails.initWishlistPart();
            ProductDetails.initFindShopLink();
            ProductDetails.initProductDataPopup();
            ProductDetails.initMediaReferencesPopup();
            ProductDetails.initDiscountPopup();
        });
    },

    initImageLogic: function() {

        var jZoomImage = $j("#zoom_image");

        jZoomImage.lightBox({ width: 1024, height: 512 });

        jZoomImage.click(ProductDetails.initThumbnails);

        var prevButton = "#image_pager_prev";
        var nextButton = "#image_pager_next";

        $j(prevButton + " a").removeAttr("href").removeAttr("id");
        $j(nextButton + " a").removeAttr("href").removeAttr("id");

        $j(prevButton).click(function() {
            ProductDetails.images.currentIndex = ProductDetails.images.currentIndex <= 0
                        ? ProductDetails.images.imageArray.length - 1 : ProductDetails.images.currentIndex - 1;
            ProductDetails.setImages();
        });

        $j(nextButton).click(function() {
            ProductDetails.images.currentIndex = ProductDetails.images.currentIndex >= ProductDetails.images.imageArray.length - 1
                        ? 0 : ProductDetails.images.currentIndex + 1;
            ProductDetails.setImages();
        });
    },

    setImages: function() {
        var mainImage = ProductDetails.images.imageArray[ProductDetails.images.currentIndex].main;
        var zoomImage = ProductDetails.images.imageArray[ProductDetails.images.currentIndex].zoom;
        $j("#main_image").attr("src", mainImage);
        $j("#zoom_image").attr("href", zoomImage);
    },

    initThumbnails: function() {

        var jParent = $j("#lightbox-image-details");
        if (!jParent || jParent.length == 0) {
            setTimeout(ProductDetails.initThumbnails, 750);
            return;
        }

        var jProductImage = $j('#lightbox-container-image-box');
        if (!jProductImage || jProductImage.length == 0 || !jProductImage.attr('style')) {
            setTimeout(ProductDetails.initThumbnails, 750);
            return;
        }

        jParent.addClass('navigator');
        $j('#jquery-lightbox').addClass('imgviewer');
        $j('#lightbox-secNav').remove();
        jProductImage.addClass('productimage').css('width', '1024px');

        ProductDetails.initCloseButton($j('#lightbox-nav'));
        ProductDetails.initPrevImageButton(jParent);

        var jThumbParent = $j("<div/>");
        jThumbParent.addClass('tumbnails');
        jParent.append(jThumbParent);

        for (var index = 0; index < ProductDetails.images.imageArray.length; index++) {
            var imageDetails = ProductDetails.images.imageArray[index];
            ProductDetails.initThumbnail(jThumbParent, imageDetails, index);
        }

        ProductDetails.initNextImageButton(jParent);

        jParent.append('<div class="leftclear"></div>');
    },

    initCloseButton: function(jParent) {

        var jCloseDiv = $j('<div/>');
        jCloseDiv.addClass('close');
        jCloseDiv.css('cursor', 'pointer');
        jParent.prepend(jCloseDiv);

        var jIconDiv = $j('<div/>');
        jIconDiv.addClass('icon');
        jCloseDiv.append(jIconDiv);

        var jImg = $j('<img/>');
        jImg.attr('src', ProductDetails.paths.rootResourceFolder + '/Images/Main/imgviewer_button_close.png');
        jIconDiv.append(jImg);

        var jLinkDiv = $j('<div/>');
        jLinkDiv.addClass('link');
        jLinkDiv.html(ProductDetails.texts.closeWindow);
        jCloseDiv.append(jLinkDiv);

    },

    initThumbnail: function(jParent, imageDetails, index) {

        if (!jParent) {
            return;
        }

        if (imageDetails == null) {
            return;
        }

        var jOuterDiv = $j('<div/>');
        jOuterDiv.addClass(index != ProductDetails.images.currentIndex ? 'item' : 'item_active');
        jOuterDiv.click(ProductDetails.showImage);
        jOuterDiv.css('cursor', 'pointer');
        jParent.append(jOuterDiv);

        var jFrameDiv = $j('<div/>');
        jFrameDiv.addClass('frame');
        jOuterDiv.append(jFrameDiv);

        var jFrameAnchor = $j('<a/>');
        jFrameDiv.append(jFrameAnchor);

        var jFrameImg = $j('<img/>');
        jFrameImg.attr('src', ProductDetails.paths.rootResourceFolder + '/Images/Main/transpixel.gif');
        jFrameAnchor.append(jFrameImg);

        var jImageDiv = $j('<div/>');
        jImageDiv.addClass('image');
        jOuterDiv.append(jImageDiv);

        var jImageImg = $j('<img/>');
        jImageImg.attr('src', imageDetails.thumb);
        jImageDiv.append(jImageImg);

    },

    initPrevImageButton: function(jParent) {

        if (!jParent) {
            return;
        }

        var jDiv = $j('<div/>');
        jDiv.addClass('prev');
        jDiv.css('cursor', 'pointer');
        jParent.append(jDiv);

        var jAnchor = $j('<a></a>');
        jAnchor.click(ProductDetails.prevImage);
        jDiv.append(jAnchor);

        var jImg = $j('<img/>');
        jImg.attr('src', ProductDetails.paths.rootResourceFolder + '/Images/Main/transpixel.gif');
        jAnchor.append(jImg);

    },

    initNextImageButton: function(jParent) {

        if (!jParent) {
            return;
        }

        var jDiv = $j('<div/>');
        jDiv.addClass('next');
        jDiv.css('cursor', 'pointer');
        jParent.append(jDiv);

        var jAnchor = $j('<a></a>');
        jAnchor.click(ProductDetails.nextImage);
        jDiv.append(jAnchor);

        var jImg = $j('<img/>');
        jImg.attr('src', ProductDetails.paths.rootResourceFolder + '/Images/Main/transpixel.gif');
        jAnchor.append(jImg);

    },

    initVariants: function() {
        if (ProductDetails.variants.length == 1) {
            ProductDetails.currentVariant = ProductDetails.variants[0].id;
            return;
        }

        $j("#type_select").show();

        for (var i = 0; i < ProductDetails.variants.length; i++) {
            var div = $j("<div class=\"item\"><a></a>" + ProductDetails.variants[i].label + "</div>");
            (function(index) {
                div.click(function() {
                    var variant = ProductDetails.variants[index];
                    ProductDetails.currentVariant = variant.id;
                    $j("#type_selected").html(variant.label);
                    $j("#price_container").html(variant.priceWithSpan);

                    if (variant.discount == '') {
                        $j("#" + ProductDetails.ids.discountTag).hide();
                    }
                    else {
                        $j("#" + ProductDetails.ids.discountTag).show();
                        $j("#discount_container").html(unescape(variant.discount));
                        ProductDetails.initDiscountPopup();
                    }

                    $j("#productinfo_headline").html(variant.title);
                    $j("#productinfo_text").html(unescape(variant.salesText));
                    $j("#productdata_text").html(unescape(variant.salesText));
                    $j("#age_range").html(variant.ageRange);
                    toggleClass('type_select', 'select_active', 'select');
                    for (var i = 0; i < ProductDetails.images.imageArray.length; i++) {
                        if (ProductDetails.images.imageArray[i].id == variant.imageId) {
                            ProductDetails.images.currentIndex = i;
                            ProductDetails.setImages();
                            break;
                        }
                    }
                });
            })(i);
            $j("#variants_container").append(div);
        }

        $j("#variants_container div.item").mouseover(function() {
            $j(this).removeClass("item").addClass("item_mo");
        });

        $j("#variants_container div.item").mouseout(function() {
            $j(this).removeClass("item_mo").addClass("item");
        });
    },

    prevImage: function() {

        var index = ProductDetails.images.currentIndex - 1;
        if (index < 0) {
            index = $j("div.imgviewer div.tumbnails > div").length - 1;
        }
        ProductDetails.showImage(index);
        return false;

    },

    nextImage: function() {

        var index = ProductDetails.images.currentIndex + 1;
        if (index > $j("div.imgviewer div.tumbnails > div").length - 1) {
            index = 0;
        }
        ProductDetails.showImage(index);
        return false;

    },

    showImage: function(index) {
        if (index != 0 && (!index || isNaN(index))) {
            return ProductDetails.showImage($j(this).index());
        }

        $j("div.imgviewer div.tumbnails > div").removeClass().addClass('item');
        $j("div.imgviewer div.tumbnails > div:nth-child(" + (index + 1) + ")").removeClass().addClass('item_active');

        ProductDetails.images.currentIndex = index;
        var imageUrl = ProductDetails.images.imageArray[index].zoom;
        $j("#lightbox-image").attr("src", imageUrl);

        ProductDetails.setImages();
        return false;

    },

    initWishlistPart: function() {
        $j("#add_to_wishlist .text a").show();

        $j("#add_to_wishlist").click(function() {
            if (ProductDetails.currentVariant == null) return alert(ProductDetails.texts.chooseVariant);
            var service = new WishlistServiceFE();
            service.ajax.success = function() {
                window.location = ProductDetails.pages.wishlist;
            };
            service.AddProductToWishlist(ProductDetails.currentProduct, ProductDetails.currentVariant);
        });
    },

    initFindShopLink: function() {
        $j("#find_shop_link a").show();
        $j("#find_shop_link a").css("text-decoration", "underline");
        $j("#find_shop_link").css("cursor", "pointer");
        $j("#find_shop_link").click(function() {
            if (ProductDetails.currentVariant == null) return alert(ProductDetails.texts.chooseVariant);
            window.location = ProductDetails.pages.findshop + "?id=" + ProductDetails.currentProduct + "&vid=" + ProductDetails.currentVariant;
        });
    },

    initProductDataPopup: function() {
        $j("#product_data a").removeAttr("href");

        $j("#product_data").css("cursor", "pointer");

        $j("#product_data").mouseover(function() {
            $j("#product_data_popup").show();
        });

        $j("#product_data").mouseout(function() {
            $j("#product_data_popup").hide();
        });
    },

    initMediaReferencesPopup: function() {

        $j("#mediareferences .text a").removeAttr("href");

        $j("#mediareferences").css("cursor", "pointer");

        $j("#mediareferences").click(function() {
            $j("#mediareferences_popup").show();
        });

        $j("#mediareferences_popup .close a").removeAttr("href");

        $j("#mediareferences_popup .close").css("cursor", "pointer");

        $j("#mediareferences_popup .close").click(function() {
            $j("#mediareferences_popup").hide();
        });

        // Initialize 23video media reference
        $j("#mediareferences_popup .inner .23video").find("a").lightBox();
        $j("#mediareferences_popup .inner .23video").find("a").click(function() {
            var mediaId = $j(this).parent().find("input:hidden").val();
            ProductDetails.productService.ajax.success = ProductDetails.displayPopupVideo;
            ProductDetails.productService.GetVideoPlayerScript(mediaId);
        });
    },

    displayPopupVideo: function(videoScript) {
        if (videoScript == "") {
            $j("#jquery-overlay").trigger("click");
        }
        else {

            // For no border.
            //$j("#jquery-lightbox").html(videoScript);

            // For extra white border.
            var object = $j(videoScript);
            var height = parseInt(object.css("height"));
            var width = parseInt(object.css("width"));

            var box = $j("#lightbox-container-image-box");
            box.css("height", (height + 10) + "px");
            box.css("width", (width + 20) + "px");
            box.css("padding-top", "10px");
            box.html(object);
        }
    },

    initDiscountPopup: function() {
        $j("#discountElm").css("cursor", "pointer");

        $j("#discountElm").mouseover(function() {
            $j("#discountFull").show();
            $j("#type_select").removeClass("select_active").addClass("select");
        });

        $j("#discountElm").mouseout(function() {
            $j("#discountFull").hide();
        });
    }
}

function TextboxDefaultTextHandler()
{
	var self = this;
    this.defaultText = "",
	this.textboxId = ""; 	
	
	this.init = function(defaultText, textboxId) {
		self.defaultText = defaultText;
		self.textboxId = textboxId;
	}
	// Bind textbox onfocus event to this method.
	this.onFocus = function() 
	{
		var curText = $j("#"+self.textboxId).val();
		
		if (curText == self.defaultText)
		{
			$j("#"+self.textboxId).val("");
		}
	}
	// Bind textbox onblur event to this method.
	this.onBlur = function()
	{
		var curText = $j("#"+self.textboxId).val();
		if (curText == "")
		{
			$j("#"+self.textboxId).val(self.defaultText);
		}
	}
}

// Persist ajax search by adding #+data to url.
var PersistSearch = {

    // Persist ajax product search by adding #+data to url.
    PersistProductSearch: function(pageNumber, numberOfRows, freeText, sort, gender, ageMonthFrom, ageMonthTo, priceFrom, priceTo, categories, contextItem, breadcrumbTaxonomy, sId) {
        //alert("PersistProductSearch(pageNumber="+pageNumber+", rows="+numberOfRows+", freeText="+freeText+", sort="+sort+", gender="+gender+", agefrom="+ageMonthFrom+", ageMonthTo="+ageMonthTo+", priceFrom="+priceFrom+", priceTo="+priceTo+", sId="+sId);
		
		var activeTabNum = PersistSearch.WhatNumberIsActiveTab();
        var strToPersist = "p;" + activeTabNum + ";" + pageNumber + ";" + numberOfRows + ";" + freeText + ";" + sort + ";" + gender + ";" + ageMonthFrom + ";" + ageMonthTo + ";" + priceFrom + ";" + priceTo + ";" + PersistSearch.ArrayToString(categories) + ";" + contextItem + ";" + breadcrumbTaxonomy + ";" + sId;       
		window.location = "#" + encode64(strToPersist);
		//alert("persisted: "+strToPersist);
    },
    // Persist ajax shop search by adding #+data to url.
    PersistShopSearch: function(freeText, pageNumber, numberOfRows) {
        var activeTabNum = PersistSearch.WhatNumberIsActiveTab();
        var strToPersist = "s;" + activeTabNum + ";" + freeText + ";" + pageNumber + ";" + numberOfRows;
        window.location = "#" + encode64(strToPersist);
		//alert("PersistShopSearch() toPersist="+strToPersist);
    },
    // Persist sitecore search by adding #+data to url.
    PersistSitecoreSearch: function(freeText, pageNumber, numberOfRows) {
        var activeTabNum = PersistSearch.WhatNumberIsActiveTab();
        var strToPersist = "c;" + activeTabNum + ";" + freeText + ";" + pageNumber + ";" + numberOfRows;
        window.location = "#" + encode64(strToPersist);
		//alert("PersistShopSearch() toPersist="+strToPersist);
    },
	
	ArrayToEncodedPersistString: function(sa)
	{
		var persistString="";
		
		for(var i=0; i<sa.length; i++)
		{
			persistString = persistString + sa[i];
			if (i <sa.length-1)
			{
				persistString = persistString + ";"
			}
		}		
		//alert("string to persist: "+persistString);
		return encode64(persistString);
	},

    // What number is the active search tab?
    // Starting with 0. -1 if no tabs were active (don't think that can happen).
    WhatNumberIsActiveTab: function() {
        var tabs = PersistSearch.GetTabs();
        if (tabs == null || tabs.length == 0)
            return -1;

        for (var i = 0; i < tabs.length; i++) {
            if ($j(tabs[i]).hasClass("tab_active")) {
                return i;
            }
        }
        return -1;
    },

    GetTabs: function() {
        return $j(".tabs").children(".tab_active, .tab");
    },

    // This is only visually. No search is triggered.
    SelectTab: function(tabnum) {
        PersistSearch.DeSelectAllTabs();

        var tabs = PersistSearch.GetTabs();
        if (tabs == null) {
            return;
        }

        $j(tabs[tabnum]).removeClass('tab');
        $j(tabs[tabnum]).addClass('tab_active');		
    },

    // Visually deselect all tabs.
    DeSelectAllTabs: function() {
        var tabs = PersistSearch.GetTabs();
        if (tabs == null || tabs.length == 0) {
            return;
        }
        for (var i = 0; i < tabs.length; i++) {
            if ($j(tabs[i]).hasClass("tab_active")) {
                $j(tabs[i]).removeClass("tab_active");
                $j(tabs[i]).addClass("tab");
                return;
            }
        }
    },

    // Does url contain # (which means persisted search data).
    PersistedSearchExist: function() {
        if (location.href.indexOf("#") != -1) // is there a persisted search parameter?
        {
            return true;
        }
        else {
            return false;
        }
    },

    GetDecodedCategoryArrayFromUrl: function() {
        // get encoded string from url
        var temp = location.href.indexOf("#");
        temp = location.href.substring(temp);

        var decoded = decode64(temp);

        var sa = decoded.split(";");

        // parameter categories is an array, so convert that from string to array.
        var categoryArray = PersistSearch.StringToArray(sa[4]);
        return categoryArray;
    },

    // Trigger a search based on persisted search data after # in url.
    TriggerPersistedSearch: function() {
        var temp;
        var decoded = "";

        if (location.href.indexOf("#") == -1) // is there a persisted search parameter in url?
        {
            //alert('no persisted search');
            return;
        }
        // get encoded string from url
        var temp = location.href.indexOf("#");
        temp = location.href.substring(temp);
        decoded = decode64(temp);

        //alert('TriggerSearch decoded: '+decoded);
	
        // array of parameters for search
        var sa = decoded.split(";");

        var typeSearch = sa[0]; // p (product) or s (shop) or c (siteCore) 
        var activeTab = parseInt(sa[1]);
        PersistSearch.SelectTab(activeTab);

        for (var i = 0; i < sa.length; i++) {
            if (sa[i] == 'null')
                sa[i] = null;
        }

        // parameter categories is an array, so convert that from string to array.
        var categoryArray = null;
        var sortArray = null;
		
        if (typeSearch == "p") { // Product search
			//SearchBar.activate();
		
            categoryArray = PersistSearch.StringToArray(sa[11]);
            if (categoryArray != null) {
                for (var i = 0; i < categoryArray.length; i++) {
                    //alert("categoryArray: "+categoryArray[i]);
                }
            }

            sortArray = PersistSearch.StringToArray(sa[5]);
            if (sortArray != null) {
                for (var i = 0; i < sortArray.length; i++) {
                    //alert("sortArray: "+sortArray[i]);
                }
            }
            // set search bar values
            Search.pageNumber = parseInt(sa[2]);
            Search.numberOfRows = parseInt(sa[3]); 			
			Search.ageMonthFrom = sa[7];
			Search.ageMonthTo = sa[8];
            Search.priceFrom = sa[9];
            Search.priceTo = sa[10];
			Search.sort = sortArray;
			Search.gender = sa[6];
			Search.categories = categoryArray;
			Search.breadcrumbTaxonomy = sa[13];

            if (categoryArray != null)
                Search.updatePrice = true;
            else
                Search.updatePrice = false;
	
            //alert("persisted parameters: pgnum="+sa[2]+", rows="+sa[3]+", freetext="+sa[4]+", age="+sa[5]+", categories="+categoryArray+", fromprice="+sa[7]+", gender="+ sa[8]+", toprice="+sa[9]+", sort="+sa[10]+","+sa[11]+", view="+sa[13]);		
            Search.init();
			Search.doPersistedSearch();
        }

        if (typeSearch == "s") // shop search
        {
            SearchBar.pageNumber = parseInt(sa[3]);
            SearchBar.numberOfRows = parseInt(sa[4]);
			
			Search.init();
			Search.doPersistedShopSearch();
			
        }

        if (typeSearch == "c") // sitecore search
        {
            SearchBar.pageNumber = parseInt(sa[2]);
            SearchBar.numberOfRows = parseInt(sa[3]);
			
			Search.init();
			Search.doPersistedSitecoreSearch();  
        }
    },

    ArrayToString: function(a) {
        if (a == null)
            return "null";

        var s = "";
        for (var i = 0; i < a.length; i++) {
            if (i > 0)
                s += "&"; // seperator

            s += a[i];
        }
        return s;
    },
    StringToArray: function(s) {
        if (s == null || s == "null" || s == "") {
            return null;
        }
        var sa = s.split("&");
        var a = new Array();
        for (var i = 0; i < sa.length; i++) {
            a.push(sa[i]);
        }
        return a;
    }
}