$(document).ready(function() {
	bindGradientSliders();
	$('#corner-slider').slider({
		range: 'min',
		min: 0,
		max: 50,
		slide: function(event, ui) {
			$('.corner-inputs input').val(ui.value);
			updateCode();
		},
		value: 5
	});
	$('#padding-slider').slider({
		range: 'min',
		min: 0,
		max: 50,
		slide: function(event, ui) {
			$('#padding-display').css({'width': (278 - (2*ui.value)) + 'px', 'height': (138 - (2*ui.value)) + 'px', 'border-width' : ui.value + 'px'}).text(ui.value + 'px');
			updateCode();
		},
		value: 5
	});
	bindGradientsManual();
	$('.gradient-value').change();
	$('.gradients .add a').click(function(evt) {
		evt.preventDefault();
		//var clone = $(this).parent().prev().clone();
		var clone = $('<dd><input type="text" value="000000" class="color-picker" /><div class="gradient-slider"></div><input type="text" class="gradient-value" /></dd>');
		clone.find('.gradient-slider').slider({
			range: 'min',
			min: 0,
			max: 100,
			slide: function(event, ui) {
				$(ui.handle).parents('dd').find('.gradient-value').val(ui.value);
				updateCode();
			}
		});
		clone.find('.color-picker').ColorPicker({
			onSubmit: function(hsb, hex, rgb, el) {
				$(el).val(hex);
				$(el).ColorPickerHide();
			},
			onBeforeShow: function () {
				$(this).ColorPickerSetColor(this.value);
			}
			}).bind('keyup', function(){
				$(this).ColorPickerSetColor(this.value);
		});
		clone.insertBefore($(this).parent());
		$('.color-picker').change(function() {
			updateCode();
		});
																			
		/*bindGradientSliders();
		bindGradientsManual();*/
	});
	$('.gradient-type').click(function() {
		$('.gradient-type').removeClass('active');
		$(this).addClass('active');
		updateCode();
	})
});
function bindGradientSliders() {
	$('.gradient-slider').slider({
		range: 'min',
		min: 0,
		max: 100,
		slide: function(event, ui) {
			$(ui.handle).parents('dd').find('.gradient-value').val(ui.value);
			updateCode();
		}
	});
	$('.color-picker').ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val(hex);
			$(el).ColorPickerHide();
			updateCode();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
		}
	}).bind('keyup', function(){
		$(this).ColorPickerSetColor(this.value);
	});
}
function bindGradientsManual() {
	$('.gradient-value').unbind('change').change(function() {
		$(this).prev().slider("option", "value", Number($(this).val()));
		updateCode();
	});
	$('.gradient-value').change();
}
function updateCode() {
	var corners = '';
	var	code = 'element {';
	// corners
	var cornerInputs = 	$('.corner-inputs input');
	
	corners += cornerInputs.eq(0).val() + 'px ';
	corners += cornerInputs.eq(1).val() + 'px ';
	corners += cornerInputs.eq(3).val() + 'px ';
	corners += cornerInputs.eq(2).val() + 'px';
		
	code += addStyle('-moz-border-radius', corners);	
	code += addStyle('-webkit-border-radius', corners);
	//padding
	code += addStyle('padding', $('#padding-display').text());
	//gradients
	var mozGradient = '';
	var webkitGradient = '';
	$('.gradients dl dd').not('.add').each(function() {
		mozGradient += '#' + $(this).find('.color-picker').val() + ' ' + $(this).find('.gradient-value').val() + '%,';
		webkitGradient += 'color-stop(' + $(this).find('.gradient-value').val()/100 + ', #' + $(this).find('.color-picker').val() + '),';
	});
	var gradientType = $('.gradient-type.active');
	
	var mozGradientType = '';
	var webkitGradientType = '';
	if(gradientType.hasClass('top-bottom')) {
		mozGradientType = 'center top';
		webkitGradientType = 'left top, left bottom';
	}
	else if(gradientType.hasClass('bottom-top')) {
		mozGradientType = 'center bottom';
		webkitGradientType = 'left bottom, left top';
	}
	else if(gradientType.hasClass('left-right')) {
		mozGradientType = 'center left';
		webkitGradientType = 'left bottom, right bottom';
	}
	else {
		mozGradientType = 'center right';
		webkitGradientType = 'right bottom, left bottom';
	}
	code += addStyle('background', '-moz-linear-gradient(' + mozGradientType + ', ' + mozGradient.replace(/,+$/,"") + ')');
	code += addStyle('background', '-webkit-gradient(linear, ' + webkitGradientType + ', ' + webkitGradient.replace(/,+$/,"") + ')');
	code += '\n}';
	$('#element-code').val(code);
}
function addStyle(attribute, value) {
	$('#model').css(attribute, value);
	return '\n\t' + attribute + ': ' + value.replace(/\s+$/,"") + ';';
}