//Z-index variable
z_index	=	5;

//Initialize
$(function () { 
	//If there is no hash specified, we call the load route		
	if ( window.location.hash == "" )
		window.location.hash		=	"#/load";
 	 //Run Sammy
	 app.run();
	
	// Dock initialize
	$('#dock').Fisheye(
		{
			maxWidth: 30,
			items: 'a',
			itemsText: 'span',
			container: '.dock-container',
			itemWidth: 60,
			proximity: 30,
			alignment : 'left',
			valign: 'bottom',
			halign : 'center'
		}
	);
	//Get the time
	updateClock();
	//Set the time to update every second
	setInterval('updateClock()', 1000 );
	
	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set height and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		$('#mask, .window').hide();
	});		
	
});
//Modal launcher
function launchWindow(id) {

	//Get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();

	//Set heigth and width to mask to fill up the whole screen
	$('#mask').css({'width':maskWidth,'height':maskHeight});
	
	//transition effect		
	$('#mask').fadeIn(1000);	
	$('#mask').fadeTo("slow",0.8);	

	//Get the window height and width
	var winH = $(window).height();
	var winW = $(window).width();
		  
	//Set the popup window to center
	//$(id).css('top',  winH/2-$(id).height());
	$(id).css('left', winW/2-$(id).width()/2);

	//transition effect
	$(id).fadeIn(2000);
}

//Create a url to the content directory
function ajax_page_url( page ){
	var basepath	=	"content/pages/";
	return basepath	+	page	+	".html";
}
//Update the text in the mnu bar
function update_menu_text(title){
	//Change menu bar to reflect element selected
	$('#menu-text').text(title);
}
//Bring something to focus-> change the z-index and update menu text
function bring_focus( el, title, mousedown ){
	if ( mousedown ==  true )
		el 	=	"#"	+	el;
	//Change Z
	$(el).css("z-index", z_index);
	//Increment Z
	z_index++;
	//Update menu
	update_menu_text(title);
}

//'Close' window
function close_window(element){
	var the_element	=	'#'	+	element;
	$(the_element).hide();
	update_menu_text('Awad Sayeed');
}

//Update the 'system' clock
function updateClock ( ){
  var currentTime = new Date ( );
  var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
  var currentDay	=	dayNames[currentTime.getDay()];

  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( );
  var currentSeconds = currentTime.getSeconds ( );

  // Pad the minutes and seconds with leading zeros, if required
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate
  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  // Convert an hours component of "0" to "12"
  currentHours = ( currentHours == 0 ) ? 12 : currentHours;

  // Compose the string for display
  var currentTimeString = currentDay + " " + currentHours + ":" + currentMinutes + timeOfDay;

  // Update the time display
  $("#time").text (currentTimeString);
}


//Create Sammy
var app = $.sammy(function() { with(this) {
	//Bind functions
	
	//Change_view function
	//We randomly pick either a fade or a slide
	bind('change_view', function(e, data) { with(this) {
		//What element are we showing?
		var el			=	"#" + data['view'];
		/*
		if ( data['view'] == 'mail' ){
			//Load the page, and show
			$(el).load( ajax_page_url( data['view'] ) , function(){
				//Bring element to focus		
				bring_focus( el,  data['title']);
				$(el).fadeIn( "normal" );	  
			});
		}else{
			//Show the element already loaded by php
			bring_focus( el,  data['title']);
			$(el).fadeIn( "normal" );	
		}*/
		//Bring the element to focus
		bring_focus( el,  data['title']);
		//Fade it in
		$(el).fadeIn( "normal" );	
		//Make it draggable
		$(el).draggable( { containment: 'document' } );		}});
	//Awad
	get('#/awad', function() { with(this) {
    	trigger('change_view', { view: "awad", title: "About Awad" } );
  	}});
	//Contact
	get('#/mail', function() { with(this) {
    	trigger('change_view', { view: "mail", title: "Contact" } );
  	}});	
	//myCollegeSTAT
	get('#/mycollegestat', function() { with(this) {
    	trigger('change_view', { view: "mycollegestat", title: "myCollegeSTAT" } );
  	}});
	//MuffinMilk
	get('#/muffinmilk', function() { with(this) {
    	trigger('change_view', { view: "muffinmilk", title: 'MuffinMilk' } );
  	}});
	//YEA
	get('#/yea', function() { with(this) {
    	trigger('change_view', { view: "yea", title: 'Young Entrepreneur Association' } );
  	}});
	//FRNTSeat
	get('#/frntseat', function() { with(this) {
    	trigger('change_view', { view: "frntseat", title: 'FRNTSeat Group' } );
  	}});	
	//Load route that is displayed when the root is requested. Show modal box
	get('#/load', function(){ with(this){	
			launchWindow('#dialog');
		}
	});
	//Show Awad Sayeed if there is no route. Like how Finder is shown on OS X
	get('#/', function(){ with(this){
			update_menu_text('Awad Sayeed');
		}
	});
}});