var objArr = new Array();
var pageIndex = 0;
var expanding = false;

function loadContent(catId, productHash) {
    pageIndex = 0;
    expanding = true;
    
    if( (catId != 2) && ($('#tracksystems-overlay').length > 0))
    {
		$('#tracksystems-overlay').remove();
    }

    // Hämta data från databasen där id:t är samma som index
    $('#products').load('/ajax/productCategory.aspx?categoryId=' + catId,
    function() {
        var totalPages = $('.cat-products', $('#products')).children().length;
        $('.page li:nth-child(4n)').css({
            marginRight: 0
        });
        $('#products').append('<div class="product-info" />');
        $('.product-info').load("/ajax/specColumn.aspx?categoryId=" + catId);

        if (totalPages > 1) {
            $('#products').append('<div class="nav-controls">' + '<a class="prev" href="#">Prev</a>' + '<span class="currently-viewing" href="#">' + (pageIndex + 1) + '/' + totalPages + '</span>' + '<a class="next" href="#">Next</a>' + '</div>');

            $('.next').bind('click', {
                steps: 1,
                totalPages: totalPages
            },
            changePage);
            $('.prev').css('opacity', '0.5').bind('click', {
                steps: -1,
                totalPages: totalPages
            },
            changePage);
        }

        $('.cat-products', $('#products')).bind('click',
        function(event) {
            var elementClicked = $(event.target);
            if (elementClicked.is('a') || elementClicked.is('img') || elementClicked.is('span')) {
                var linkElement = (elementClicked.is('a')) ? elementClicked : elementClicked.parent();
                var stringArray = linkElement.attr('href').split('=');
                productId = parseInt(stringArray[2]);
                loadProductInfo(productId);
            }
        });

        if (productHash) {
            loadProductInfo(productHash);
        }
        
        if((catId == 2) && ($('#tracksystems-overlay').length <= 0)) {
			var $overlay = $('<div />').attr('id','tracksystems-overlay').prependTo('#main-content');
			var $productLink = $('<a />').attr({
				id: 'to-track-system',
				alt: 'to products'
			}).text('to products').prependTo($overlay);
			
			$productLink.bind('click',function(){
				$overlay.remove();
			});
        }

        // Apply sIFR to the new h2 element
        sIFR.replace(avenir, {
            selector: '.carousel-wrapper h2',
            css: ['.sIFR-root { color: #ffffff; leading: -4; }', 'a { color: #ffffff; text-decoration: none; }', 'a:hover { color: #ffffff; }', '.greyText { color: #333333; }', '.whiteText { color: #ffffff; }', '.blueText { color: #52b2e4; }', '.greenText { color: #89a321; }'],
            offsetTop: '-2',
            tuneHeight: '-6',
            thickness: '-150',
            wmode: 'transparent',
            onRelease: function() {
                location.hash = "#categoryID=" + catId;
                loadContent(catId);
            },
            ratios: [8, 1.41, 9, 1.33, 12, 1.35, 14, 1.29, 15, 1.3, 19, 1.28, 20, 1.27, 28, 1.26, 29, 1.24, 30, 1.25, 40, 1.24, 43, 1.23, 44, 1.24, 64, 1.23, 72, 1.22, 73, 1.23, 106, 1.22, 107, 1.21, 115, 1.22, 116, 1.21, 120, 1.22, 121, 1.21, 1.22]
        });

        $(window).unbind('load');
        $('#products').unbind('load');

    });

}

function changePage(event) {
    var pageWidth = 416;
    var totalPages = event.data.totalPages;
    pageIndex += event.data.steps;

    if (pageIndex <= 0) $('.prev', $('#products')).css('opacity', '0.5');
    else $('.prev', $('#products')).css('opacity', '1');

    if (pageIndex >= totalPages - 1) $('.next', $('#products')).css('opacity', '0.5');
    else $('.next', $('#products')).css('opacity', '1');

    if ((pageIndex) >= totalPages) pageIndex = totalPages - 1;
    else if ((pageIndex) < 0) pageIndex = 0;

    $('.cat-products').animate({
        left: -pageWidth * pageIndex + 'px'
    },
    400);
    $('.currently-viewing').text((pageIndex + 1) + '/' + totalPages);

    return false;
}

function loadProductInfo(id) {

    // Apply border on selected item
    $('.page span.active', $('#products')).remove();
    $('.page', $('#products')).find('a[href$="productID=' + id + '"]').prepend('<span class="active"></span>');

    $('.product-info').load('/ajax/productPage.aspx?productId=' + id,
    function() {
        // Apply sIFR to the new h2 element
        sIFR.replace(avenir, {
            selector: '.product-info h2',

            css: ['.sIFR-root { color: #ffffff; leading: -4; }', 'a { color: #ffffff; text-decoration: none; }', 'a:hover { color: #ffffff; }', '.greyText { color: #333333; }', '.whiteText { color: #ffffff; }', '.blueText { color: #52b2e4; }', '.greenText { color: #89a321; }'],
            offsetTop: '-2',
            tuneHeight: '-6',
            thickness: '-150',
            wmode: 'transparent',
            ratios: [8, 1.41, 9, 1.33, 12, 1.35, 14, 1.29, 15, 1.3, 19, 1.28, 20, 1.27, 28, 1.26, 29, 1.24, 30, 1.25, 40, 1.24, 43, 1.23, 44, 1.24, 64, 1.23, 72, 1.22, 73, 1.23, 106, 1.22, 107, 1.21, 115, 1.22, 116, 1.21, 120, 1.22, 121, 1.21, 1.22]
        });

        $('.prod-colors a, .prod-images a', $('#products')).click(function() {
            var largeImgSrc = $(this).attr('href');
            $('.prod-image-large').attr('src', largeImgSrc);

            return false;

        });

        $('.prod-read-more', $('#products')).click(function() {
            $(this).css({
                display: 'none'
            });
            $('.product-info img').animate({
                opacity: 0
            },
            100);
            $('.prod-colors, .prod-images').css('display', 'none');
            $('.prod-text').animate({
                top: '95px',
                height: '250px'
            },
            250,
            function() {
                $('.prod-read-less').show();
            });
            return false;
        });
        $('.prod-read-less', $('#products')).click(function() {
            $(this).css({
                display: 'none'
            });
            $('.prod-text').animate({
                top: '290px',
                height: '45px'
            },
            300,
            function() {
                $('.product-info img').animate({
                    opacity: 1
                },
                200);
                $('.prod-colors, .prod-images').css('display', 'block');
                $('.prod-read-more').show();
            });
            return false;
        });
    });
}

function animateProductCat(catId, index) {
    expanding = true;
    var itemWidth = 78,
    dashWidth = (index + 1) * itemWidth,
    margin = -index * itemWidth,
    dashInterval = index * itemWidth;

    $('#products').prepend('<div id="product-mask"></div>');

    if (dashInterval <= 0) dashInterval = 30;

    $('#product-mask').css({
        opacity: 0.2
    }).animate({
        opacity: 1
    },
    300,
    function() {
        // Fix for some z-index issues on IE
        if ($.browser.msie) {
            $('.product-item:eq(' + index + ')', $('#products')).css({
                zIndex: 4
            }).find('img').css({
                display: 'none'
            }).end().find('a').css({
                display: 'none'
            });
        }

        $('.product-item:eq(' + index + ') .color-container', $('#products')).css({
            zIndex: 5,
            opacity: 1
        }).animate({
            height: '29px'
        },
        100,
        function() {
            var $colorContainer = $(this);
            $colorContainer.animate({
                width: dashWidth + 'px',
                left: margin + 'px'
            },
            dashInterval,
            function() {
                $colorContainer.animate({
                    width: itemWidth + 'px'
                },
                200,
                function() {
                    $colorContainer.animate({
                        height: '413px',
                        bottom: 0
                    },
                    200,
                    function() {
                        $colorContainer.animate({
                            width: '416px'
                        },
                        300,
                        function() {
                            loadContent(catId);
                        });
                    });
                });
            });
        });
    });
}

function loadNewCategory(catId, index) {
    location.hash = "#categoryID=" + catId; (expanding) ? loadContent(catId) : animateProductCat(catId, index);
}

jQuery(function() {
    // Replace product-links if js is supported (main-menu)
    $('.ajax-links li > span', $('#navigation')).each(function() {
        var $spanElement = $(this);
        var catId = parseInt($spanElement.attr('id').slice(4));

        // Cant use the href attribute here, because in safari (mac), sIFR causes the page to reload when u click a link in the main-menu, interrupting some animations.
        $spanElement.find('a').attr('name', '#categoryID=' + catId).removeAttr('href');
    });

    // Product page
    $('.product-item', $('#products')).each(function() {
        var $productItem = $(this);
        var catId = parseInt($productItem.attr('id').slice(11));

        $productItem.find('a').attr('href', '#categoryID=' + catId).end().bind('click',
        function() {
            location.hash = $productItem.find('a').attr('href'); (expanding) ? loadContent(catId) : animateProductCat(catId, $('.product-item', $('#products')).index(this));
        });
    });

    $('.product-item', $('#products')).hover(function() {
        if (!expanding) $(this).find('.color-container').animate({
            height: '60px'
        },
        200);
    },
    function() {
        if (!expanding) $(this).find('.color-container').animate({
            height: '29px'
        },
        150);
    });

    // If the loaded URL has a hash
    if (location.hash) {
        $('#products').html('');
        var hash = location.hash.replace(/%23/, "#"); // Needed for Safari (mac)
        hash = hash.split('#');
        hash.splice(0, 1);

        if (hash.length == 1)(hash[0].indexOf("categoryID=") > -1) ? $(window).load(function() {
            loadContent(hash[0].slice(11));
        }) : location.hash = '';

        else if (hash.length == 2)((hash[0].indexOf("categoryID=") > -1) && (hash[1].indexOf("productID=") > -1)) ? $(window).load(function() {
            loadContent(hash[0].slice(11), hash[1].slice(10));
        }) : location.hash = '';

        else location.hash = '';
    }

    $('.color-container').css({
        opacity: 0.8
    });

});

function ShowProductDownload(i_productId)
{
    var $bg = $('<div />').attr('id','form-bg').css('opacity','0.5').appendTo('.product-spec');
    var $form = $('<div />').attr('id','download-form').appendTo('.product-spec');        
    var $close = $('<a />').attr('id','close-download-form').appendTo($form).add($('#form-bg')).bind('click',function(){
		$('#form-bg, #download-form').remove();
		return false;
    });
    var $formHolder = $('<div />').appendTo($form);
    
    $formHolder.html("<img src=\"/assets/img/loadingAnimation.gif\" alt=\"Loading...\" />Loading...");
    $formHolder.load("/ajax/productDownloadForm.aspx?productId=" + i_productId);
}
    
function Signup(i_send) {
    $pnlSignin = $(".pnlSignIn");
    $parent = $pnlSignin.parent();
    $parent.html("<img src=\"/assets/img/loadingAnimation.gif\" alt=\"Loading...\" />Loading...");
    if (i_send != null)
        $parent.load("/ajax/productDownloadForm.aspx");
    else
        $parent.load("/ajax/productDownloadForm.aspx", {signup:true});
}
function DoSignUp(i_name, i_email) {
    okay = true;
    nameElm = document.getElementById(i_name);
    mailElm = document.getElementById(i_email);
    okay = chkI(nameElm) ? okay : false;
    okay = chkM(mailElm) ? okay : false;
    if (okay) {
        $pnlSignin = $(".pnlSignIn");
        $parent = $pnlSignin.parent();
        $parent.html("<img src=\"/assets/img/loadingAnimation.gif\" alt=\"Loading...\" />Loading...");
        $parent.load("/ajax/productDownloadForm.aspx", {signup:true, name: nameElm.value, email: mailElm.value});
    } else {
        alert("Please enter valid e-mail and name!");
    }
}