// JavaScript Document

jQuery.fn.styleSwitcher = function(){
	myLink=$(this);
	// Append new div to body:
	$('body').append('<div id="overlay" />');
	// Give body a height of 100% (to fix IE6 issue):
	$('body').css({height:'100%'});
	// Select newly created div and apply some styles:
	$('#overlay')
		.css({
			display: 'none',
			position: 'absolute',
			top:0,
			left: 0,
			width: '100%',
			height: '100%',
			zIndex: 1000,
			background: 'black url(img/ajax-loader.gif) no-repeat center'
		})
		// Now fade in the div (#overlay):
		.fadeIn(500,function(){
			// The following will happen when the div has finished fading in:		
				// add link element in HEAD of document
				var myStyle=myLink.attr("class");
				switchStyle(myStyle);
				// When StyleSheet has loaded, fade out and remove the #overlay div:
				setTimeout ( function(){
					$('#overlay').fadeOut(500,function(){
						$(this).remove();
					});				  
				}, 500 );		
		});
		return this;
};

switchStyle=function(myStyle){	
	console.log(myStyle);
	if(myStyle=="light"){	
		$('#dark').remove();
		$.cookie('steelfolio-style',myStyle);
	}else if(myStyle=="dark"){
		$.cookie('steelfolio-style',myStyle);
	}else{
		$('.altStyle').not('#dark').remove();
		$.cookie('steelfolio-color',myStyle);
	}
	
	$('#defaultStyle').after('<link rel="stylesheet" class="altStyle" id="'+myStyle+'" href="css/' + myStyle + '.css" type="text/css" media="screen" />');
};