$(function() { 
    
    // Playing Cards filter
    $('.logos.filter a').click(function() {
        
        var parent = $(this).parent('li')[0];
        
        $('.logos.filter li').removeClass('active')
        // CAUTION: This assumes there is only one class on the li
        var keyword = parent.className;
        $(parent).addClass('active');
        filterItems([keyword], '.product');
        
        return false;
    });
         
    // keywords: "all" | [ k1, k2, ... ]
    function filterItems(keywords, sel) {
    
        if (keywords == 'all') {
            $(sel).css('display', 'block').removeClass('f-hidden')
            $('.tabs li').css('opacity', '1');
            return
        }

        var filterString =  '';
        for (var i = 0; i < keywords.length; i++) {
            keyword = '' + keywords[i]
            
            if (keyword != 'all') {
                if (keyword.indexOf('-') == 0)
                    filterString += ':not(.f' + keyword + ')'
                else
                    filterString += '.f-' + keyword
            }
        }
        

        
        $(sel)
            .css('display', 'none')
            .addClass('f-hidden')
            .filter(filterString)
                .css('display', 'block')
                .removeClass('f-hidden');
        
 
        // Filter tabs as well if we are on a game page
        if (sel == '.game') {
            // We want to also vanish tabs that have no items in them
            $('.tabs li').each(function() {
                
                var tabHref = $('a', this)[0].href.toString() + '';
                var tabID = tabHref.substring(tabHref.lastIndexOf('#'))
                
                // console(tabID)
                
                if ($(tabID + ' .game').not('.f-hidden').length > 0) {
                    $(this).css('opacity', '1')
                }
                else {
                    $(this).css('opacity', '0.4')
                }
            });
            
        }
    
    }
    
    // Players Slider
    var players_count = 0
    $('#players_filter .legend').attr('class','legend selected_'+players_count);
  	$('#players_filter .slider').slider({
		range: false,
		min: 0,
		max: 8,
		animate: true,
		value: 0,
		slide: function(event, ui) {
            $('#players_filter .legend').attr('class','legend selected_' + ui.value);

            // We need to pass this; otherwise there's a lag in what the slider('vale') returns
            processFilterUI({ slider: ui.value })
            }
	});

    // TOGGLE 

    $('ul.toggle a').click(function() { 
        var li = $(this).parents('li');
        var toggle = $(this).parents('.toggle');
        
        $('li',toggle).removeClass('selected');
        $(li).addClass('selected');

        processFilterUI()
    })

    function processFilterUI(opt) {
        
        opt = opt || { }
        
        var filters = [ ]
        var slideVal = opt.slider != undefined ? opt.slider : $('#players_filter .slider').slider('value')

        if (slideVal > 0)
            filters.push(slideVal)

        if ($('#age_filter .kids').hasClass('selected'))
            filters.push('Kids')
        //else
        //    filters.push('-Kids')

        if ($('#age_filter .adults').hasClass('selected'))
            filters.push('Adults')
        //else
        //    filters.push('-Adults')
        
        if (!filters.length) {
        	filters = 'all';
        }
        
        filterItems(filters, filterType())
    }

    function filterType() {
        if ($('body').hasClass('products'))
           return '.product';
        
        if ($('body').hasClass('games'))
            return '.game';
    }
    
    // ASSUMPTION: By default, every item is shown.
    
    
    
    // Hack tabs to Dropdown
    
    
    $('.anchors a').click(function() { 
        var tab = $(this);
        var dropdown = $(this).parents('.dropdown');

        $('span.selected',dropdown).html(tab.html());
        dropdown.removeClass('selecting');
    })

    
    $('.dropdown .arrow').click(function() { 
        $(this).parents('.dropdown').toggleClass('selecting');
    })


});