Cufon.replace("h1");
Cufon.replace("h2");
Cufon.replace("h3");

Cufon.replace("div#homeIntro a", { hover: true });

$(document).ready(function () {

    $("body").addClass("js");

    // add behaviour to colour tokens on products search page
    var search = $("div#colourListSearch");
    if (search != null) {
        $("div#colourListSearch span").each(function () {
            $(this).find("img").click(function () {

                var p = $(this.parentNode);
                var c = p.find("input[type=checkbox]");
                c.attr('checked', !c.attr('checked'));
                if (c.attr('checked'))

                    $(this).addClass("highlight");

                else
                    $(this).removeClass("highlight");
            });
        });
    }

    // hide FAQ answers
    $("dl#faqList dd").hide();

    // click an FAQ
    $("dl#faqList dt").click(function () {
        $("dl#faqList dd").hide(); // hide FAQ answers
        $("dl#faqList dt").removeClass("currentFAQ");
        $("dl#faqList dd").removeClass("currentAnswer");


        $(this).addClass("currentFAQ");
        $(this).next().addClass("currentAnswer");
        $(this).next().show(); // show clicked answer
    });

    $("dl#faqList dt").hover(function () {
        $(this).css("cursor", "pointer");
    });

    // My Account
    // order history

    $(".hideYear").hide();
    $("div.showhideHistory").hide(); // hide the breakdowns

    $("div.listingItem").not("div.latestYear").hide(); // hide all years except latest

    $("ul#historyYears a").click(function () { // click a year
        // swap classes
        $("ul#historyYears a").removeClass("current");
        $(this).addClass("current");

        // hide all years
        $("div.listingItem").hide();
        // show clicked year
        $("div#history" + $(this).html()).show();

        return false;
    });

    // add the show hide links
    $("div.historySection").each(function () {
        $(this).append("<a class=\"showhidelink\" href=\"#\" title=\"VIEW\">VIEW</a>");
    });

    $("a.showhidelink").toggle(
            function () {
                $(this).prev().show('fast');
                $(this).html("CLOSE");

                return false;
            },
            function () {
                $(this).prev().hide('slow');
                $(this).html("VIEW");

                return false;
            });

    var tcardtimer = feelertimer = null;

    $('#tcardRow').mouseover(
        function (e) {
            clearTimeout(tcardtimer);
            if ($('#tcardInfo').length == 1) $('#tcardInfo').fadeIn('slow');
            else {
                var tcardinfo = $('<div id="tcardInfo">T-Card - A replaceable leather sample, card mounted in a "T" shape that fits into our new colour card system</div>');
                $(this).before(tcardinfo).fadeIn('slow');
            }
        }).mouseout(
        function () { tcardtimer = setTimeout(function () { $('#tcardInfo').fadeOut('fast'); }, 100); }
    );

    $('#feelerRow')
        .mouseover(
            function (e) {
                clearTimeout(feelertimer);
                if ($('#feelerInfo').length == 1) $('#feelerInfo').fadeIn('slow');
                else {
                    var feelerinfo = $('<div id="feelerInfo">Feeler Piece - A large single piece of leather, perfect for adding to your mood board</div>');
                    $(this).before(feelerinfo).fadeIn('slow');
                }
            })
        .mouseout(function () { feelertimer = setTimeout(function () { $('#feelerInfo').fadeOut('fast'); }, 100); });

    $('.thumbnailSwatchesResize a').click(function () {
        var newBackground = $(this).find('img').attr('src');
        $('.swatchHolder').css({ backgroundImage: 'url(' + newBackground + ')' });
        return false;
    });

    // Colour Converter

    //Show tabs
    $('.colourTabs').show();
    var area1 = $('#colourTabContent').find('.area1')
    var area2 = $('#colourTabContent').find('.area2').hide(); //hidden by default
    var area3 = $('#colourTabContent').find('.area3').hide(); //hidden by default
    $('.colourTabs').find('.ct1').click(
        function (e) {
            e.preventDefault();
            $('#colourTabSelected').val("1");
            $('.colourTabs li a').removeClass('active');
            $(this).addClass('active');
            area2.hide();
            area3.hide();
            area1.show();
        }
    );
    $('.colourTabs').find('.ct2').click(
        function (e) {
            e.preventDefault();
            $('#colourTabSelected').val("2");
            $('.colourTabs li a').removeClass('active');
            $(this).addClass('active');
            area1.hide();
            area3.hide();
            area2.show();
        }
    );
    $('.colourTabs').find('.ct3').click(
        function (e) {
            e.preventDefault();
            $('#colourTabSelected').val("3");
            $('.colourTabs li a').removeClass('active');
            $(this).addClass('active');
            area1.hide();
            area2.hide();
            area3.show();
        }
    );
    // Set selected tab
    var colourTabSelected = $('#colourTabSelected').val();
    if (colourTabSelected == "2") $('.colourTabs').find('.ct2').click();
    if (colourTabSelected == "3") $('.colourTabs').find('.ct3').click();

});