Tabs = {
    init: function () {
        //When page loads...
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content
        // wire tabs events
        this.wire_events();
        //filter by first tab city
        this.filter_posters($("ul.tabs > li > a[tab_id]").eq(0).attr("tab_id"), $("input[@name='cats']:checked").val());
    },
    get_selected_tab_id: function () {
        return $("ul.tabs li.active a:first").attr('tab_id');
    },

    wire_events: function () {
        //On Click on a tab hide all tabs and show selected tab
        $("ul.tabs li").click(function () {
            if (!$(this).hasClass("active")) {
                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content

                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                $('#mangaposters').removeClass('effect-23');
                $('#mangainfo').removeClass('effect-1');
                $('#mangainfo').hide();
            }
            return false;
        });

        /* on click on a tab with a city id, filter the mangas in selected city*/
        $("ul.tabs > li > a[tab_id]").
				each(
					function () {
					    $(this).click(function () {
					        Tabs.filter_posters($(this).attr('tab_id'), $("input[@name='cats']:checked").val());
					    })
					});

    },

    filter_posters: function (tab_id, cat_id) {
        $(".poster a:not([tab_id*='" + tab_id + "'])").parent().css("display", "none");
        $(".poster a[tab_id*='" + tab_id + "']").parent().css("display", "block");
        if (cat_id != 0) {
            $(".poster a:not([cat_id*='" + cat_id + "'])").parent().css("display", "none");
            //for the browse letters
            $(".row a:not([value^='" + cat_id + "'])").parent().css("display", "none");
            $(".row a[value^='" + cat_id + "']").parent().css("display", "block");
        }
        else {
            // display all
            $(".row").css("display", "block");
        }
    }
}