// JAVASCRIPT
$(function(){
					 
	/////////////////////////////////////				LAYER

	// Assign handler to change action in width select
	$('#width').change(function(){
		$('#FrameLayer').animate({
			width:parseInt($(this).val())
		},1000,'easeout');
	}).change();
	
	// Assign handler to change action in height select
	$('#height').change(function(){
		$('#FrameLayer').animate({
			height:parseInt($(this).val())
		},1000,'easeout');
	}).change();
	
	// Font align select
	$('#border').change(function(){
		$('#FrameLayer').css({
			"borderWidth":$(this).val(),
			"borderStyle":"solid"
		});
	}).change();
	
	/////////////////////////////////////				TITLE
	
	// Font family select
	$('#title_font_family').select_updater({
		ObjToUpd:'.blogTitle',
		StyleToUpd:'fontFamily'
	});
	
	// Font size select
	$('#title_font_size').select_updater({
		ObjToUpd:'.blogTitle',
		StyleToUpd:'fontSize'
	});
	
	// Font style select
	$('#title_font_style').select_updater({
		ObjToUpd:'.blogTitle',
		StyleToUpd:'fontStyle'
	});
	
	// Font align select
	$('#title_text_align').select_updater({
		ObjToUpd:'.blogTitle',
		StyleToUpd:'textAlign'
	});
	
	// Font align select
	$('#title_padding').select_updater({
		ObjToUpd:'.blogTitle',
		StyleToUpd:'padding'
	});
	
	/////////////////////////////////////				DATE

	// Font family select
	$('#date_font_family').select_updater({
		ObjToUpd:'.blogDate',
		StyleToUpd:'fontFamily'
	});
	
	// Font size select
	$('#date_font_size').select_updater({
		ObjToUpd:'.blogDate',
		StyleToUpd:'fontSize'
	});
	
	// Font style select
	$('#date_font_style').select_updater({
		ObjToUpd:'.blogDate',
		StyleToUpd:'fontStyle'
	});
	
	// Font align select
	$('#date_text_align').select_updater({
		ObjToUpd:'.blogDate',
		StyleToUpd:'textAlign'
	});
	
	// Font align select
	$('#date_padding').select_updater({
		ObjToUpd:'.blogDate',
		StyleToUpd:'padding'
	});
	
	// Font family select
	$('#description_font_family').select_updater({
		ObjToUpd:'.blogDescription',
		StyleToUpd:'fontFamily'
	});
	
	// Font size select
	$('#description_font_size').select_updater({
		ObjToUpd:'.blogDescription',
		StyleToUpd:'fontSize'
	});
	
	// Font style select
	$('#description_font_style').select_updater({
		ObjToUpd:'.blogDescription',
		StyleToUpd:'fontStyle'
	});
	
	// Font align select
	$('#description_text_align').select_updater({
		ObjToUpd:'.blogDescription',
		StyleToUpd:'textAlign'
	});
	
	// Font align select
	$('#description_padding').select_updater({
		ObjToUpd:'.blogDescription',
		StyleToUpd:'padding'
	});
	
	/////////////////////////////////////				CREATE CODE
	
	$('#CreateCode').click(function(){
																	
		var params = $('#MainForm').fastSerialize();
		var fragment = $.param(params);
	
		var html = "";
		html += "<iframe marginwidth='0' scrolling='yes' hspace='0' marginheight='0' vspace='0' ";
		html += "allowtransparency='true' ";
		html += "frameborder='0' ";
		html += "width='"+$('#width').val()+"' ";
		html += "height='"+$('#height').val()+"' ";
		html += "src='http://arielrebel.com/blog/index.php?"+fragment+"&natscode="+natscode;
		html += "' ";
		html += "style='";
		html += "border:"+$('#border').val()+" solid "+$('#border_color').val()+"; overflow:auto; * padding-right:10px; * padding-bottom:12px;";
		html += "'><\/iframe>";
	
		$('#FinalCode').val(html);
	
	});
	
	/////////////////////////////////////				PICKERS
	
	$('#border_color').color_picker({
		ObjToUpd:'#FrameLayer',
		StyleToUpd:'borderColor'
	});
	
	$('#title_font_color').color_picker({
		ObjToUpd:'.blogTitle',
		StyleToUpd:'color'
	});
	
	$('#title_background_color').color_picker({
		ObjToUpd:'.blogTitle,.#FrameLayer',
		StyleToUpd:'backgroundColor'
	});
	
	$('#date_font_color').color_picker({
		ObjToUpd:'.blogDate',
		StyleToUpd:'color'
	});
	
	$('#date_background_color').color_picker({
		ObjToUpd:'.blogDate',
		StyleToUpd:'backgroundColor'
	});
	
	$('#description_font_color').color_picker({
		ObjToUpd:'.blogDescription',
		StyleToUpd:'color'
	});
	
	$('#description_background_color').color_picker({
		ObjToUpd:'.blogDescription',
		StyleToUpd:'backgroundColor'
	});
	
	$('#links_color').color_picker({
		ObjToUpd:'a',
		StyleToUpd:'color'
	});
	
	$('.fields:first').animate({
		height:'show',opacity:'show'
	},500,'easeout');
	
	$('.fields').each(function(x){
		
		var CurrentField = $(this);
		
		$('legend').eq(x).click(function(){
			
			$('.ColorPicker').remove();
			
			$('.fields:visible').animate({
				height:'hide',
				opacity:'hide'
			},500,'easeout');
			
			$(CurrentField).animate({
				height:'show',
				opacity:'show'
			},500,'easeout');
			
		});
	});

});

/////////////////////////////////////				SELECT UPDATER
	
$.fn.select_updater = function(Options){

	// Settings
	var Settings = {
	};
	
	// Extend
	$.extend(Settings,Options);
	
	// CurreObj
	var CurrObj = $(this);

	// Change Handler
	$(this).change(function(){
		
		// update element
		$(Settings.ObjToUpd).css(Settings.StyleToUpd,$(CurrObj).val());
		
	});
	
	// update element
	$(Settings.ObjToUpd).css(Settings.StyleToUpd,$(CurrObj).val());
		
};

//////////////////////////////////////			COLOR PICKER

$.fn.color_picker = function(Options){

	// Settings
	var Settings = {
	};
	
	$.extend(Settings,Options);

	// CurreObj
	var CurrObj = $(this);
	
	// onClick
	$(this).click(function(){

		// remove old pickers
		$('.ColorPicker').remove();
		
		// picker container
		$(this).after("<div class='ColorPicker' style='clear:left'></div>");
		
		// picker
		$('.ColorPicker').farbtastic(function(Color){
			
			// set color inside input
			$(CurrObj).val(Color);
			
			// update element
			$(Settings.ObjToUpd).css(Settings.StyleToUpd,$(CurrObj).val());
			
		});
	
	});
	
	// update element
	$(Settings.ObjToUpd).css(Settings.StyleToUpd,$(CurrObj).val());

};