jQuery.noConflict();

jQuery(document).ready(function(){

  jQuery("#style-profile-button").click(function(event){
  
	jQuery("#style-profile").toggle();
	
	return false;
	
  });
  
  // Checks if the user change the value of an field and show a live preview
  
  // Backgroundcolor
  
  jQuery('#pd-bgcolor').change(function() {
  
    jQuery('#profile-container').css("background", '#' + jQuery(this).val());
  
  });
  
    jQuery('#pd-bgcolor').ColorPicker({
	
	onSubmit: function(hsb, hex, rgb, el) {
		jQuery(el).val(hex);
		jQuery(el).ColorPickerHide();
		jQuery('#profile-container').css("background", '#' + hex);
	},
	onBeforeShow: function () {
		jQuery(this).ColorPickerSetColor(this.value);
	}
	
   }).bind('keyup', function(){
   
	jQuery(this).ColorPickerSetColor(this.value);
	
	
   });
  
  // Backgroundimage
  
  jQuery('#pd-bgimage').change(function() {
  
    jQuery('#profile-container').css("background-image", 'url(' + jQuery(this).val() + ')');
  
  });
  
  // Bordertype
  
  jQuery('#pd-borderstyle').change(function() {
  
    jQuery('#profile-container').css("border-style", jQuery(this).val());
  
  });
  
  // Bordersize
  
  jQuery('#pd-bordersize').change(function() {
  
    jQuery('#profile-container').css("border-width", jQuery(this).val());
  
  });
  
  // Bordercolor
  
  jQuery('#pd-bordercolor').change(function() {
  
    jQuery('#profile-container').css("border-color", jQuery(this).val());
  
  });
  
    jQuery('#pd-bordercolor').ColorPicker({
	
	onSubmit: function(hsb, hex, rgb, el) {
		jQuery(el).val(hex);
		jQuery(el).ColorPickerHide();
		jQuery('#profile-container').css("border-color", '#' + hex);
	},
	onBeforeShow: function () {
		jQuery(this).ColorPickerSetColor(this.value);
	}
	
   }).bind('keyup', function(){
   
	jQuery(this).ColorPickerSetColor(this.value);
	
	
   });
  
  // Fontcolor
  
  jQuery('#pd-fontcolor').change(function() {
  
    jQuery('#profile-container').css("color", jQuery(this).val());
  
  });
  
    jQuery('#pd-fontcolor').ColorPicker({
	
	onSubmit: function(hsb, hex, rgb, el) {
		jQuery(el).val(hex);
		jQuery(el).ColorPickerHide();
		jQuery('#profile-container, .trow1, .trow2').css("color", '#' + hex);
	},
	onBeforeShow: function () {
		jQuery(this).ColorPickerSetColor(this.value);
	}
	
   }).bind('keyup', function(){
   
	jQuery(this).ColorPickerSetColor(this.value);
	
	
   });
  
  // Linkcolor
  
  jQuery('#pd-linkcolor').change(function() {
  
    jQuery('#profile-container a:link, #profile-container a:hover, #profile-container a:active, #profile-container a:visited').css("color", jQuery(this).val());
  
  });
  
    jQuery('#pd-linkcolor').ColorPicker({
	
	onSubmit: function(hsb, hex, rgb, el) {
		jQuery(el).val(hex);
		jQuery(el).ColorPickerHide();
		jQuery('#profile-container a:link, #profile-container a:hover, #profile-container a:active, #profile-container a:visited').css("color", '#' + hex);
	},
	onBeforeShow: function () {
		jQuery(this).ColorPickerSetColor(this.value);
	}
	
   }).bind('keyup', function(){
   
	jQuery(this).ColorPickerSetColor(this.value);
	
	
   });
  
  // Tableheadbackground
  
  jQuery('#pd-tableheadbgcolor').change(function() {
  
    jQuery('#profile-container .thead').css("background", jQuery(this).val());
  
  });
  
    jQuery('#pd-tableheadbgcolor').ColorPicker({
	
	onSubmit: function(hsb, hex, rgb, el) {
		jQuery(el).val(hex);
		jQuery(el).ColorPickerHide();
		jQuery('#profile-container .thead').css("background", '#' + hex);
	},
	onBeforeShow: function () {
		jQuery(this).ColorPickerSetColor(this.value);
	}
	
   }).bind('keyup', function(){
   
	jQuery(this).ColorPickerSetColor(this.value);
	
	
   });
  
  // Tableheadcolor
  
  jQuery('#pd-tableheadfontcolor').change(function() {
  
    jQuery('#profile-container .thead').css("color", jQuery(this).val());
  
  });
  
    jQuery('#pd-tableheadfontcolor').ColorPicker({
	
	onSubmit: function(hsb, hex, rgb, el) {
		jQuery(el).val(hex);
		jQuery(el).ColorPickerHide();
		jQuery('#profile-container .thead').css("color", '#' + hex);
	},
	onBeforeShow: function () {
		jQuery(this).ColorPickerSetColor(this.value);
	}
	
   }).bind('keyup', function(){
   
	jQuery(this).ColorPickerSetColor(this.value);
	
	
   });
  
  // Row 1 Backgroundcolor
  
  jQuery('#pd-row1bgcolor').change(function() {
  
    jQuery('#profile-container .trow1').css("background", jQuery(this).val());
  
  });
  
    jQuery('#pd-row1bgcolor').ColorPicker({
	
	onSubmit: function(hsb, hex, rgb, el) {
		jQuery(el).val(hex);
		jQuery(el).ColorPickerHide();
		jQuery('#profile-container .trow1').css("background", '#' + hex);
	},
	onBeforeShow: function () {
		jQuery(this).ColorPickerSetColor(this.value);
	}
	
   }).bind('keyup', function(){
   
	jQuery(this).ColorPickerSetColor(this.value);
	
	
   });
  
  // Row 2 Backgroundcolor
  
  jQuery('#pd-row2bgcolor').change(function() {
  
    jQuery('#profile-container .trow2').css("background", jQuery(this).val());
  
  });
  
    jQuery('#pd-row2bgcolor').ColorPicker({
	
	onSubmit: function(hsb, hex, rgb, el) {
		jQuery(el).val(hex);
		jQuery(el).ColorPickerHide();
		jQuery('#profile-container .trow2').css("background", '#' + hex);
	},
	onBeforeShow: function () {
		jQuery(this).ColorPickerSetColor(this.value);
	}
	
   }).bind('keyup', function(){
   
	jQuery(this).ColorPickerSetColor(this.value);
	
	
   });
  
  // Tablebordertype
  
  jQuery('#pd-tableborderstyle').change(function() {
   
    jQuery('#profile-container .tborder').css("border-style", jQuery(this).val());
  
  });
  
  // Tablebordersize
  
  jQuery('#pd-tablebordersize').change(function() {
  
    jQuery('#profile-container .tborder').css("border-width", jQuery(this).val());
  
  });
  
  // Tablebordercolor
  
  jQuery('#pd-tablebordercolor').change(function() {
  
    jQuery('#profile-container .tborder').css("border-color", jQuery(this).val());
  
  });
  
    jQuery('#pd-tablebordercolor').ColorPicker({
	
	onSubmit: function(hsb, hex, rgb, el) {
		jQuery(el).val(hex);
		jQuery(el).ColorPickerHide();
		jQuery('#profile-container .tborder').css("border-color", '#' + hex);
	},
	onBeforeShow: function () {
		jQuery(this).ColorPickerSetColor(this.value);
	}
	
   }).bind('keyup', function(){
   
	jQuery(this).ColorPickerSetColor(this.value);
	
	
   });
  
  // Inner tablebordercolor
  
  jQuery('#pd-innertablebordercolor').change(function() {
  
    jQuery('#profile-container .tborder').css("background", jQuery(this).val());
  
  });
  
    jQuery('#pd-innertablebordercolor').ColorPicker({
	
	onSubmit: function(hsb, hex, rgb, el) {
		jQuery(el).val(hex);
		jQuery(el).ColorPickerHide();
		jQuery('#profile-container .tborder').css("background", '#' + hex);
	},
	onBeforeShow: function () {
		jQuery(this).ColorPickerSetColor(this.value);
	}
	
   }).bind('keyup', function(){
   
	jQuery(this).ColorPickerSetColor(this.value);
	
	
   });
  
});