jQuery(document).ready(function($) {
    $('#colorpicker').ColorPicker({
			onShow: function (colpkr) {
				$(colpkr).fadeIn("fast");
				return false;
			},
			onHide: function (colpkr) {
				$(colpkr).fadeOut("fast");
				return false;
			},
			onChange: function (hsb, hex, rgb) {
        var color = hex;
        var defaultPattern = "url(images/pattern/flower8.png)";
        $('body').css({
            backgroundColor: '#' + color,
            backgroundImage : defaultPattern
        });     
        $.cookie("efolio_cookie_color", color);   
        $.cookie("efolio_cookie_pattern", null);   
        $.cookie("efolio_cookie_defaultBg", defaultPattern);   
			},
      color: '#f5f5f5'
    });    
    
    $('#style-switcher a.color-box').each(function (i) {
        var a = $(this);
        a.css({
            backgroundColor: '#' + a.attr('rel')
        })
    })    
    
    $('#style-switcher a.pattern-box').each(function (i) {  
      var a = $(this);
        var patternUrl = 'url(images/pattern/' + a.attr('rel') + '.png)';
        a.css({
            backgroundImage: patternUrl
        })
    })
    
   var switcher_skins = $('#style-switcher a.color-box');
   var switcher_link = $('#skins-switcher');
      
   
  var color = $.cookie("efolio_cookie_color");
  var defaultPattern = $.cookie("efolio_cookie_defaultBg");
  var pattern = $.cookie("efolio_cookie_pattern");
  

  $('#style-switcher a.pattern-box').click(function (e) {
      e.preventDefault();
      var patternUrl = 'url(images/pattern/' + $(this).attr('rel') + '.png)';
      $('body').css({
          backgroundImage: patternUrl,
          backgroundRepeat: "repeat"
      });
      $.cookie("efolio_cookie_pattern", patternUrl)
  });
  
  var defaultPattern = $.cookie("efolio_cookie_defaultBg");
  var color = $.cookie("efolio_cookie_color");
  if (color) {
      $('body').css({
          backgroundColor: '#' + color,
          backgroundImage : defaultPattern
      });
  }
  var pattern = $.cookie("efolio_cookie_pattern");
  if (pattern) {
      $('body').css({
          backgroundImage: pattern,
          backgroundRepeat: "repeat"
      });
  }  

  
});