var currentContainer = null;
var documentHash = null;
var isPlayingAnimation = false;
var closedContainer = null;
var isCloseClicked = false;
var container = null;
var ytplayer = null;
var httpContext = null;
var currentSection = null;
var facebookId =  null;

$(document).ready(function(){
   
   // checks to see if the user is coming from a facebook like link
    if(window.location.search.substring(1)){
        checkForQuery();
    }
    
    // sets page inital load to show and hide certain divs
    $('.WordContainer > .InnerCopy').hide();
    $('.WordContainer > .InnerCopy > .LeftContainer > .Facebook').hide();
    $('.WordContainer > .InnerCopy > .RightContainer > .ForExample').hide();
    $('.WordContainer > .Word > .Name').css({ cursor: 'pointer' });
    $('.Rollover').hide();
    
    // sets the global navigation rollover/rollout states in the main.js
    setGlobalNavigation();
    
    /* event listeners for each word on the page */
    $('.WordContainer').click(containerClickHandler);
    $('.WordContainer > .Word > .Name').mouseover(navMouseOver);
    $('.WordContainer > .Word > .Name').mouseout(navMouseOut);
    
    // if the user is coming from facebook like...it will display that word
    if (documentHash) {
        currentContainer = 'div#' +documentHash + '.WordContainer';
        $(currentContainer).unbind('click');
        $(currentContainer).children('.Word').children('.Name').unbind('mouseover mouseout');
        $(currentContainer).children('.Word').children('.Name').css('color', '#4d761c');
        playAnimation();
    }
});

// word mouseover
function navMouseOver(){
    $(this).css('color', '#4d761c'); 
    $(this).next('div').show();
}
// word mouseout
function navMouseOut(){
    $(this).css('color', '#dcdcdc'); 
    $(this).next('div').hide();
}
// word click handler
function containerClickHandler(event){
    
    event.preventDefault();
    
    // if user clicked the word close button...unbinds the close button so the 
    // user can't click the close button when the word is collapsed
    if($(currentContainer).children('.Word').hasClass('Close'))
    {
        $(currentContainer).children('.Close').unbind('click');
        $(currentContainer).children('.Word').removeClass('Word Close').addClass('Word');
    }
    
    if(isCloseClicked == true)
    {
        currentContainer = null;
        isCloseClicked = false;
    }
    
    // checks to see if a word is currently open to close it first
    // else if no word is open...to open it up
    if (currentContainer != null) 
    {
        settingUpAnimation(this);
        isPlayingAnimation = true;
        resetContainer(this);
    }
    else
    {
        settingUpAnimation(this);
        currentContainer = this;
        playAnimation();
    }
}
// from the main.js file...this sets current category the user is in
// used for google analytics
function setGoogleSectionPath(currSection){
    currentSection = currSection;
}
// sets google event tracking for each word when clicked
function googleEventTracking(wordId){
    var sec = 'Word View - ' +currentSection;
    _gaq.push(['_trackEvent', 'Cultural Dictionary', sec, wordId ]);
}
// set up the initial word animation
function settingUpAnimation(wordClass){
    $(wordClass).unbind('click');
    $(wordClass).children('.Word').children('.Name').unbind('mouseover mouseout');
    $(wordClass).children('.Word').children('.Name').css('color', '#4d761c');
}
// splits the url to pull the query out to display the word from a facebook like link
function checkForQuery(){
    var queryString = window.location.search.substring(1);
    var pairs = queryString.split('=');
    documentHash = pairs[1];
}
// plays the word animation and sets the close button state
function playAnimation(){
    var targetOffset = $(currentContainer).offset().top;
    googleEventTracking($(currentContainer).attr('id'));
    
    $('html,body').animate({ scrollTop: targetOffset - 75 }, 1000, 'easeOutQuad', function() {
         // sets word color and background color
        $(currentContainer).children('.Word').children('.Name').css({ cursor: '' });
        $(currentContainer).children('.Word').children('.Name').css('color', '#4d761c');
        $(currentContainer).css('background-color', '#f1efed');
        $(currentContainer).children('.Word').children('.Rollover').children('img').css('margin-top', '-36px');
        $(currentContainer).children('.Word').children('.Rollover').show(); 
        
        $(currentContainer).children('.InnerCopy').slideDown('slow', function(){
            $(currentContainer).children('.Word').addClass('Word Close');
            $(currentContainer).children('.InnerCopy').children('.LeftContainer').children('.Facebook').show();
            $(currentContainer).children('div.InnerCopy').children('.RightContainer').children('.ForExample').show();
            $(currentContainer).children('.Word').css({ cursor: 'pointer' });
            $(currentContainer).children('.Close').click(function(event) {
                event.preventDefault();
                $(this).children('.Word').removeClass('Word Close').addClass('Word');
                $(this).unbind('click');
                $(this).css({ cursor: '' });
                isPlayingAnimation = false;
                closedContainer = this;
                isCloseClicked = true;
                resetContainer(this);
            });
            displayFacebookLink($(currentContainer).attr('id'));
        });
    });
}
// if a word is currently open...this will close that word and then
// will call the playAnimation function to open up the new word
function resetContainer(target){
    // stop the video
    if($(currentContainer).children('.InnerCopy').hasClass('Video')){
       stopVideoEmed();
    }
    
    // Animation complete.
    // resets word color and backgrond color to white    
    $(currentContainer).children('.Word').children('.Name').css('color', '#dcdcdc');
    $(currentContainer).children('.Word').children('.Rollover').hide();
    $(currentContainer).children('.Word').children('.Rollover').children('img').css('margin-top', '0px');
    $(currentContainer).css('background-color', '#ffffff'); 
    $(currentContainer).children('div.InnerCopy').children('.LeftContainer').children('.Facebook').hide();
    $(currentContainer).children('div.InnerCopy').children('.RightContainer').children('.ForExample').hide();
    $(currentContainer).children('div.InnerCopy').slideUp('slow', function() {
        if(isPlayingAnimation == true){
                resetFunctionality();
            currentContainer = target;
            isPlayingAnimation = false;
            playAnimation();
        }
        else {
            resetFunctionality();
            currentContianer = null;
        }
    });
}

function resetFunctionality(){
    // resets rollover/click functionality
    $(currentContainer).children('.Word').children('.Name').css({ cursor: 'pointer' });
    $(currentContainer).children('.Word').children('.Name').mouseover(navMouseOver);
    $(currentContainer).children('.Word').children('.Name').mouseout(navMouseOut);
    $(currentContainer).click(containerClickHandler);
}
function displayFacebookLink(divID){
    var id = 'fb-' + divID;
    
    if(facebookId != id)
    {
	    facebookId = id;
	    var fbId = 'fb#' + divID;
	    var e = document.createElement('script');
	    e.type = 'text/javascript';
        e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById(id).appendChild(e);
    }
}

function setHTTPContext(url){
    httpContext = url;
    setTrendsTab();
}

// initial Trends tab set up and adds event listeners to the click
// loads the trends iframe
function setTrendsTab(){
    container = $('.TrendsIframeContainer');
    $(container).hide();
    $('.TrendsButton > img').css('cursor', 'pointer');
   
    // Bind the link to toggle the slide.
    $('.TrendsButton > img').click(
        function( event ){
            // Prevent the default event.
            event.preventDefault();
             
            if (container.is( ":visible" ))
            {
                $('#btnPanelClose').css('cursor', '');
                container.slideUp(2000);
            } 
            else 
            {
                _gaq.push(['_trackEvent', 'Cultural Dictionary', 'Trends Behind the Terms', 'Trends Tab']);
                container.html("<div id='btnPanelClose'><img src='" +httpContext+ "/images/btnPanelClose.gif' height='17' width='17' border='0' alt='close' /></div><iframe id='Iframe1' frameborder='0' vspace='0' hspace='0' marginwidth='0' marginheight='0' width='980' allowtransparency='true' scrolling='no' height='500' src='" +httpContext+ "/TrendsPanel.aspx'></iframe>");
                $("#Iframe1").load(function (){
                    if($(currentContainer).children('.InnerCopy').hasClass('Video')){
                       stopVideoEmed();
                    }
                    container.slideDown(2000, function(){
                        setPanelCloseButton();
                    });
                });
            }
        }
    );
}

// closes the trends panel when the close button is clicked
function setPanelCloseButton(){
    $('#btnPanelClose').css('cursor', 'pointer');
    
    $('#btnPanelClose').click(
        function( event ){
            // Prevent the default event.
            event.preventDefault();
            
            $('#btnPanelClose').css('cursor', ''); 
            container.slideUp(2000);
        }
    );
}

// expands the trends panel by Id
// this function is called when the user clicks a Trends word from inside the Trends panel
function showTrend(trendId){
    var iframeURL = httpContext + "/TrendsPanel.aspx?id=" +trendId;
    container.html("<div id='btnPanelClose'><img src='" +httpContext+ "/images/btnPanelClose.gif' height='17' width='17' border='0' alt='close' /></div><iframe id='Iframe1' frameborder='0' vspace='0' hspace='0' marginwidth='0' marginheight='0' width='980' allowtransparency='true' scrolling='no' height='500' src='"+iframeURL+"'></iframe>");
    $("#Iframe1").load(function (){
        if($(currentContainer).children('.InnerCopy').hasClass('Video')){
           stopVideoEmed();
        }
        container.slideDown(2000, function(){
            setPanelCloseButton();
        });
    });
}
// checks to see if a word has an embed video with a certain class
// if so...it will stop the video
function videoEmbed(){
    if($(currentContainer).children('.InnerCopy').hasClass('Video')){
       stopVideoEmed();
    }
}
function stopVideoEmed(){
    var videoId = "embed_" + $(currentContainer).attr('id').toLowerCase();
    ytplayer = document.getElementById(videoId);
    if(ytplayer)
    {
        ytplayer.stopVideo();
    }
}

// initial the youtube player
function onYouTubePlayerReady(playerId) {
    var videoId = "embed_" + $(currentContainer).attr('id').toLowerCase();
    ytplayer = document.getElementById(videoId);
}