//sub-navigation system written by kyle vermeulen

var color1 = '#676767' //normal link colour
var color2 = '#FFFFFF' //rollover link colour

function subNav(showing, destination){
	//variables--------------------------------------------------------
	var destination_Dpos = destination.indexOf('D');
	var destination_link = destination.substring(0, destination_Dpos);
	
	var showing_Dpos = showing.indexOf('D');
	var showing_link = showing.substring(0, showing_Dpos);
	//----------------------------------------------------------------
	
	$(showing_link).css('color', color1); //change colour to grey
	$(destination_link).css('color', color2); //change colour to white
	
	if($(showing).is(":visible") == true){ //hide & show conditional statement
		$(showing).fadeOut("slow");
		$(destination).fadeIn("slow");
	}
}

function calls(linkClicked, x, y, z, s, t, u){
	$(linkClicked).mouseup(function(){
		subNav(x, linkClicked.concat('Div'));
		subNav(y, linkClicked.concat('Div'));
		subNav(z, linkClicked.concat('Div'));
		subNav(s, linkClicked.concat('Div'));
		subNav(t, linkClicked.concat('Div'));
		subNav(u, linkClicked.concat('Div'));
	});
	
	$(linkClicked).mouseover(function(){
		$(this).css('color', color2);
		this.style.cursor='pointer';
	});
	
	$(linkClicked).mouseout(function(){
		if($(linkClicked.concat('Div')).is(":visible") != true){
			$(linkClicked).css('color', color1);
		}
	});
}

function zIndex(divName){
	$(divName).css('position', 'absolute');
	$(divName).css('z-index', 0);
}

$(document).ready(function(){
//PORTFOLIO-------------------------------------------------------
	//initial states
	//hiding---------------------------
	$("#galleryDiv").hide();
	$("#neotelDiv").hide();
	$("#gameDiv").hide();
	$("#eclipseDiv").hide();
	$("#cardDiv").hide();
	
	//z-index--------------------------
	zIndex("#galleryDiv");
	zIndex("#neotelDiv");
	zIndex("#gameDiv");
	zIndex("#eclipseDiv");
	zIndex("#sanctuaryDiv");
	zIndex("#cardDiv");
	
	//link colour change---------------
	$("#sanctuary").css('color', '#FFFFFF');
	
	//function calls
	calls("#sanctuary", "#galleryDiv", "#neotelDiv", "#gameDiv", "#eclipseDiv", "#cardDiv");
	calls("#gallery", "#sanctuaryDiv", "#neotelDiv", "#gameDiv", "#eclipseDiv", "#cardDiv");
	calls("#game", "#sanctuaryDiv", "#neotelDiv", "#galleryDiv", "#eclipseDiv", "#cardDiv");
	calls("#eclipse", "#sanctuaryDiv", "#neotelDiv", "#gameDiv", "#galleryDiv", "#cardDiv");
	calls("#neotel", "#sanctuaryDiv", "#eclipseDiv", "#gameDiv", "#galleryDiv", "#cardDiv");
	calls("#card", "#sanctuaryDiv", "#eclipseDiv", "#gameDiv", "#galleryDiv", "#neotelDiv");
	
});