/**
*
*   global.js
*
*   This JS file include will hold all global functionality.
*   Global is defined as appearing on more than one type of page.
*
*/
$(function() {

	initMantle();

	$("#expand-small").mouseover(function() {
		$("#expand-small").hide();
		$("#expand-big").show();
	});

	$("#expand-big").mouseout(function() {
		$("#expand-small").show();
		$("#expand-big").hide();
	});

});

/**
*
*    Mantle
*
*    Generates the Mantle Module Which Slides the Featured Content On Homepage
*    Added By: Tito To (5/27/2009)
*/
function rotate() {

	//Get the first image
	var currentImg = ($('.contentdiv.show') ?  $('.contentdiv.show') : $('.contentdiv:first'));
	var currentNo = ($('.toc.selected') ?  $('.toc.selected') : $('.toc:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var nextImg = ((currentImg.next().length && !currentImg.next().hasClass('pagination')) ? ((currentImg.next().hasClass('show')) ? $('.contentdiv:first') : currentImg.next()) : $('.contentdiv:first'));
	var nextNo = ((currentNo.next().length) ? ((currentNo.next().hasClass('selected')) ? $('.toc:first') : currentNo.next()) : $('.toc:first'));

	//Set the fade in effect for the next image, the show class has higher z-index
	nextImg.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 700);
	nextNo.addClass('selected');

	//Hide the current image
	currentImg.animate({opacity: 0.0}, 700)
	.removeClass('show');
	currentNo.removeClass('selected');

};

function initMantle() {

	//Get the first image and display it (gets set to full opacity)
	$('.contentdiv:first').css({opacity: 1.0})
	.addClass('show');

	$('.indicators').css({opacity: 1.0})
	$('.toc:first').addClass('selected');

	var set = setInterval('rotate()',6000);	

	$('.toc').click(function(event) {
		//Clear out timer
		clearInterval(set);

    var url = this.toString();
    var delimiter = '#';
    var id = url.split(delimiter);
    id = parseInt(id[1]);

    $('.contentdiv.show').css({opacity: 0.0})
		.removeClass('show');

		$('.contentdiv.content_'+id).css({opacity: 1.0})
		.addClass('show');

    $('.toc.selected').removeClass('selected');

		$('.toc.content_'+id).addClass('selected');

		return false;
	});

}

function clearTimer() {

	clearInterval(set);
}

/**
*
*   Toggles Tabs
*
*   This function will toggle through tabs or any other ID'd DOM elements, showing the selected
*   tab.  It also has the option to change the tab CSS styles.
*
*   @param array options Options List (Example: ['MyVideos','FavoriteVideos','TaggedVideos'])
*   @param string selected Selected Option (Example: 'TaggedVideos')
*   @param string offClass Tab 'Off Class' CSS Classes To Set
*   @param string onClass Tab 'On Class' CSS Classes To Set
*   @return void
*
*/
function toggle_tabs(options, selected, offClass, onClass) {
	if (options instanceof Array) {
    	for (var i=0; i<options.length; i++) {
            if (document.getElementById(options[i])) {
                document.getElementById(options[i]).style.display = 'none';
            }
            if (typeof(offClass) != 'undefined') {
                if (document.getElementById(options[i]+'Tab')) {
                    document.getElementById(options[i]+'Tab').className = offClass;
                }
            }
        }
	} else {
        if (document.getElementById(options)) {
            document.getElementById(options).style.display = 'none';
        }
        if (typeof(offClass) != 'undefined') {
            if (document.getElementById(options+'Tab')) {
                document.getElementById(options+'Tab').className = offClass;
            }
        }
	}
    if (selected instanceof Array) {
    	for (var i=0; i<selected.length; i++) {
	        if (document.getElementById(selected[i])) {
	            document.getElementById(selected[i]).style.display = 'inline';
	        }
	        if (typeof(onClass) != 'undefined') {
	            if (document.getElementById(selected[i]+'Tab')) {
	                document.getElementById(selected[i]+'Tab').className = onClass;
	            }
	        }
    	}
    } else {
        if (document.getElementById(selected)) {
            document.getElementById(selected).style.display = 'inline';
        }
        if (typeof(onClass) != 'undefined') {
            if (document.getElementById(selected+'Tab')) {
                document.getElementById(selected+'Tab').className = onClass;
            }
        }
    }
}