jQuery(document).ready(function($) {
	
	var typewidthval = jQuery.cookie("ts_cookie_typewidthval");
	if(typewidthval=="fullwidth-layout"){
		var fixedselected = "";
		var fullwidthselected = 'selected="selected"';
	}else{
		var fixedselected = 'selected="selected"';
		var fullwidthselected = '';
	}
	
	var styleswitcherstr = ' \
	<div id="style-switcher"> \
	<form id="style-switcher-form">\
	  <div class="switchercontainer"> \
		  <span>Type Width</span> \
		  <div id="typewidthcontainer"> \
		  	<select id="typewidth" name="typewidth"> \
				<option value="fixed-layout" '+fixedselected+'>Fixed Width</option> \
				<option value="fullwidth-layout" '+fullwidthselected+'>Full Width</option> \
			</select> \
		  </div> \
		  <div class="clear"></div> \
	  </div> \
	  <div class="switchercontainer"> \
		  <span>BG Color</span> \
		  <div id="colorpicker4"></div> <span class="pickertext">Body</span>  \
		  <div class="clear"></div> \
		  <div id="colorpicker6"></div> <span class="pickertext">Border Top</span>  \
		  <div class="clear"></div> \
	  </div> \
	  <div class="switchercontainer"> \
		  <span>BG Patterns</span> \
		  <a rel="bg-body1" class="bg-box" href=""></a> \
		  <a rel="bg-body2" class="bg-box" href=""></a> \
		  <a rel="bg-body3" class="bg-box" href=""></a> \
		  <a rel="bg-body4" class="bg-box" href=""></a> \
		  <a rel="bg-body5" class="bg-box" href=""></a> \
		  <a rel="bg-body6" class="bg-box" href=""></a> \
		  <a rel="bg-body7" class="bg-box" href=""></a> \
		  <a rel="bg-body8" class="bg-box" href=""></a> \
		  <a rel="bg-body9" class="bg-box" href=""></a> \
		  <a rel="bg-body10" class="bg-box" href=""></a> \
		  <a rel="bg-body11" class="bg-box" href=""></a> \
		  <a rel="bg-body12" class="bg-box" href=""></a> \
		  <a rel="bg-body13" class="bg-box" href=""></a> \
		  <a rel="bg-body14" class="bg-box" href=""></a> \
		  <div class="clear"></div> \
	  </div> \
	  <div class="switchercontainer"> \
		  <span>Fonts Color</span> \
		  <div id="colorpicker"></div> <span class="pickertext">Text</span>  \
		  <div class="clear"></div> \
		  <div id="colorpicker2"></div> <span class="pickertext">Link</span>  \
		  <div class="clear"></div> \
		  <div id="colorpicker3"></div> <span class="pickertext">Heading Color</span>  \
		  <div class="clear"></div> \
	  </div> \
	  <div class="switchercontainer"> \
		  <a href="#" id="switcher-reset">Reset</a> \
		  <div class="clear"></div> \
	  </div> \
	</form>\
	</div> \
	';
	
	jQuery("body").prepend( styleswitcherstr );
	
	jQuery('#typewidth').change(function(e){
		var typewidthval = jQuery(this).val();
		jQuery("#layoutcss").attr("href","styles/"+typewidthval+".css");
		
		if(typewidthval=="fullwidth-layout"){
			var bodybgcolor = "ffffff";
			var backgroundUrl = "none";
		}else{
			var bodybgcolor = "729930";
			var backgroundUrl = 'url(styles/bg/bg-body1.png)';
			
		}
		
		jQuery('body').css({
			"background-color": '#' + bodybgcolor,
			backgroundImage: backgroundUrl,
			backgroundRepeat: "repeat"
		});     
		jQuery.cookie("ts_cookie_bodybgcolor", bodybgcolor);
		jQuery.cookie("ts_cookie_bgimage",backgroundUrl);
		
		
		jQuery.cookie("ts_cookie_typewidthval", typewidthval);
	});
    
	/*************** COLOR PICKER ******************/
	jQuery('#colorpicker').ColorPicker({
			onShow: function (colpkr) {
				jQuery(colpkr).fadeIn("fast");
				return false;
			},
			onHide: function (colpkr) {
				jQuery(colpkr).fadeOut("fast");
				return false;
			},
			onChange: function (hsb, hex, rgb) {
				
				var bodycolor = hex;
				jQuery('body').css({
					"color": '#' + bodycolor
				});     
				jQuery.cookie("ts_cookie_bodycolor", bodycolor);   
			},
      color: '#6a6b6c'
    });
	
	jQuery('#colorpicker2').ColorPicker({
			onShow: function (colpkr) {
				jQuery(colpkr).fadeIn("fast");
				return false;
			},
			onHide: function (colpkr) {
				jQuery(colpkr).fadeOut("fast");
				return false;
			},
			onChange: function (hsb, hex, rgb) {
				
				var linkcolor = hex;
				jQuery('#content-container a').css({
					"color": '#' + linkcolor
				});     
				Cufon.refresh();
				jQuery.cookie("ts_cookie_linkcolor", linkcolor);   
				
			},
      color: '#d66e51'
    });
	
	jQuery('#colorpicker3').ColorPicker({
			onShow: function (colpkr) {
				jQuery(colpkr).fadeIn("fast");
				return false;
			},
			onHide: function (colpkr) {
				jQuery(colpkr).fadeOut("fast");
				return false;
			},
			onChange: function (hsb, hex, rgb) {
				
				var headercolor = hex;
				jQuery('h1, h2, h3, h4, h5, h6').css({
					"color": '#' + headercolor
				});     
				Cufon.refresh();
				jQuery.cookie("ts_cookie_headercolor", headercolor);   
				
			},
      color: '#3b3b3b'
    });
	
	jQuery('#colorpicker4').ColorPicker({
			onShow: function (colpkr) {
				jQuery(colpkr).fadeIn("fast");
				return false;
			},
			onHide: function (colpkr) {
				jQuery(colpkr).fadeOut("fast");
				return false;
			},
			onChange: function (hsb, hex, rgb) {
				
				var typewidthval = jQuery.cookie("ts_cookie_typewidthval");
				if(typewidthval=="fullwidth-layout"){
					var bodybgcolor = "ffffff";
				}else{
					var bodybgcolor = hex;
				}
				
				jQuery('body').css({
					"background-color": '#' + bodybgcolor
				});     
				jQuery.cookie("ts_cookie_bodybgcolor", bodybgcolor);   
				
			},
      color: '#729930'
    });
	
	jQuery('#colorpicker6').ColorPicker({
			onShow: function (colpkr) {
				jQuery(colpkr).fadeIn("fast");
				return false;
			},
			onHide: function (colpkr) {
				jQuery(colpkr).fadeOut("fast");
				return false;
			},
			onChange: function (hsb, hex, rgb) {
				
				var typewidthval = jQuery.cookie("ts_cookie_typewidthval");
				if(typewidthval=="fullwidth-layout"){
					var borderselector = "body";
				}else{
					var borderselector = "#container";
				}
				
				var bordertopcolor = hex;
				jQuery(borderselector).css({
					"border-top-color": '#' + bordertopcolor
				});     
				jQuery.cookie("ts_cookie_bordertopcolor", bordertopcolor);   
				
			},
      color: '#3b3b3b'
    });
	
	
	/*************** END COLOR PICKER ******************/
	
	/*************** BACKGROUND PATTERN BOX **************/
	jQuery('#style-switcher a.bg-box').each(function (i) {
		var backgroundUrl = 'url(styles/bg/' + jQuery(this).attr('rel') + '.png)';
		var a = jQuery(this);
		a.css({
			backgroundImage: backgroundUrl,
	  		backgroundRepeat: "repeat"
		})
	});
	/*************** END BACKGROUND PATTERN BOX **************/
	
  
  /********** bg-box.click ***************/
  jQuery('#style-switcher a.bg-box').click(function (e) {
      	e.preventDefault();
		
		var typewidthval = jQuery.cookie("ts_cookie_typewidthval");
		if(typewidthval=="fullwidth-layout"){
			var backgroundUrl = "none";
		}else{
			var backgroundUrl = 'url(styles/bg/' + jQuery(this).attr('rel') + '.png)';
			
		}
      jQuery('body').css({
          backgroundImage: backgroundUrl,
          backgroundRepeat: "repeat"
      });
    jQuery.cookie("ts_cookie_bgimage",backgroundUrl);
  });
  /********** end bg-box.click ***********/

  var bodycolor			= jQuery.cookie("ts_cookie_bodycolor");
  var linkcolor			= jQuery.cookie("ts_cookie_linkcolor");
  var headercolor		= jQuery.cookie("ts_cookie_headercolor");
  var bodybgcolor		= jQuery.cookie("ts_cookie_bodybgcolor");
  var bordertopcolor	= jQuery.cookie("ts_cookie_bordertopcolor");
  var background 		= jQuery.cookie("ts_cookie_bgimage");
  var typewidthval		= jQuery.cookie("ts_cookie_typewidthval");
  
  
  if(bodycolor){
	jQuery("body").css({
		"color" : "#"+bodycolor
	});  
  }
  
  if(linkcolor){
  	jQuery('#content-container a').css({
		"color": '#'+linkcolor
	});
  }
  
  if(headercolor){
  	jQuery('h1, h2, h3, h4, h5, h6').css({
		"color": '#'+headercolor
	});
  }
  
  if(bodybgcolor){
  	jQuery('body').css({
		"background-color": '#'+bodybgcolor
	});
  }
  
  if(bordertopcolor){
	
	if(typewidthval=="fullwidth-layout"){
		var borderselector = "body";
	}else{
		var borderselector = "#container";
	}
	
  	jQuery(borderselector).css({
		"border-top-color": '#'+bordertopcolor
	});
  }

  if (background) {
      jQuery('body').css({
        backgroundImage: background,
        backgroundRepeat: "repeat"
      });
  } 
  
  if (typewidthval) {
      jQuery("#layoutcss").attr("href","styles/"+typewidthval+".css");
  } 
  
  Cufon.refresh();
  
  jQuery("#switcher-reset").click(function(){
  		
		var bodycolor = "6a6b6c";
		jQuery('body').css({
			"color": '#' + bodycolor
		});     
		jQuery.cookie("ts_cookie_bodycolor", bodycolor);
		
		var linkcolor = "d66e51";
		jQuery('#content-container a').css({
			"color": '#' + linkcolor
		});     
		jQuery.cookie("ts_cookie_linkcolor", linkcolor);
		
		var headercolor = "3b3b3b";
		jQuery('h1, h2, h3, h4, h5, h6').css({
			"color": '#' + headercolor
		});     
		jQuery.cookie("ts_cookie_headercolor", headercolor);
		
		var bodybgcolor = "729930";
		jQuery('body').css({
			"background-color": '#' + bodybgcolor
		});     
		jQuery.cookie("ts_cookie_bodybgcolor", bodybgcolor);
		
		var bordertopcolor = "3b3b3b";
		jQuery('#container').css({
			"border-top-color": '#' + bordertopcolor
		});     
		jQuery.cookie("ts_cookie_bordertopcolor", bordertopcolor);
		
		var backgroundUrl = 'url(styles/bg/bg-body1.png)';
		jQuery('body').css({
		  	backgroundImage: backgroundUrl,
		  	backgroundRepeat: "repeat"
	  	});
		jQuery.cookie("ts_cookie_bgimage",backgroundUrl);
		
		var typewidthval = "fixed-layout";
		jQuery("#layoutcss").attr("href","styles/"+typewidthval+".css");
		jQuery.cookie("ts_cookie_typewidthval",typewidthval);
		
		jQuery("#typewidth").val("fixed-layout");
		 
		
		Cufon.refresh();
  });
         
});