$(document).ready(function(){
    
    //set up some content variables first......................................................
    //genre changes............................................................................
    var vidDefault = "http://player.vimeo.com/video/20263882?title=0&byline=0&portrait=0&color=96a7af&autoplay=1";
    var vidWeb = "http://player.vimeo.com/video/20274836?title=0&byline=0&portrait=0&color=96a7af&autoplay=1";
    var vidEdu = "http://player.vimeo.com/video/20265081?title=0&byline=0&portrait=0&color=96a7af&autoplay=1";
    var vidEve = "http://player.vimeo.com/video/20272016?title=0&byline=0&portrait=0&color=96a7af&autoplay=1";
    var txtWeb = "wct.html";
    var txtEdu = "edu.html";
    var txtEve = "eve.html";
    var txtInt = "intro.html";
    //page changes............................................................................
    var currentPage="default";
    var aboutP='about.html';
    var vidAbout= "http://player.vimeo.com/video/20263705?title=0&byline=0&portrait=0&color=96a7af&autoplay=1";
    var whatP='what.html';
    var vidWhat= "http://player.vimeo.com/video/20263994?title=0&byline=0&portrait=0&color=96a7af&autoplay=1";
    var howP='how.html';
    var vidHow= "http://player.vimeo.com/video/20263951?title=0&byline=0&portrait=0&color=96a7af&autoplay=1";
    var galleryP='gallery.html';
    var vidGallery="";
    var newsP='news.html';
    var vidNews="http://player.vimeo.com/video/20567623?title=0&byline=0&portrait=0&color=96a7af&autoplay=1";
    //gallery changes.........................................................................
    
    //........................................................................................
    
    //and some jQuery selectors as variables, seeing as we're going to use them a few times....
    //@ $mainTextFrame - the primary text area
    var $mainTxtFrame = $('#rightFrame');
    //@ $secTxtFrame - the secondary text area
    var $secTxtFrame = $('#lowerFrame');
    //@ $vidframe - iframe in which the src is changed for video changes
    var $vidframe = $('#vidFrame');
    //@ $vidTags - event for 'genre change' attached to these
    var $vidTags = $('.vidNav');
    //@ $pageTags - event for 'page change' attached to these
    var $pageTags = $('.pageNav');
    //@ $galleryTags - event for gallery change of video only attached to these, when the mainTextChange is done on the gallery page load these in
    var $galleryTags = "not set";
    //@ $aTags - just here 'cos chrome stopped showing the nav when I got rid of it!!
    var $aTags = $('a');
    
    //set up any methods before we get ahead of ourselves!?....................................
    /*
    @ doMainTextChange - load content in $mainTxtFrame from page t $mainTxtFrame
    @ t - relative url of static (non dynamic) version of the page :: String
    */
    function doMainTextChange(t){
        var mt = t + ' #' + $mainTxtFrame.attr('id') + ' > *';
        $mainTxtFrame.fadeOut(700, function(){
            $(this).load(mt, function(){
                $(this).fadeIn(1300);
                if(currentPage=="gallery"){
                    galleryPageSetUp();
                }
            })
        });
    };
    //as above but for secondary text area
    function doSecTextChange(t){
        var st = t + ' #' + $secTxtFrame.attr('id') + ' > *';
        $secTxtFrame.fadeOut(700, function(){
            $(this).load(st, function(){
                $(this).fadeIn(1300);
            })
        });
    };
    
    /*get rid of the html encoding for the video strings to make autoplay work - thanks CMS from StackOverflow*/
    function htmlDecode(input){
        return $('<div/>').html(input).text();
    };

    /*
    @ doVidChange - change the src of the iframe containing the video content
    @ arg v - the embed code src attribute for video :: String    
    */
    function doVidChange(v){
        //alert("video:"+v);
        v = htmlDecode(v);
        $vidframe.fadeOut(700, function(){
            $(this).attr('src', v).fadeIn(1300);
        });
    };
    /*
    @ doGenreChange - the effects and changing of content for genre buttons
    @ arg t - the url of the page from which to get the non-video content :: String
    @ arg v - the embed code src attribute for video :: String
    */
    function doGenreChange(t,v){
        doMainTextChange(t);
        doVidChange(v);
    };
    
    function doPageChange(t,v){
        $vidframe.attr('src', "");
        $mainTxtFrame.empty();
        $secTxtFrame.empty();
        $aTags.hide().fadeIn(3000);//just trying to fix this odd chrome disappearance and it's worked!?
        $('#wrapper').hide().slideDown(1000);
        $('#main').hide().fadeIn(2500);
        doMainTextChange(t);
        doVidChange(v);
        doSecTextChange(t);
    };
    
    /*
    when the gallery page is set I need to set up the click events for the thumbnails
    */
    function galleryPageSetUp(){
        $galleryTags = $('.thumbs');
        //alert($galleryTags.toString());
        //for gallery video changes................................................................
        $galleryTags.click(function(event){
            //alert("gallery click");
            var vid = $(event.target).attr('vidurl');
            //alert(vid);
            doVidChange(vid);   
        });
    };
    
    //and here is the default stuff to happen when the page loads..............................
    if(currentPage=="default"){
        $('#intVid').removeClass('vidNav').addClass('currentVidNav');
        doPageChange(txtInt,vidDefault);
    };
    
    //set up some event listeners..............................................................
    //for 'genre changes'......................................................................
    $vidTags.click(function(event){
        //alert(event.target.id);
        var trgt = event.target.id;
        if($('#'+trgt).hasClass('vidNav')){
            $pageTags.removeClass('currentPageNav').addClass('pageNav');
            $vidTags.removeClass('currentVidNav').addClass('vidNav');
            $('#'+trgt).removeClass('vidNav').addClass('currentVidNav');
            if(trgt == "intVid"){
                doGenreChange(txtInt, vidDefault);
            }else if(trgt == "webVid"){
                doGenreChange(txtWeb, vidWeb);
            }else if(trgt == "eduVid"){
                doGenreChange(txtEdu, vidEdu);
            }else if(trgt == "eveVid"){
                doGenreChange(txtEve, vidEve);
            }
        }
        return false;
    });
    
    //for page changes.........................................................................
    
    $pageTags.click(function(event){
        //alert(event.target.id);
        var trgt = event.target.id;
        if($('#'+trgt).hasClass('pageNav')){
            $vidTags.removeClass('currentVidNav').addClass('vidNav');
            $pageTags.removeClass('currentPageNav').addClass('pageNav');
            $('#'+trgt).removeClass('pageNav').addClass('currentPageNav');
            if(trgt == "about"){
                currentPage="about";
                doPageChange(aboutP, vidAbout);
            }else if(trgt == "what"){
                currentPage="what";
                doPageChange(whatP, vidWhat);
            }else if(trgt == "how"){
                currentPage="how";
                doPageChange(howP, vidHow);
            }else if(trgt == "gallery"){
                currentPage="gallery";
                doPageChange(galleryP, vidGallery);
            }else if(trgt == "news"){
                currentPage="news";
                doPageChange(newsP, vidNews);
            }else if(trgt == "topbar"){
                currentPage="default";
                $('#intVid').click();//because we're going back to the 'home' page set the clicked style to 'intro' button
                doPageChange(txtInt, vidDefault);
            }
        }
        return false;
    });
    
    //end of document.ready, and close it up.................................................
});