Jabba.Homepage = function() {
    var that = {};

    that.init = function() {
        Jabba.Carousel();
        Jabba.Dropdowns();
        Jabba.VerticalTabs();        
    }    

    that.init();
    
    return that;
}

Jabba.Carousel = function() {
    var that = {};

    that.init = function() {
        jQuery(document).ready(function(){
            jQuery('#carousel').before('<ul id="carousel-nav">').cycle({
                fx:     'fade',
                speed:  1500,
                timeout: 150,
                pager:  '#carousel-nav',
                pagerEvent: 'mouseover',

                // callback fn that creates a thumbnail to use as pager anchor
                pagerAnchorBuilder: function(idx, slide) {
                    return '<li><a href="#"></a></li>';
                }
            });

            jQuery('#carousel a, #carousel div').mouseover(function() {
                jQuery('#carousel').cycle('pause');
            }).mouseout(function(){
                jQuery('#carousel').cycle('resume')
            });
        });
    }

    that.init();

    return that;
}

Jabba.Dropdowns = function() {
    var that = {};

    that.init = function() {
        jQuery(document).ready(function(){

            var facets = ['gender', 'taxonomy', 'converted_size', 'brand', 'color'];

            jQuery('.dropdown').live('change', function(sender, val) {
                var id = jQuery(this).parent().attr('id');               
                
                var data = {
                    active: id.substr(0, id.indexOf('-'))
                };

                for (var i = 0; i < facets.length; i++) {
                    facet = facets[i];
                    if (id == facet + '-dropdown') {
                        data[facet] = val;
                    } else {
                        data[facet] = jQuery('#' + facet + '-dropdown input').val();
                    }
                }

                that.getFacetsHtml(data);
            });

            jQuery('.submit-wrapper a').click(function(){
                var facetString = '';                
                for (var i = 0; i < facets.length; i++) {                    
                    val = jQuery('#' + facets[i] + '-dropdown input').val();
                    if (val != '') {
                        facetString += '/' + facets[i] + '/' + val;
                    }
                }
                
                window.location = '/finder/product_type/shoe' + facetString;

                return false;
            });
        });
    }

    that.getFacetsHtml = function(data) {
        that.ajax = jQuery.ajax({
            url: '/ajax/homepage/dropdown/',
            dataType: 'json',
            data: data,
            type: 'post',
            success: function(response) {                
                for (var facet in response) {
                    if (response.hasOwnProperty(facet)) {
                        val = response[facet];
                        if (val != '') {
                            jQuery('#' + facet + '-dropdown').html(val);
                        }
                    }
                }

                jQuery('select').superSelect();
            }
        });
    }

    that.init();

    return that;
}

Jabba.VerticalTabs = function() {
    var that = {};

    that.init = function() {
        jQuery('a.vtab').click(function(){
           var data = {
               type: jQuery(this).attr('data-type'),
               id: jQuery(this).attr('data-id')
           }

           jQuery('a.vtab').removeClass('active');
           jQuery(this).addClass('active');

           var index = jQuery('.vtabs a').index(this);
           if (jQuery('div.vpanel:eq(' + index + ')').html() == '') {
               that.setPanelContent(index, data);
           } else {
               jQuery('div.vpanel').removeClass('active');
               jQuery('div.vpanel:eq(' + index + ')').addClass('active');
           }

           return false;
        });        
    };

    that.setPanelContent = function(index, data) {
        that.ajax = jQuery.ajax({
            url: '/ajax/homepage/block',
            dataType: 'html',
            data: data,
            type: 'post',
            success: function(response) {
                jQuery('div.vpanel').removeClass('active');
                jQuery('div.vpanel:eq(' + index + ')').html(response).addClass('active');
            }
        });
    }

    that.init();
    
    return that;
}