var flashView;
var workView;
var currentWorkView = "grid";
var scrollView;
var controlbar;



/**
 * Click Flash
 */
function clickFlash()
{
	controlbar = $("#controlbar");
	controlbar.removeClass("background-static");
	controlbar.css({"display":"none"});
	$("#home-text").addClass("controlbar-text");
	$("#home-text").removeClass("controlbar-text-hover");
}

/**
 * Initialize Flash
 */
function initializeFlash()
{
	if( $("#noflash-message").length > 0 ) {
		return;
	}
	
	$("#controlbar").mouseover( function()
	{
		$(this).addClass("background-static");
		$("#home-text").removeClass("controlbar-text");
		$("#home-text").addClass("controlbar-text-hover");
	});
	$("#controlbar").mouseout( function()
	{
		$(this).removeClass("background-static");
		$("#home-text").addClass("controlbar-text");
		$("#home-text").removeClass("controlbar-text-hover");
	});

	flashView = $("#flash")[0];
	flashView.jsInitialized();
	
	$("#controlbar").click( function(event)
	{
		event.preventDefault();
		$(this).removeClass("background-static");
		$("#home-text").addClass("controlbar-text");
		$("#home-text").removeClass("controlbar-text-hover");

		controlbar = $("#controlbar");
		controlbar.css({"display":"none"});
		
		flashView.headerClick();
	});
}

/**
 * Initialize Grid
 */
function initializeGrid()
{
	// Grid 
	var gridItems = $(".grid-hover");
	var gridItemNum = gridItems.length;
	
	// Initial Settings
	for( i=gridItemNum-1; i>=0; i-- ) 
	{
		var gi = $(gridItems[i]);
		var gt = gi.children(".grid-title");
		gi.css({"visibility":"hidden"});
		gt.css({"margin-top":(gi.height() - gt.height() - 8) + "px"});
	}
	
	$("a.grid-item").mouseout( function(event)
	{
		event.preventDefault();
		$(this).children(".grid-hover").css({"visibility":"hidden"});
	});
	
	$("a.grid-item").mouseover( function(event)
	{
		event.preventDefault();
		$(this).children(".grid-hover").css({"visibility":"visible"});
	});
	
	$("a.grid-item").click( function(event)
	{
		event.preventDefault();
		$.address.path( "work" ).queryString( "view=project&p=" + $(this).attr("id") );
	});
	
	// Fade Content Back In
	$(".work-content").animate({opacity:1}, 600, "easeOutCubic");
}

/**
 * Initialize Project Layout and Functionality
 */
function initializeProject()
{
	var numProjects = $(".project").length;
	
	// Set Up Widths of Media Containers
	for( i=numProjects-1; i>=0; i-- )
	{
		var mc = $(".media-container")[i];
		$(mc).css({ "width" : $(mc).children().length * $(".project-media").width() });
	}
	
	// Make Project Nav Items Clickable
	$("a.project-nav-item").click( function(event)
	{
		event.preventDefault();
		targetProject = $(this).parents(".project");
		targetIndex = $(this).attr("id");
		slideToMedia( targetProject, targetIndex );
	});
	
	// Make Project Media Items Clickable
	$("a.media-item").click( function(event)
	{
		event.preventDefault();
		targetProject = $(this).parents(".project");
		targetIndex = ( $(this).next().length > 0 ) ? $(this).next().attr("id") : 0;
		slideToMedia( targetProject, targetIndex );
	});
	
	// Position Media relative to Parent Container 
	$(".media").load( function(){
		positionMedia($(this));
	});
	
	// Fade Content Back In
	$(".work-content").animate({opacity:1}, 600, "easeOutCubic");
}


/**
 * Position Media
 */ 
function positionMedia( target )
{
	var ptop = Math.round(($(target).parent().height()-$(target).height())*0.5);
	var h = $(target).parent().height();
	$(target).parent().css({"padding-top":ptop + "px", "height":Math.floor(h-ptop) + "px"});
}


/**
 * Slide Media to Correct X Position
 * @param project
 * @param index 
 */
function slideToMedia( project, index )
{
	// Update Nav
	var targetNav = project.find("a.project-nav-item[id='" + index + "']");
	targetNav.addClass("project-nav-selected");
	targetNav.parent().siblings().children("a").removeClass("project-nav-selected");

	// Target Project
	var container = project.find(".media-container");
	
	// Determine Current Target
	var currDiv = container.children("a.showing");
	var targetDiv = container.children("a[id='" + index + "']");
	
	// Perform Media Animations
	var animateMedia = function( currDiv, targetDiv )
	{
		// Direction dictated by going up or down in Index value
		var direction = (targetDiv.index() > currDiv.index()) ? -1 : 1;
		
		// Position Target
		targetDiv.css({"left":(-direction*targetDiv.width()), "opacity":0});
		targetDiv.addClass("showing");
		currDiv.removeClass("showing");
		
		// Animate Target and Current Divs
		targetDiv.animate( {left:"0px", opacity:1}, 500, "easeOutExpo" );
		currDiv.animate( {left:(direction*currDiv.width()) + "px", opacity:0}, 500, "easeOutExpo" );
	}
	
	//
	switch( true )
	{
		case currDiv.attr("id") == targetDiv.attr("id") :
			// SAME DIV, DO NOTHING
			break;
	
		case targetDiv.children("span").length > 0 :
			targetDiv.children("span").replaceWith('<img class="media loaded" src="' + targetDiv.attr("src") + '">');
			targetDiv.children("img").load(function(){
				positionMedia($(this))
				animateMedia( currDiv, targetDiv );
			});
			break;
			
		default :
			animateMedia( currDiv, targetDiv );
			break;
	}
}


/** 
 * Update Scroll Position
 * @param Section 
 */
function updateScrollPosition()
{
	// Determine Target scrollTo DIV
	var div, top;
	var maxtime = 1500;
	var mintime = 300;
	var maxdist = 3000;
	var section = $.address.pathNames()[0];
	
	// Target Scroll Position
	div = $(".section[id=" + section + "]");
	top = (div != null && div.position() !== null) ? div.position().top : 0;
	var distance = Math.min(maxdist, Math.abs(scrollView.scrollTop() - top));
	
	// If Section is not Home, and the Controlbar has been detached, reattach it.
	if( (section !== "home" || section !== "") && controlbar != null )
	{
		controlbar.css({"display":"block"});
		controlbar = null;
	}
	
	//
	if( distance <= 10 ) { 
		scrollView.scrollTop( top );
		updateScrollPositionComplete();
	}else{
		var animateTime = Math.round(mintime+((distance / maxdist) * (maxtime-mintime)));
		scrollView.animate({scrollTop:top}, animateTime, "easeInOutCubic", updateScrollPositionComplete);
	}
}


/** 
 * Update Scroll Position
 */
function updateScrollPositionComplete()
{
	updateWorkView();
}

/**
 * Update Work View Complete
 * @param data
 * @param textStatus
 * @param XMLHttpRequest
 * @return
 */
function updateWorkViewComplete( data, textStatus, XMLHttpRequest )
{
	$(".work-content").empty().append( data );
	$(".work-content").css({"opacity":0});

	switch( $(".work-content > div").attr("id") )
	{	
		case "grid" :
			initializeGrid();
			break;
		case "stack" :
			initializeProject();
			break;
		case "project" :
			initializeProject();
			break;
	}
}

/**
 * Update Work View
 */
function updateWorkView()
{	
	var newView = $.address.parameter("view");

	// If we've left the Work section, update the workView so
	//  we come back to the same one
	if( $.address.pathNames()[0] !== "work" ){
		workView = currentWorkView;
		return;
	}
	
	if( currentWorkView !== newView )
	{
		// If we require a new workView, empty the current view and
		//  replace with a load spinner
		$(".work-content").empty().append( "<div class='loader'><img src='images/ajax-loader.gif' alt=''></img></div>" );

		var ajaxData = {url:"includes/work.php", data:{request:newView}, success:updateWorkViewComplete};
		
		// If we've set the project ID, add it to the AJAX Query.
		if( newView == "project" ) {
			ajaxData.data.id = $.address.parameter("p");
		}
		
		// Call the AJAX Data
		$.ajax( ajaxData );
	}
	
	// Update the workView setting
	currentWorkView = newView;
	
	// Update the Work Navigation
	var view = $("a.worknav[id=" + newView + "]");
	view.toggleClass("worknav-selected", true);
	view.siblings().toggleClass("worknav-selected", false);
}


/**
 * When the DOM is ready, initialize the scripts.
 */
$(document).ready( function()
{	
	var i = 0; // For Loops
	var targetProject, targetIndex;
	
	// ScrollView
	scrollView = getRootScroller();
	
	//
	
	// Update Heights of Columns
	var cols = $(".column");
	var numCol = cols.length;
	for( i=0; i<numCol; i++ )
	{
		$(cols[i]).css( {"height":$(cols[i]).parent().innerHeight() + "px"} );
	}
	
	// Highlight Selected Primary Nav
	$("a.topnav").click( function(event)
	{
		event.preventDefault();
		var section = $(this).attr('href');
		
		switch( true )
		{
			case section == $.address.pathNames()[0] :
				updateScrollPosition()
				break;
			
			case section == "work" :
				$.address.path( section ).parameter( "view", currentWorkView );
				break;
				
			default :
				$.address.value( section );
				break;
		}
	});
	
	$("a.worknav").click( function(event)
	{
		event.preventDefault();
		$.address.value($(this).attr('href'));  
	});
	
	
	$("#controlbar").click( function(event)
	{
		event.preventDefault();
	});
	
	initializeGrid();
});


/**
 * Handle SWFAddress Changes
 */
$.address.change(function(event) 
{  
	var section = event.pathNames[0];
	
	// Update Topnav
	var topnav = $("a.topnav[id=" + section + "]");
	topnav.toggleClass("topnav-selected", true);
	topnav.parent().siblings().children("a").toggleClass("topnav-selected", false);
		
	// Scroll Window
	updateScrollPosition();	
	
//	var alertStr = "Event Properties: ";
//	for( var p in event ) { alertStr += "\n " + p + " : " + event[p]; }
//	alert( alertStr );	
});


/**
 * Handle Window Load Event
 */ 
$(window).load( function() 
{		
	// Position Media Items
	var containerHeight = $(".project-media").height();
	var mediaItems = $(".media");
	var numProjects = $(".project").length;
	
	for( i=numProjects-1; i>=0; i-- ) {
		positionMedia( mediaItems[i] );
	}
});


function getRootScroller() 
{
    var $html = $('html');
    var $body = $('body');
    
    switch( true )
    {
	    case $html.scrollTop() > 0 :
	    	return $html;
	    	break;
	    case $body.scrollTop() > 0 :
	    	return $body;
	    	break;
	    case $html.scrollTop(1) && $html.scrollTop() === 1 :
	    	$html.scrollTop(0);
	    	return $html;
	    	break;
	    case $body.scrollTop(1) && $body.scrollTop() === 1 :
	    	$body.scrollTop(0);
	    	return $body;
	    	break;
	    default :
	    	return $({});
	    	break;
    }
}