$(document).ready(function()
{

	var _theme = 'plainHtmlTheme'; 
	var _uwSwf = 'uw.swf';
	var _colorSwf = 'dec09.swf';
	var _swf = _colorSwf;
	var _wantsFlash = true;
	
	var _imageWater = '<div id="newflash"><div id="header" ><h1 class="imagereplacement-water">Flash Website Design portfolio by Julian Kigwana</h1></div></div>';
	var _imageColor = '<div id="newflash"><div id="header" ><h1 class="imagereplacement">Flash Website Design portfolio by Julian Kigwana</h1></div></div>';
	var _imageReplacement = _imageColor ;
	
	var _themeContent = '<div class="portfolioitem single highlight" >' +
						'<h4>Theme</h4>' +
						'<p><span class="link-default load-chameleon-swf">Chameleon</span>  / <span class="link-default load-underwater-swf">Underwater</span></p>' +
						'</div>';	
					
	var _effectsContent = '<div class="portfolioitem single highlight" id="effects">' +
						'<h4>Effects</h4>' +
						'<p>Coming soon...</p>' +
						'<p>Flash header : <span class="link-default">on</span> / <span class="link-default">off</span></p>' +
						'<p>Ambience: <span class="link-default">on</span> / <span class="link-default">off</span></p>' +
						'<p>3D image replacement : <span class="link-default">on</span> / <span class="link-default">off</span></p>' +
						'</div>';

	var _splashContent = '<div class="portfolioitem single highlight" id="control-panel">' +
						'<h4>Splash</h4>' +
						'<p>Open the <span class="link-active splash">splash page</span></p>'+
						'</div>';

	var _defaultcolor = '#666';
	var _activecolor = '#666';
	var _highlightcolor = '#999';
	var _h4Headercolor = '#444';
	var _linkDefaultColor = '#eee';
	var _linkDefaultBGColor = '#ccc';
	var _headerBGColor = '#444'; 
	var _itemBGColor = '#e0e0e1'; 
	
	var tabs,
		tabsSelector = '#tabs ul:first li:has(a[href])',
		defaultClass = 'ui-state-default',
		activeClass = 'ui-tabs-selected ui-state-active';
	
	var _flashHeight = '0px';
	var _siteStateSplash = true;
	
	$("h2").stop().animate({ opacity: 'hide' }, { duration:10 });
	
	
	function updateLinks( )
	{
		
		jQuery( '.link-active' ).stop().css( 'padding' , '1px 4px 2px' ).css( 'cursor' , 'pointer' ).css('text-shadow', '0 5px 10px #000000').css( 'color', '#fff');
		jQuery( '.link-active' ).animate({ backgroundColor: _activecolor  });
		jQuery( '.link-active' ).hover( function(){
			jQuery(this).css('background-color', _defaultcolor );		
		}, function() {
			jQuery(this).css('background-color', _activecolor );
		});
		
		jQuery( '.link-default' ).stop().css( 'padding' , '1px 4px 2px' ).css( 'color', _linkDefaultColor ).css( 'cursor' , 'auto' ).css('text-shadow', 'none');
		jQuery( '.link-default' ).animate({ backgroundColor: _linkDefaultBGColor  }, 'slow' );
		jQuery( '.link-default' ).hover( function(){
			jQuery(this).css('background-color', _linkDefaultBGColor );		
		}, function() {
			jQuery(this).css('background-color', _linkDefaultBGColor );
		});	
		
		jQuery( 'div#footer a' ).stop().css( 'padding' , '1px 4px 2px' ).css( 'color', _linkDefaultColor ).css('text-shadow', '0 5px 10px #000000');
		jQuery( 'div#footer a' ).animate({ backgroundColor: _linkDefaultBGColor  }, 'slow' );
		jQuery( 'div#footer a' ).hover( function(){
			jQuery(this).css('background-color', _activecolor );		
		}, function() {
			jQuery(this).css('background-color', _linkDefaultBGColor );
		});
		
		//alert("updateLinks: " + _theme);
	}

	function changeTheme( theme )
	{
		if( _theme == theme)
		{
			return;
		}
		_theme = theme;
		
		$(".portfolioitem").uncorner();
	
		if( theme == '_water' )
		{
			_swf = _uwSwf;
			_imageReplacement = _imageWater;
			_linkDefaultColor = '#000';
			_linkDefaultBGColor = '#444';
			_headerBGColor = "#000";
			_h4Headercolor = '#39f';
			_itemBGColor = '#171717';
			
			$(".load-chameleon-swf").removeClass("link-default").addClass("link-active");
			$(".load-underwater-swf").removeClass("link-active").addClass("link-default");
		
			$(".ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, .ui-state-active a").css('text-shadow', 'none');		
			$("body, #flashcontent, ul.tabbernav, .portfolioitem").css('color', '#9bb').css('background-color', '#101010');	
	
			$(".portfolioitem").css('border-bottom', '1px solid #171717');
			$("#flashcontainer").css('background-color' , '#000' );
			$("h4").css('color', _h4Headercolor );
			$("div#footer p").css('color', _linkDefaultBGColor );
			
			$("#flashcontainer").empty( );	
			$("#flashcontainer").append( _imageReplacement ) ;
			$("#newflash").css('height', '100%').css('background-color',  _headerBGColor ).css('position', 'relative').css('width', '100%').css('margin-bottom', '0');
			$("#flashcontainer").css('background-color' , '#000' );
			
			updateLinks( );
			
			addswf( "newflash" );
			
		}
		else if( theme == '_color' )
		{
			_swf = _colorSwf;
			_imageReplacement = _imageColor;
			_linkDefaultColor = '#eee';
			_linkDefaultBGColor = '#aaa';
			_headerBGColor = "#444";
			_h4Headercolor = '#444';
			_itemBGColor = '#e0e0e1';
			
			$(".load-underwater-swf").removeClass("link-default").addClass("link-active");
			$(".load-chameleon-swf").removeClass("link-active").addClass("link-default");
			
			$(".ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, .ui-state-active a").css('text-shadow', '0 2px 2px #CCCCCC');
			$("body, #flashcontent, ul.tabbernav, .portfolioitem ").css('background-color', '#EEE').css('color', '#444');	
			
			$("#tabs").stop().animate({ marginTop: '0px' }, 'slow' );
			$("#flashcontainer").css('background-color' , '#444' );
			$(".portfolioitem").css('border-bottom', '1px solid #ddd');
			$("h4").css('color', _h4Headercolor );
			$("div#footer p").css('color', _linkDefaultBGColor );
			
			$("#flashcontainer").empty( );	
			$("#flashcontainer").append( _imageReplacement );
			$("#newflash").css('height', '100%').css('background-color',  _headerBGColor ).css('position', 'relative').css('width', '100%').css('margin-bottom', '0');
			$("#flashcontainer").css('background-color' , '#444' );
			updateLinks( );
			
			addswf( "newflash" );
			
		}
		
		$(".portfolioitem").corner("round 8px");
	}
	
	jQuery( 'div#left-column #highlight .portfolioitem, .highlight .portfolioitem, div#flashdetection .portfolioitem' ).hover( function(){
	
		jQuery(this).stop().css('background-color', _itemBGColor );	
				
	}, function() {
	
		jQuery(this).stop().css('background-color', 'transparent' );	
		
	});
	
	
	
	$('#tabs').tabs( { selected: -1 } ); 
	$('#tabs').bind('tabsselect', function(event, ui) 
	{
		//Objects available in the function context:
		//ui.tab     // anchor element of the selected (clicked) tab
		//ui.panel   // element, that contains the selected/clicked tab contents
		//ui.index   // zero-based index of the selected (clicked) tab	
	
	});

	$('#tabs').bind('tabsload', function(event, ui) 
	{
		//ui.tab     // anchor element of the selected (clicked) tab
		//ui.panel   // element, that contains the selected/clicked tab contents
		//ui.index   // zero-based index of the selected (clicked) tab	

	});

	$('#tabs').bind('tabsshow', function(event, ui) 
	{
		_siteStateSplash = false;
		//siteState(  );
		
		
		//if(_theme == '_water'){
		//	_activecolor = '#59f';
		
		//} else

		//{
			if(ui.index == '0'){
				_activecolor = '#6b5';
			}else if(ui.index == '2'){
				_activecolor = '#d93';
			}else if(ui.index == '1'){
				_activecolor = '#5af';
			}else if(ui.index == '3'){
				_activecolor = '#F75'; 
			}

		//}
		
		jQuery( 'div#left-column a, div#right-column a' ).css('background-color', _activecolor );
		jQuery( 'div#left-column a, div#right-column a' ).hover( function(){
		
			if(!$(this).hasClass("image")) { 
				jQuery(this).css('background-color', _defaultcolor );		
			} 
					
		}, function() {
			if(!$(this).hasClass("image")) { 
				jQuery(this).css('background-color', _activecolor );
			} 
		});
	
		updateTabsTitles( );
		updateLinks( );
		updateLayout( );
		//$("#labs").remove( "ajax-content" ) ;
		
	});
	
	function updateTabsTitles( )
	{
	
		jQuery( '.ui-state-default a' ).stop().animate({ color: _defaultcolor }, { duration:600 } );
		jQuery( '.ui-state-default a' ).hover( function(){
	
			if( _siteStateSplash ){
			
				jQuery(this).stop().css('color', _highlightcolor );	
			
			} else {
			
				jQuery(this).stop().css('color', _highlightcolor );	
				
			}
					
		}, function() {
		
			jQuery(this).stop().css('color', _defaultcolor );
			
		});

		jQuery( '.ui-state-active a' ).stop().animate({ color: _activecolor }, { duration:600 } );
		jQuery( '.ui-state-active a' ).hover( function(){
		
			jQuery(this).stop().css('color', _activecolor );		
			
		}, function() {
		
			jQuery(this).stop().css('color', _activecolor );
			
		});
		
	}
	
	function showLeft()
	{
		$("#left-column").animate({ opacity: 'show' }, 'slow', showRight );
	}
	
	function showRight()
	{
		$("#right-column").animate({ opacity: 'show' }, 'slow' );
	}

	function setupPortfolio( ){
		$(".ajax-content, .imagegrow").find('.float-left').css('width' , '150px' );
		$(".imagegrow").find('.float-right').css('width' , '320px' );
		$(".imagegrow").find('.float-left').hover(function(){

			jQuery(this).stop().animate({ width: '250px' }, 'slow' );
			jQuery(this).parent().find('.float-right').stop().animate({ width: '220px' }, 'slow' );
		
		}, function() {
			
			jQuery(this).stop().animate({ width: '150px' }, 'slow' );
			jQuery(this).parent().find('.float-right').stop().animate({ width: '320px' }, 'slow' );
		});
	}

	/*
	$(".accordion h4").nextAll("p").slideUp("fast");
	
	$(".accordion h4").click(function(){
	
		$(this).nextAll("p").slideToggle("fast");
		$(this).toggleClass("inactive");
		//$(this).siblings("h4").removeClass("active");
		
		if( $(this).hasClass("inactive")){
			$(this).animate({ marginLeft: '20px' }, 'fast' );
		}else{
		
			$(this).animate({ marginLeft: '0px' }, 'fast' );
		}
	});
	
	$(".accordion h4").hover(function(){
	
		$(this).stop().animate({ color: _h4Headercolor }, 'fast' );

	}, function() {
	
		$(this).stop().animate({ color: _defaultcolor }, 'fast' );
	});*/
	

	

	function toggleSplash( ){
	
	   if( _siteStateSplash )
		{
			_siteStateSplash = false;
		
		} else {
			
			_siteStateSplash = true;
		}
		
		$('#tabs').tabs( { selected: -1 } );
		$(".ui-tabs-selected").removeClass("ui-state-active").removeClass("ui-tabs-selected").addClass("ui-state-default");
		updateTabsTitles( );
		updateLayout( ); 
	}

	
	/*var ajaxTestClick = 0;
	//var curItem = $("#portfolio").find(".portfolioitem").length;
	
	$("#ajax-test").click(function(){
		//alert("ajaxTestClick:  " + ajaxTestClick + "    numItems" + numItems );
		
		$("#labs").append( '<div class="ajax-content"></div>' ) ;
		
		if( ajaxTestClick <= numItems ){
			
			$("#labs .ajax-content:last").load("more.htm .portfolioitem:eq(" + ajaxTestClick + ")");
			ajaxTestClick = ajaxTestClick + 1;
			
		}
		else {
		
			$("#ajax-test").remove( "a" );
		}
		
		//curItem = $("#portfolio").find(".portfolioitem").length;
	});*/
	
	
	/////////////////////////////////////////swf object////////////////////////////////////////////////
	var flashvars = {};
	flashvars.content = "xml/content.xml";
	flashvars.googleAnalytics = "false"; 
	flashvars.debug = "false"; 
	flashvars.padding = "40"; 
	flashvars.width = "841"; 
	flashvars.clickUrl = "#"; 
		
	var params = {};
	params.scale = "noScale";
	params.allowfullscreen = "true";
	params.wmode = "opaque";
	//params.bgcolor = "#f44444";
	params.allowScriptAccess = "always";
		
	var attributes = {};
	//attributes.id = "foo";

	function addswf( newcontainer ){
		if( _wantsFlash ){
			swfobject.embedSWF( _swf , newcontainer, "100%", "100%", "10", false, flashvars, params, attributes, flashloaded );
		}
	}
	
	function flashloaded( e ){

		if( e.success ){

			$(".add-swf").removeClass("link-active").addClass("link-default");
			$(".remove-swf").removeClass("link-default").addClass("link-active");
			updateLinks( );	
		}
			
	}
	

					
	if (swfobject.hasFlashPlayerVersion("10")) {
		// yesFlash yesJavascript
		
		$("#flashdetection").empty( );
		$("#flashdetection").append( '<div class="portfolioitem single highlight">' +
									'<h4>Flash?</h4>' +
									'<p><span class="link-default add-swf">Add flash</span> or <span class="link-default remove-swf">Remove all flash</span></p></div>' +
									_themeContent + _effectsContent + _splashContent);
									
		
		
	}
	else {
		// noFlash yesJavascript 
		$("#flashdetection").empty( );
		$("#flashdetection").append( '<div class="portfolioitem single highlight">' +
									 '<h4>No Flash?</h4>' +
									 '<p>This website will look a lot more flashy if you install the latest <a href="http://www.adobe.com/getflash" title="Download Flash" class="link-active get-flash">flash player</a></p></div>' +
									_themeContent + _splashContent)
	}
									
	
	
	
	$(".load-underwater-swf").click(function(){
	
		if( $(this).hasClass("link-active")){
		
			$("#flashcontainer").empty( );
			changeTheme( '_water' );
			updateLayout( );		
		}
	});
	
	$(".load-chameleon-swf").click(function(){
	
		if( $(this).hasClass("link-active")){
		
			$("#flashcontainer").empty( );	
			changeTheme( '_color' );
			updateLayout( );
		}
	});

	//////////////////////////////////////////////////////////////////////////////////////////////////
	
	
	
	$(".remove-swf").click(function(){
	
		if( $(this).hasClass("link-active")){
		
			_wantsFlash = false;
	
			swfobject.removeSWF("newflash");
			$("#flashcontainer").empty( );
			
			$("#flashcontainer").append( _imageReplacement );
			$("#newflash").css('height', '100%').css('background-color',  _headerBGColor ).css('position', 'relative').css('width', '100%').css('margin-bottom', '0').css( 'cursor' , 'pointer' );

			$(".remove-swf").removeClass("link-active").addClass("link-default");
			$(".add-swf").removeClass("link-default").addClass("link-active");	
			$("#effects").animate({ opacity: 'hide', height:'toggle' }, 'slow' );
			
			updateLinks( );
		}
	});
	
	$(".add-swf").click(function(){
	
		if( $(this).hasClass("link-active")){
		
			_wantsFlash = true;
			
			$("#flashcontainer").empty( );	
			$("#flashcontainer").append( _imageReplacement );
			$("#newflash").css('height', '100%').css('position', 'relative').css('width', '100%').css('margin-bottom', '0');

			$(".add-swf").removeClass("link-active").addClass("link-default");
			$(".remove-swf").removeClass("link-default").addClass("link-active");	
			$("#effects").animate({ opacity: 'show', height:'toggle' }, 'slow' );
			
			updateLinks( );
			
			addswf( "newflash" );
		}
		
	});
	
	$(".get-flash").click(function(){
		
		if( $(this).hasClass("link-active")){
			window.open('http://get.adobe.com/flashplayer');
			return false;
		}
	});
	
	
	$("#flashcontainer, .splash").click(function(){
		window.location = "#"	;
	});

	//load the rest of the portfolio
	//$("#portfolio").append( '<div id="more"></div>' ) 
	//$("#portfolio #more").load("more.htm .portfolioitem");
	
	// Address handler
	$.address.init(function(event) {
	
		
		// Tabs setup
		tabs = $('#tabs').tabs({
			// Content filter
			load: function(event, ui) {
				$(ui.panel).html($('#tabs div:first', ui.panel).html());
			}
		}).css('display', 'block');
		
		toggleSplash( );
		
		/*
		// Init flicker fix   --- this code is causing the site in initialise on the wrong page
		$(tabsSelector).removeClass(activeClass)
		   .addClass(defaultClass);
		$($('a[rel=address:' + $.address.value() + ']')[0].parentNode)
		   .removeClass(defaultClass).addClass(activeClass);
		   */
		   
		
	   
	}).change(function(event) {
	
		var selection = $('a[rel=address:' + event.value + ']');
		tabs.tabs( 'select', selection.attr('href'));
		var title = $.address.title($.address.title().split(' | ')[0] + ' | ' + selection.text());	

		if( selection.attr('href') == undefined )
		{
			toggleSplash( );
		}

	});
	
	function updateLayout( ){
	
	    var vCenter = $(window).height() / 2;
		
		if( _theme == '_color' ){
		
			if( vCenter <= 255 ){
				_flashHeight = 255;
			}else{
				_flashHeight = vCenter;
			}	
			
		}
		
		else if ( _theme == '_water' ){
			
			
			if( $(window).height() <= 280 ){
				_flashHeight = 280;
			}else{
				_flashHeight = $(window).height();
			}	
			
			if( _siteStateSplash ){ 
				$("#tabs").stop().animate({ marginTop: -( _flashHeight/2 ) + 50}, 'slow' );
			}
			else
			{
				$("#tabs").stop().animate({ marginTop: -50}, 'slow' );
			}
			
		}
		
		if( _siteStateSplash )
		{ 
			$("#flashcontainer").stop().animate({ height: _flashHeight }, { duration:500 });
			$("#right-column, #left-column").stop().animate({ opacity: 'hide' }, { duration:10 });
			$(".tab_content").addClass("ui-tabs-hide");
		}
		
		else {
			
			// start transitions
		   $("#flashcontainer").stop().animate({ height: '255px' }, 'slow', showLeft );
		}
	}
	
	
	//$("h1.imagereplacement").css( 'background',  _image );	
	
	//allows for wsc standard external links to pen in blank pages
	$("a[href*='http://']:not([href*='"+location.hostname+"']), .external").attr("target","_blank"); 
	// for some unkown reason this is not workin on IE. need to debug before adding this line
	//$("div#left-column a, div#right-column a, div#footer a").corner("round 3px");	
	
	$(window).scroll( updateLayout ).resize( updateLayout );		
	setupPortfolio( );
	if( Math.random() < 0.5 ){
		changeTheme( '_water' );	
	}else{
		changeTheme( '_color' );
	}
	//addswf( 'headerbackground' );
	
});

// Graceful FOUC
//document.write('<style type="text/css"> #tabs { display: none; } </style>');

/*
function getFlashMovie(movieName) {
  var isIE = navigator.appName.indexOf("Microsoft") != -1;
  return (isIE) ? window[movieName] : document[movieName];
}

function callToActionscript(str) 
{
   getFlashMovie("nameOfFlashMovie").sendToActionscript(str);
}
*/