/**
 * All code by Chris MacPherson for SEGA (Feb 2010) 
 */
var mediaType = '';
var mediaItems = '';
var itemsPerPage = 8;
var itemsPerRow = 4;
var selectedItem = 0;
var selectedPage = 0;
var loadPage = true;
var mediaCategories = '';
var gameTitles = '';
var mediaTerr = '1';

function addslashes( str ) {  
    // Escapes single quote, double quotes and backslash characters in a string with backslashes    
    //   
    // version: 810.114  
    // discuss at: http://phpjs.org/functions/addslashes  
    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)  
    // +   improved by: Ates Goral (http://magnetiq.com)  
    // +   improved by: marrtins  
    // +   improved by: Nate  
    // +   improved by: Onno Marsman  
    // *     example 1: addslashes("kevin's birthday");  
    // *     returns 1: 'kevin\'s birthday'  
   
    return (str+'').replace(/([\\"'])/g, "\\$1").replace(/\0/g, "\\0");  
} 

// Array should hold gameGroupIds of games available as tabs. 
// Napoleon = 251
// Empire = 31
// i.e. Array(251, 31)
var tabs = '';

$(document).ready(function() {
    
    // Handle the tab events
    $(function() {        
        function handleTabSelect(event, tab) {  
            // Turn off tabs
            for (var i = 0; i < tabs.length; i++) {
                $('img#img-tab' + i).attr({ src: '/images/0/mediaBtn_' + tabs[i] + '_off.jpg'});
                
                // Switch on tab clicked on
                if (i === tab.index) {
                    $('img#img-tab' + i).attr({ src: '/images/0/mediaBtn_' + tabs[i] + '_on.jpg'});
                }
            }
            
            // Only get page when not an initialItem load
            if (loadPage == true) {
                getPage(tabs[tab.index], mediaType, 0, '', '', '', mediaTerr);
            } else {
                // Reset for next time
                loadPage = true;
            }
            
            updateHeader(gameTitles[tabs[tab.index]]);
        }

        // Set Tab Constructor values & initialize tabs
        $('#tabs').tabs({
            fx: { opacity: 'toggle', duration: 'slow' }, 
            select: handleTabSelect 
        });
        
        // set initial header
        updateHeader(gameTitles[tabs[0]]);
    });
    
    // Add event handler for game drop down selection
    $('#video-player #game-dropdown a.dd-button').click(function(){
        if ($('#video-player #game-dropdown-content').css('display')=='none') {
            $('#video-player #game-dropdown-content').show();
            $('#video-player #game-dropdown').addClass('on');
        } else {
            $('#video-player #game-dropdown-content').hide();
            $('#video-player #game-dropdown').removeClass('on');
        }
        return false;
    });
    
    // Add event handler for dropdown box game links
    $('#video-player #game-dropdown-content a').click(function(){
        // Close drop down
        $('#video-player #game-dropdown-content').hide();
        $('#video-player #game-dropdown').removeClass('on');

        return false;
    });
});

// Allow checking if array elements exist with new array function
Array.prototype.indexAt= function(what){
    var L= this.length;
    var i= 0;
    while(i < L){
        if(this[i]=== what) return i;
        ++i;
    }
    return -1;
}


function updateHeader(text) {
    /*
    // Add the game title to player header
    if(typeof sIFR == "object"){

        var headerPrepend = (mediaType == 'video') ? 'Video Player - ' : 'Screenshot Player - ';
        // If sIFR replacements not made yet then add header text to actual tag.
        if (sIFR.replacements.length == 0) {
            $('h2.sifrHeading.' + mediaType + 'player').text(headerPrepend + text);
        }
        else if (sIFR.replacements['h2.sifrHeading_0'][1] != undefined && sIFR.replacements['h2.sifrHeading_0'][1] != null) {
            // The sifr replacement will depend on how many headers exist on the page. 
            // I.e. Change the index in ['h2.sifrHeading'][index] to match posiiton of mediaplayer.
            sIFR.replacements['h2.sifrHeading_0'][1].replaceText(headerPrepend + text);
        }        
    }
    */
}

//Turn off tabs
function resetTabs() {
    for (var i = 0; i < tabs.length; i++) {
        $('img#img-tab' + i).attr({ src: '/images/0/mediaBtn_' + tabs[i] + '_off.jpg'});
    }
}

// Tell JQuery tabs to change the selected item
function setTab(game) {
    
    // Deselect all tabs first
    resetTabs();

    $('#tabs').tabs('selected', -1);
    $(".ui-tabs-selected").removeClass("ui-state-active").removeClass("ui-tabs-selected");
    
    
    // Work out tab index from game id
    for (var i = 0; i < tabs.length; i++) {
        if (game == tabs[i]) {
            $('#tabs').tabs('select', i)
        }
    }
    
    updateHeader(gameTitles[game]);
}

/**
 * Ajax function to get html for each page of media items.
 * @param int game 
 * @param string mediaType
 * @param int page
 * @param int itemsPerPage
 * @param int itemsPerRow
 * @return string
 */
function getPage(game, mediaType, page, perPage, perRow, initialItem, territory, categories, noTab) {
    
    // Set globals
    if (parseInt(perPage, 10) > 0) {
        itemsPerPage = perPage;
    }
    
    if (parseInt(perRow, 10) > 0) {
        itemsPerRow = perRow;
    }
    
    // If we have a game supplied set the correct tab
    if (game) {
        
        if (initialItem) {
            // Set the global var loadPage to false if we have an initial item.
            // This will stop the JQuery tabs from loading getPage again.
            loadPage = false;
            
            setTab(game);
        } else if (noTab) {
            setTab(game);
        }

        // Reset the selectedItem so first item will be highlighted
        selectedItem = 0;
    }
    
    // Set the global selectedPage var so we can keep track of where we are
    if (page == 'undefined' || page == '') {
        page = 0;
    }
    selectedPage = page; 
    
    // Set the global var mediaCategories so we dont have to pass with every page
    // The same categories are applied to all games 
    if (categories) {
        mediaCategories = categories;
    }
    
    // If no media items in list or a game id has been passed indicating new game
    // load data before building page.
    if (mediaItems == '' || parseInt(game, 10) > 0) {
        $.getJSON("/liblocal/mediaPlayer.php?action=load&g=" + game + "&m=" + mediaType + "&i=" + initialItem + "&mt=" + territory + "&c=" + mediaCategories,  function(mediaList){            
            mediaItems = mediaList;

            // If no initial item is set then load first item before we build page
            // !!! Wont work unless flash is loaded !!!
            if (parseInt(game, 10) > 0 && (initialItem == '' || initialItem == undefined || initialItem < 1) && mediaList.length > 0) {
                loadTheContent(unescape(mediaItems[0].singleItemXmlUri));   
            }
            
            buildPage(page, initialItem);
        });

    } else {       
       
        // Data already exists
        buildPage(page, initialItem);
    }    
}

/**
 * Build the HTML for the media list and page select widget.
 * @param int page 
 * @param int initialItem
 * @return string
 */
function buildPage(page, initialItem) {
    
    // Build thumbs in rows, black box for each video that doesn't exist.
    var mediaListRows = '';
    var mediaCount = mediaItems.length;
    var pageCount = 0; // Number of items we have for the current page
    // Take away the number of items from previous pages and cap the remainder off at itemsPerPage
    pageCount = ((mediaCount - (page * itemsPerPage)) > itemsPerPage) ? itemsPerPage : (mediaCount - (page * itemsPerPage));
          
    var html = '';
    var pageSelect = '';
    
    if (mediaCount > 0) {        
        var numRows = Math.ceil(pageCount / itemsPerRow);
        for (var i = 0; i < numRows; i++) {
            var count = 0;
            for (var j = 0; j < itemsPerRow; j++){
                
                if (count == 0 || count % itemsPerRow == 0) {
                    mediaListRows += '<tr>';
                    
                    // If the first row include the arrow cell at the beginning
                    if (i == 0) {
                        mediaListRows += '<td class="prevTableButton" rowspan="' + numRows + '" align="right">';
                        
                        // If there are previous pages then add arrow link
                        if (page > 0) {
                            mediaListRows += '<a href="javascript:getPage(\'\',\'\',' + (page - 1) + ',\'\',\'\')">';
                            mediaListRows += '<img src="/images/0/arrow_large_left.png" /></a></td>';
                        }
                    }
                }
                // Need to add items for previous pages and rows to get current item
                var currentItem = ((page * itemsPerPage) + (i * itemsPerRow)) + j;

                if (mediaItems[currentItem]) {
                    mediaListRows += '<td><a href="javascript:loadTheContent(\'' + mediaItems[currentItem]['singleItemXmlUri'] + '\', \'' + addslashes(mediaItems[currentItem]['title']) + ' ' + mediaType + '\'); highlightItem(' + currentItem + ')">';
                    mediaListRows += '<div id="item-thumb-' + currentItem + '" class="image-border' + ((currentItem == selectedItem || (selectedItem == 0 && page == 0 && i == 0 && j == 0)) ? ' on' : '') + '">';
                    mediaListRows += '<img src="' + mediaItems[currentItem]['thumbloc'] + '" /></div>';
                    
                    if (mediaItems[currentItem].title != undefined) {
                        mediaListRows += '<span class="title">' + mediaItems[currentItem]['title'] + '</span>';    
                    }
                    
                    mediaListRows += '</a></td>';
                } else {
                    // Create a blank video
                    mediaListRows += '<td><div class="blank-image">&nbsp;</div></td>';
                }
                count++;
                
                if (count % itemsPerRow == 0) {
                    
                    // If the first row include the arrow cell at the beginning
                    if (i == 0) {
                        mediaListRows += '<td class="nextTableButton" rowspan="' + numRows + '" align="left">';
    
                        // Only include the arrow if more images exist
                        if (mediaCount > ((page + 1) * itemsPerPage)) {
                            mediaListRows += '<a href="javascript:getPage(\'\',\'\',' + (page + 1) + ',\'\',\'\')">';
                            mediaListRows += '<img src="/images/0/arrow_large_right.png" /></a>';
                        }
                        mediaListRows += '</td>';
                    }
                    mediaListRows += '</tr>';
                }
            }
        }
        
        html = '<div class="mediaList"><table>' + mediaListRows + '</table></div>';
        
        // Only show page selector if more than one page
        if (mediaCount > pageCount) {
            pageSelect = '<a class="mp-prev-page" '; 
            pageSelect += ((page > 0) ? ' href="javascript:getPage(\'\',\'\',' + (page - 1) + ',\'\',\'\')"' : '');
            pageSelect += '>&nbsp;</a>';
                  
            // Add page links
            for (i = 1; i < Math.ceil(mediaCount / itemsPerPage) + 1; i++) {
              
                if (i > 1) {
                    //html += '|';
                } 
          
                pageSelect += '<a ' + ((i - 1 == page) ? 'class="on"' : 'href="javascript:getPage(\'\',\'\',' + (i - 1) + ',\'\',\'\')') 
                pageSelect += '">' + i + '</a>';
            }
            
            pageSelect += '<a class="mp-next-page" '; 
            pageSelect += ((mediaCount > ((page + 1) * itemsPerPage)) ? ' href="#" onclick="getPage(\'\',\'\',' + (page + 1) + ',\'\',\'\'); return false;"' : '');
            
            pageSelect += '>&nbsp;</a></div>';
        }
        
    } else {
        html = '<div class="mediaList"><table><tr><td><p>Sorry there are no ' + mediaType + 's available yet for this game.</p></td></tr></table></div>';
    }
    
    // Update page select widget first
    $("#page-select").html(pageSelect);
    
    // Now fade out thumbs before updating and fading back in.
    $("#tab-content").fadeOut("slow")
    $('#tab-content').queue(function() {
        $("#tab-content").html(html);
        addEventHandlers();
        $(this).dequeue();
    });
    $("#tab-content").fadeIn("slow");
}

/**
 * Change to the prev media item, get new page if necessary
 * @return
 */
function prevItem() {
    
    // Check if there is another item in the mediaItems array    
    if (selectedItem > 0 && mediaItems.indexAt(selectedItem - 1)) {
        selectedItem--;
        loadTheContent(unescape(mediaItems[selectedItem].singleItemXmlUri));
        
        // Need to check if the item is on previous page and load it if so.
        // Note: first page is zero so cannnot multiply page number by itemsPer page for that
        //       We temporarily add 1 to page to make it easier here
        // Note: Items start from 0 so subtract 1 from page * itemsPerPage total
        if (selectedItem < (selectedPage * itemsPerPage)) {
            getPage('', '', selectedPage - 1);
        }
        
        highlightItem(selectedItem);
    }
}

/**
 * Change to the next media item, get new page if necessary
 * @return
 */
function nextItem() {
    // Check if there is another item in the mediaItems array
    if (mediaItems.indexAt(selectedItem + 1)) {
        selectedItem++;

        loadTheContent(unescape(mediaItems[selectedItem].singleItemXmlUri));
        
        // Need to check if the item is on next page and load it if so.
        // Note: first page is zero so cannnot multiply page number by itemsPer page for that
        //       We temporarily add 1 to page to make it easier here
        // Note: Items start from 0 so subtract 1 from page * itemsPerPage total
        tempPage = selectedPage + 1;
        if (selectedItem > (tempPage * itemsPerPage - 1)) {
            getPage('', '', tempPage);
        }
        
        highlightItem(selectedItem);
    }
}

/**
 * Decorate the element with css to highlight.
 * Also keep track of the highlighted item using the global var
 * @param int item
 */
function highlightItem(item) {

    // Turn off other tabs
    $('div[id^="item-thumb-"]').removeClass('on');

    // Turn this tab on
    $('#item-thumb-' + item).addClass('on');
    
    selectedItem = item;
}

/**
 * Event handlers can only be added to DOm nodes after they exist so this
 * function should be called in that instance.
 * @return
 */
function addEventHandlers() {
    
    // Attach event to animate hover on media items
    $(function(){
        $('div[id^="item-thumb-"] img').hover(function(){
          $(this).stop();
          $(this).animate({"opacity":0.5}, "fast");
        }, function(){
          $(this).stop();
          $(this).animate({"opacity":1}, "fast");
        });
      });
}