// JavaScript Document - this page is used to make the subnav work
// http://www.w3schools.com/JS/tryit.asp?filename=tryjs_array_for_in
// http://www.w3schools.com/JS/js_obj_array.asp

/* First section - here we set up all the functions and variables

This version stops the fading effect if you're on IE so it doesn't screw up :3
*/
var x;
var ie = new Boolean();

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
	ie = true;
}
	else
{
	ie = false;
}

var nav_home = new Array();
nav_home[0] = "<a href='/index.php?t=0'>What\'s New</a>";
nav_home[1] = "<a href='/index.php?t=1'>My Haunts</a>";
//nav_home[2] = "<a href='/index.php?t=2'>Friend Activity</a>";

var nav_games = new Array();
nav_games[0] = "<a href='/games/'>Newest</a>";
nav_games[1] = "<a href='/media/categories.php?t=0'>Categories</a>";
nav_games[2] = "<a href='/games/&o=2'>Most Popular</a>";
nav_games[3] = "<a href='/games/&o=3'>Top Rated</a>";
nav_games[4] = "<a href='/games/&o=4'>Most Favourited</a>";
nav_games[5] = "<a href='/media/random.php?t=1&p=0'>Random</a>";

var nav_toons = new Array();
nav_toons[0] = "<a href='/toons/'>Newest</a>";
nav_toons[1] = "<a href='/media/categories.php?t=1'>Categories</a>";
nav_toons[2] = "<a href='/toons/&o=2'>Most Popular</a>";
nav_toons[3] = "<a href='/toons/&o=3'>Top Rated</a>";
nav_toons[4] = "<a href='/toons/&o=4'>Most Favourited</a>";
nav_toons[5] = "<a href='/media/random.php?t=2&p=0'>Random</a>";

var nav_art = new Array();
nav_art[0] = "<a href='/art/'>Newest</a>";
nav_art[1] = "<a href='/media/categories.php?t=2'>Categories</a>";
nav_art[2] = "<a href='/art/&o=2'>Most Popular</a>";
nav_art[3] = "<a href='/art/&o=3'>Top Rated</a>";
nav_art[4] = "<a href='/art/&o=4'>Most Favourited</a>";
nav_art[5] = "<a href='/media/random.php?t=3&p=0'>Random</a>";

var nav_portal = new Array();
nav_portal[0] = "<a href='/portal/'>Browse</a>";
nav_portal[1] = "<a href='/portal/games/&'>Games</a>";
nav_portal[2] = "<a href='/portal/toons/&'>Toons</a>";
nav_portal[3] = "<a href='/portal/art/&'>Art</a>";
nav_portal[4] = "<a href='/portal/&s=1'>Submit your own!</a>";

var nav_projects = new Array();
nav_projects[0] = "<a href='/project/index.php'>My Projects / More Info</a>";
nav_projects[1] = "<a href='/project/createproject.php'>Create Project</a>";
nav_projects[2] = "<a href='/project/overview.php?p=1'>Demo Project</a>";

var nav_forums = new Array();
nav_forums[0] = "<a href='/forum/index.php'>Browse</a>";
nav_forums[1] = "<a href='/forum/index.php#info'>Active Topics</a>";
nav_forums[2] = "<a href='/forum/search.php'>Search Topics</a>";

var nav_profiles = new Array();
nav_profiles[0] = "<a href='/profiles.php?t=0'>Browse</a>";
nav_profiles[1] = "<a href='/old_profiles/myprofile.php'>My Profile</a>";
nav_profiles[2] = "<a href='/profiles.php?t=1'>Highest Ranked Users</a>";
nav_profiles[3] = "<a href='/profiles.php?t=2'>Newest Users</a>";
	
	//We will use this for activating the subnav animations, easily editable. Note, we use a longer fade for closing the subnav (later on)
	var slidelength = 500;
	
	if(ie == false){
		var fadelength = 150;
	} else {
		var fadelength = 1;
	}
	var openlength = new Number(); //This is the delay before the subnav opens (if not already open). Set a bit later
	var subnav_open = new Boolean();
	subnav_open = false;
	
function activate_subnav(links, heading){
	
	if(links && heading){
	
	if(subnav_open==false){
		openlength = 500;	
	} else {
		openlength = 1;
	}
		
		$(document).oneTime(openlength, "openTimer", function() {
		//openTimer = $.timer(openlength,function(){
												  
		if(heading != document.getElementById("subnav_title").innerHTML){			
			//if(fadeTimer!=''){
			//	$.clearTimer(fadeTimer);
			//}
			
			$("#subnav").slideDown(slidelength); //We slide down the subnav first so we can see the text fade in
			if(ie == false){
				$("#subnav_text").stop().fadeTo(0, 1.0);
				$("#subnav_title").stop().fadeTo(0, 1.0);
				$("#subnav_text").fadeOut(fadelength);
				$("#subnav_title").fadeOut(fadelength);
			}
			
			$(document).oneTime(fadelength, "subnavTimer", function() {
//			subnavTimer = $.timer(fadelength,function(){
			
			//Here we work out whether or not to put the divider image in
			var length = links.length;
			length --;
			var count = 0;
			var links_output = new String();
			for (x in links)
			{
				links_output += links[x];
				if(count < length){
					links_output += '<img src="/Images/subnav_divider.png" />';
					
				}
				count++;
			}
						//And here, we set the heading and links sections of the subnav and fade them in
						document.getElementById("subnav_text").innerHTML = links_output;
						document.getElementById("subnav_title").innerHTML = heading;
						if(ie == false){
								if(subnav_open==false){
									$("#subnav_text").fadeIn(slidelength);
									$("#subnav_title").fadeIn(slidelength);
									subnav_open = true;
								} else {
									$("#subnav_text").fadeIn(fadelength);
									$("#subnav_title").fadeIn(fadelength);
								}
						} else {
							$("#subnav_text").show();
							$("#subnav_title").show();
						}
					});
		}
		});
		
	}
}

/* Here is where we use all of the script above and incorporate it within the subnav - below here was originally placed straight on the page */

$(document).ready( function(){
	$("#subnav").hide().css({'height':'30px'});
	$("#subnav_text").hide();
	$("#subnav_title").hide();

	/* mouseover and mouseout checks to avoid closing the subnav when it's being used */
	$("#subnav").mouseover( function(){
		$(document).stopTime("subnavTimer");
	});
	$("#navbar").mouseenter( function(){
		$(document).stopTime("subnavTimer");
	});
	
	$("#subnav").mouseout( function(){
		deactivate_subnav();
	});
	
	$("#navbar").mouseleave( function(){
		deactivate_subnav();
	});
	/*
	$("#nav_home").mouseenter( function(){
		deactivate_subnav();
	})
	*/;
	function deactivate_subnav(){
		
		$(document).oneTime(400, "subnavTimer", function() {
		//subnavTimer = $.timer(400,function(){
			subnav_open = false;
			$(document).stopTime("openTimer");
			$("#subnav").slideUp(slidelength);
			if(ie == false){
				$("#subnav_text").fadeOut(slidelength);
				$("#subnav_title").fadeOut(slidelength);
			}
			$(document).oneTime(400, function() {
				document.getElementById("subnav_text").innerHTML = "";
				document.getElementById("subnav_title").innerHTML = "";
				$("#subnav_text").hide();
				$("#subnav_title").hide();
			});
		});
	}	
	
	/* Checks if any headings are moused over + opens subnav accordingly */
	$("#nav_home").mouseenter( function(){
	activate_subnav(nav_home, "Home");
	} );
	$("#nav_games").mouseenter( function(){
	activate_subnav(nav_games, "Games");
	} );
	$("#nav_toons").mouseenter( function(){
	activate_subnav(nav_toons, "Toons");
	} );
	$("#nav_art").mouseenter( function(){
	activate_subnav(nav_art, "Art");
	} );
	$("#nav_portal").mouseenter( function(){
	activate_subnav(nav_portal, "Portal");
	} );
	$("#nav_projects").mouseenter( function(){
	activate_subnav(nav_projects, "Projects");
	} );
	$("#nav_forums").mouseenter( function(){
	activate_subnav(nav_forums, "Forums");
	} );
	$("#nav_profiles").mouseenter( function(){
	activate_subnav(nav_profiles, "Profiles");
	} );
})