// ioko Javascript File


//Global js function that only needs to be rendered once
function ioko_video_global(){

    //Creates the rollover for the image buttons
    $('.imagewrapper').hover(function(){
        $(this).find('.rollover').toggleClass('hide');
    }, function(){
        $(this).find('.rollover').addClass('hide');
    });
    
    //Take the href of the image and apply it to the rollover
    $(".imagewrapper .rollover").click(function(){
        window.location = $(this).parent().find("a").attr("href");
    });
    
    //Hide the h2 from the page
    $('h2.hide').addClass('hide');
    
    //Loops through looking for the count class and then applies the forward/backward buttons dynamically naming them
    $('.count').each(function(i){
        i++;
        $('<a id="ioko_back_' + i + '" class="ioko_back" href="#" title=""><img class="ioko_back" src="player/g/ioko/btn_carousel_left.gif" alt="" /></a>').insertBefore(this);
        $('<a id="ioko_forward_' + i + '" class="ioko_forward" href="#" title=""><img class="ioko_forward" src="player/g/ioko/btn_carousel_right.gif" alt="" /></a>').insertAfter(this);
    });
    
}

//Js function that needs to be rendered every time a tab is clicked
function ioko_video(){

    //Extra js stuff
    $('.pageinfo').remove();
      
    //Set the variables and arrays
    //Count the number of jswrappers with style of count
    var max_jswrapper = $('div.count').size();
    var gameWidthVar = new Array(max_jswrapper);
    var gameInnerWidthVar = new Array(max_jswrapper);
    var animateVarWidth = new Array(max_jswrapper);
    var countClick = new Array(max_jswrapper);
    var detail_gameCount = new Array(max_jswrapper);
    var gameCount = new Array(max_jswrapper);
    
    var pageInfoLeft = new Array(max_jswrapper);
    var pageInfoRight = new Array(max_jswrapper);
    
    //Loops through the jswrappers adding functionality
    for (var i = 1; i <= max_jswrapper; i++) {
    
        //Removes the nonjs class and adds new js class
        $('#js_wrapper_' + i).removeClass('nonjs_wrapper');
        $('#js_wrapper_' + i).addClass('js_wrapper');
        
        //Reset the innerwrapper
        $('.js_innerwrapper').css('left', '0');
        
        //Hide the back button when the page loads
        $('#ioko_back_' + i).css('visibility', 'hidden');
        $('#ioko_back_' + i + ' img').css('visibility', 'hidden');
        
        //Hide the forward button if there is only one game
        if (gameCount[i] <= 1) {
            $('#ioko_forward_' + i).css('visibility', 'hidden');
        	$('#ioko_forward_' + i + ' img').css('visibility', 'hidden');
        }
        else {
			$('#ioko_forward_' + i).css('visibility', 'visible');
        	$('#ioko_forward_' + i + ' img').css('visibility', 'visible');			
		}
		
		
        //Count the game wrappers
        gameCount[i] = $('#js_wrapper_' + i + ' div.imagewrapper').size();
        detail_gameCount[i] = $('#js_wrapper_' + i + ' div.imagewrapper').size();
        
        //Get the width of the game wrapper 
        gameWidthVar[i - 1] = $('#js_wrapper_' + i + ' .imagewrapper').width();
        
        //Mulitply the width of game wrapper by game count to get innerwidth
        gameInnerWidthVar[i - 1] = gameCount[i] * gameWidthVar[i - 1];
        
        //Apply the width to the js_innerwrapper
        $('#js_innerwrapper_' + i).css('width', gameInnerWidthVar[i - 1]);
        
        //Declare the page info variables
        pageInfoLeft[i] = 1;
        pageInfoRight[i] = 5;
        
        
        
        //Unbind the button to clear the variables
        $('#ioko_forward_' + i).unbind();
        
        //Assigns an onclick function to the forward button and binds the countClick variable
        $('#ioko_forward_' + i).bind('click', {
            msg: i
        }, function(event){
        
            $('.pageinfo').remove();
            
            
            //Count the imagewrappers
            gameCount[event.data.msg] = $(this).parent().find('.imagewrapper').size();
            
            //Get the width of the outer container
            $.getWidth = $(this).parent().find('#js_wrapper_' + event.data.msg).width();
            
            if (detail_gameCount[event.data.msg] >= 10) {
                detail_gameCount[event.data.msg] -= 5;
                var slideFlag = false;
                
                //Changes the page indicator
                pageInfoLeft[event.data.msg] += 5;
                pageInfoRight[event.data.msg] += 5;
            }
            else {
                detail_gameCount[event.data.msg] -= 5;
                pageInfoLeft[event.data.msg] += detail_gameCount[event.data.msg];
                pageInfoRight[event.data.msg] = gameCount[event.data.msg];
                var individual_width = detail_gameCount[event.data.msg] * gameWidthVar[event.data.msg - 1];
                var slideFlag = true;
            }
            //alert("slideFlag: "+slideFlag);	
            
            
            //Hide forward button		
            if (detail_gameCount[event.data.msg] <= 5) {
                $(this).parent().find('.ioko_forward').css('visibility', 'hidden')
            }
            
            //Show back button
            
            if (detail_gameCount[event.data.msg] != gameCount[event.data.msg]) {
                $(this).parent().find('.ioko_back').css('visibility', 'visible')
            }
            
            
            //Slide the innerwrapper to the left
            
            if (slideFlag == true) {
                $(this).parent().find('.js_innerwrapper').animate({
                    left: "-=" + individual_width
                }, 800, 'easeOutSine');
            }
            else {
                $(this).parent().find('.js_innerwrapper').animate({
                    left: "-=" + $.getWidth
                }, 1200, 'easeOutSine');
            }
            
            $('<p class="pageinfo">Showing <strong>' + pageInfoLeft[event.data.msg] + ' - ' + pageInfoRight[event.data.msg] + '</strong> of <strong>' + gameCount[event.data.msg] + '</strong></p>').insertAfter('#ioko_back_' + event.data.msg);
            
            return false;
        });
        
        
        $('#ioko_back_' + i).unbind();
        
        //Assigns an onclick function to the back button and binds the countClick variable
        $('#ioko_back_' + i).bind('click', {
            msg: i
        }, function(event){
        
            $('.pageinfo').remove();
            
            
            //Count the imagewrappers
            gameCount[event.data.msg] = $(this).parent().find('.imagewrapper').size();
            
            if (detail_gameCount[event.data.msg] >= 5) {
                detail_gameCount[event.data.msg] += 5;
                
                var slideFlag = false;
                
                //Changes the page indicator
                pageInfoLeft[event.data.msg] -= 5;
                pageInfoRight[event.data.msg] -= 5;
            }
            else {
                var individual_width = detail_gameCount[event.data.msg] * gameWidthVar[event.data.msg - 1];
                pageInfoRight[event.data.msg] -= detail_gameCount[event.data.msg];
                pageInfoLeft[event.data.msg] = pageInfoRight[event.data.msg] - 4;
                
                detail_gameCount[event.data.msg] += 5;
                
                
                
                
                //alert("Special: "+detail_gameCount[event.data.msg]);
                var slideFlag = true;
            }
            
            //alert("slideFlag: "+slideFlag);	
            
            //Get the width of the outer container
            $.getWidth = $(this).parent().find('#js_wrapper_' + event.data.msg).width();
            
            //Show forward button		
            if (detail_gameCount[event.data.msg] >= 5) {
                $(this).parent().find('.ioko_forward').css('visibility', 'visible')
            }
            
            //Hide back button
            if (detail_gameCount[event.data.msg] == gameCount[event.data.msg]) {
                $(this).parent().find('.ioko_back').css('visibility', 'hidden')
            }
            
            if (slideFlag == true) {
                $(this).parent().find('.js_innerwrapper').animate({
                    left: "+=" + individual_width
                }, 1000, 'easeOutSine');
            }
            else {
                $(this).parent().find('.js_innerwrapper').animate({
                    left: "+=" + $.getWidth
                }, 1200, 'easeOutSine');
            }
            
            
            $('<p class="pageinfo">Showing <strong>' + pageInfoLeft[event.data.msg] + ' - ' + pageInfoRight[event.data.msg] + '</strong> of <strong>' + gameCount[event.data.msg] + '</strong></p>').insertAfter('#ioko_back_' + event.data.msg);
            
            
            return false;
        });
        
        $('<p class="pageinfo">Showing <strong>' + pageInfoLeft[i] + ' - ' + pageInfoRight[i] + '</strong> of <strong>' + gameCount[i] + '</strong></p>').insertAfter('#ioko_back_' + i);

        
    }
} // Close the function
$(document).ready(function(){
    ioko_video_global();
    ioko_video();
});