$(function () {

    //Search Input Field
    var searchBox = $('#search_input');
    searchBox.focus(function () { if ($(this).val() == 'Search videos, shows, & more...') { $(this).val(''); } });
    searchBox.blur(function () { if ($(this).val() == '') { $(this).val('Search videos, shows, & more...'); } });


    //Small Video thumbnail hover effect
    $('.videoThumbnailSmall').hover(
      function () { $(this).addClass('hover'); },
      function () { $(this).removeClass('hover'); }
    );


    //Home Page Tabs
    var allSorts = $('.videoSort a');               //get all sort links
    var allSections = $('.section');                //get all sections

    allSorts.click(function (e) {                   //attach click event to each
        e.preventDefault();
        if (!($(this).hasClass('selected'))) {      //check if clicked link is already selected
            if ($(this).html().toLowerCase() == "all") {
                showAll();
                allSorts.each(function () { $(this).removeClass('selected'); });    //remove 'selected' class from all sort links
                $(this).addClass('selected');           //add 'selected' class to clicked element
                return;
            }
            allSorts.each(function () { $(this).removeClass('selected'); });    //remove 'selected' class from all sort links
            $(this).addClass('selected');           //add 'selected' class to clicked element
            updateSectionVisibility();
        }
        e.stopPropagation();                        //stop further propagation of click event
    });

    updateSectionVisibility();                      //run this once on page load to display correct section
    showAll();

    function updateSectionVisibility() {
        allSections.each(function () {                  //loop thru each section to find the one that should be selected
            if ($(this).attr('id') == $('.videoSort a.selected').html().toLowerCase()) {
                $(this).css('display', 'block');         //display it
            } else { $(this).css('display', 'none'); }   //hide all others
        });
    }

    function showAll() {
        allSections.each(function () {
            $(this).css('display', 'block');
        });
    }
});