/// <reference path="../../js/Caearstone/jquery-1.4.1-vsdoc.js"/>
/// <reference path="../../js/Caearstone/jquery-1.4.1-vsdoc.js"/>
/// <reference path="~/js/Caearstone/jquery-1.4.1-vsdoc.js"/>
//depends on caesarstone.js


//vars
var $hovertitles = {
    'Kitchen': '<strong>Kitchens</strong><br><br>Caesarstone products the ideal choice for a variety of kitchen applications, click here for more information or hover over <strong>Caesarstone Classico, Supremo, Motivo</strong> and <strong>Concetto</strong> to display colour options.',
    'Bathroom': '<strong>Bathrooms</strong><br><br>Caesarstone products the perfect solution for bathroom applications and  wet areas, click here for more information or hover over <strong>Caesarstone Classico,  Supremo, Motivo</strong> and <strong>Concetto</strong> to display colour options.',
    'Commercial':'<strong>Commercial</strong><br><br>Caesarstone products offer superior  product performance, quality and reliability in all types of commercial  applications, click here for more information or hover over<strong> Caesarstone  Classico, Supremo, Motivo</strong> and <strong>Concetto</strong> to display colour options.',
    'Caesarstone_Classico':'<strong> Caesarstone Classico</strong><br><br>Caesarstone\'\s quartz surfaces offer numerous advantages over other types of surface materials. Quartz, one of nature\'\s strongest and most abundant minerals, has a hardness of seven on the Mohs scale (this measures the hardness of a mineral), a diamond is the hardest at ten.',
    'Caesarstone_Supremo':'<strong>Caesarstone Supremo</br><span class="ComingSoon-Menu">COMING SOON</span></strong><br><br>A premium quartz collection blending  exceptional designs and colour, Supremo delivers a natural exclusive look for  both residential &amp; commercial applications.',
    'Caesarstone_Motivo':'<strong>Caesarstone Motivo</strong><br><br>The world\'\s first quartz surface  incorporating a sculpted pattern texture into the surface using an exclusive  patented technology.',
    'Caesarstone_Concetto':'<strong>Caesarstone Concetto</strong><br><br>Luxury surfaces hand made from  individually cut and bound semi precious stones, a unique blend of art, nature  and technology.'

};
var filtering = 0;
var $list, $data, $appcontrols, $tabapps, $tabproducts,$bj,$filtertimeout = null;
var $caearsand_preferences = {
    duration: 400,
    adjustHeight: false,
    useScaling: false
};
var $bjoptions = {
    tabFadeSpeed: 300, 
    opacityUnselected: 0.3,
    initialDelay : 1000,
    initialDelayIncr: 400,
    selectionThreshold: 300,
    slideReturnTime: 700
};




//functions
var getSelectedButtonId = function ($buttons) {  return $buttons.filter('[class*="current"]').attr('id'); };

var filterList = function (e) {

    
    var $button = $(this);
    //        	                if (selected) {
    var applicationid = getSelectedButtonId($appcontrols.eq(0).find('a'));
    var productid = getSelectedButtonId($appcontrols.eq(1).find('a'));

    trace('application: ' + applicationid + ' product: ' + productid);

    var $filtereddata;
    if ((productid == undefined || productid == "") && (applicationid == undefined || applicationid == ""))
        $filtereddata = $data.find('li');
    else if (productid == undefined || productid == "")
        $filtereddata = $data.find('li.' + applicationid);
    else if (applicationid == undefined || applicationid == "")
        $filtereddata = $data.find('li.' + productid);
    else
        $filtereddata = $data.find('li.' + productid + '.' + applicationid);

    trace('found: ' + $filtereddata.length);
    //filter list
    $list.caesarsand($filtereddata, $caearsand_preferences, function () {
        trace('filter complete');
        //slide to left
        $list.parent().stop().animate({ scrollLeft: 0 }, $bjoptions.slideReturnTime, function () { trace('slide complete'); });
    });
    filtering = 0;
    //e.preventDefault();
};


//onready
$(document).ready(function () {
    //assign collections
    $appcontrols = $('#billyjean > ul');
    $list = $('ul.slider');
    $data = $list.clone();
    $tabapps = $('ul#ApplicationTabs');
    $tabproducts = $('ul#ProductTabs');


    // do loading
    $list.hide(0);
    $list.parent().addClass('coloursliderloading');



    //add null tabs
    //$tabapps.append('<li><a class="empty" href="null"></a></li>');
    //$tabproducts.append('<li><a class="empty" href="null"></a></li>');

    //var tabSettings = { event: 'mouseover', effect: 'fade', fadeOutSpeed: 2000,fadeInSpeed: 2000 };
    var tabSettings = { event: 'mouseover', effect: 'slowfade', initialIndex: null };
    if ($.browser.msie) {
        //ie breaks formatting
        //tabSettings.effect = 'fade';
    }
    //var tabSettings = { effect: 'fade'};
    // add new effect to the tabs
    $.tools.tabs.addEffect("slowfade", function (i, done) {
        var $t = this.getTabs();
        for (var k = 0; k < $t.length; k++) {
            if (k == i) {
                $t.eq(k).stop().animate({
                    opacity: 1
                }, $bjoptions.tabFadeSpeed);
            } else {
                $t.eq(k).stop().animate({
                    opacity: $bjoptions.opacityUnselected
                }, $bjoptions.tabFadeSpeed);
            }
        }
        done.call();
    });

    //tabify images. set null so processing can happen on mouseover
    trace('converting to tabs');
    $tabapps.tabs("div.ApplicationPanes > div", tabSettings);
    $tabproducts.tabs("div.ProductPanes > div", tabSettings);


    //$list.hide();




    $appcontrols.each(function (i) {
        var $control = $(this);
        trace('attaching events to ' + $control.attr('id'));
        $control.find('li img').each(function () {
            $(this).attr('title', $hovertitles[$(this).attr('alt')]);
            $(this).poshytip({ className: 'tip-caesarstone' });
        });
        //$control.mouseover(tabMouseover);
        if ($.browser.msie) {
            $control.addClass('billyjeantabs');
        }
        var $appbuttons = $control.find('a');
        $appbuttons.bind('mouseover',
            function (e) {
                trace('mouseover button: ' + $(this).attr('id'));
                //stop multiple filters from being triggered with 300ms delay
                if ($filtertimeout) {
                    clearTimeout($filtertimeout);
                    $filtertimeout = null;
                }
                $filtertimeout = setTimeout(function () { filterList(e) }, $bjoptions.selectionThreshold);
            }
        );
        //        $control.mouseover();
        setTimeout(function () { $appbuttons.eq(0).mouseover(); }, $bjoptions.initialDelay);
        $bjoptions.initialDelay += $bjoptions.initialDelayIncr;
    });

    //    $tabapps.mouseover(tabMouseover);
        //$tabapps.mouseover();



    //select the first
    //$appcontrols.each(function () { $(this).find('li a.current').mouseover(); });
    //live restore
    //$('ul#ApplicationTabs li:first a').mouseover();

    $list.parent().removeClass('coloursliderloading');
    $list.show('slow', function () {
        setTimeout(function () {
            $tabapps.poshytip('show');
        }, 600)
    });

    //    var titles = {};
    //    titles['Kitchen'] = 'SHow us ur kitchens';


    function getTooltipText(a) {
        return $titles[a.attr('alt')];
    }




    //  $('#bjhelp').show();


    //    $('#billyjean').mouseleave(function () {
    //        trace('Showing all...');
    //        $(this).find('a.current').removeClass('current');
    //        if (!$('ul#ApplicationTabs').data('tabs').getCurrentTab('').hasClass('empty'))
    //            $('ul#ApplicationTabs li a.empty').mouseover();
    //        if (!$('ul#ProductTabs').data('tabs').getCurrentTab('').hasClass('empty'))
    //            $('ul#ProductTabs li a.empty').mouseover();
    //    });
});
$(window).load(function () {
    
});