// JavaScript Document

$(document).ready(setup);

function setup() {
	$('.hide').hide();
	$('.show').show();
	$('#ins_sample').click( function () {
		if ($('#langSelect').val()=='select language'){
			$('#langList #selected').html('processing');
			$('#langSelect').val('processing');
		}
		$('#code').replaceWith('<textarea rows="28" cols="92" name="rawCode" id="code">'+$('#sample'+$('#langSelect').val()).text()+'</textarea>');
		return false;
	});
	$('#customizeLink').click( function() {
		$('#customize').slideToggle("slow");
		return false;
	});
	$('#add input').checkBox();
	$('#add label').disableSelection();
	$("#font ul").sortable();
	$("#font ul").disableSelection();
	$("#fontSize").SpinButton({min:0});
	$(".size").SpinButton({min:200, step:10});
	var colorSelectors = $('#colors .colorSelect');
	$('#colors input').css('text-align', 'right');
	for (var i=0; i<colorSelectors.length; i++) {
		$.farbtastic('#picker'+i, '#color'+i);
	}
	$('#header input[type=text]').focus(function() {
		this.select();
	});
	
	// fixed width/height inputs
	if ($('#width:checked').val()) {
		$('#theWidth').show();
	} else {
		$('#theWidth').hide();
	}
	if ($('#height:checked').val()) {
		$('#theHeight').show();
	} else {
		$('#theHeight').hide();
	}
	$('#width').change(function (){
		if ($('#width:checked').val()) {
			$('#theWidth').show();
		} else {
			$('#theWidth').hide();
		}
	});
	$('#height').change(function (){
		if ($('#height:checked').val()) {
			$('#theHeight').show();
		} else {
			$('#theHeight').hide();
		}
	});
	
	// language selection
	$('#langSelect').after('<ul id="langList"></ul>');
	$('#langSelect').hide();
	$('#langSelect').find('option').each(function() {
		$('#langList').append('<li>'+$(this).text()+'</li>');
	});
	$('#langList li:first').attr('id', 'selected');
	$('#langList li:first').html($('#langSelect').val());
	$('#langList').hover(
		function () {
			$(this).addClass('open');
		},
		function () {
			$(this).removeClass('open');
		}
	);
	
	$('#langList li').click(function() {
		$('#langList #selected').html($(this).html());
		$('#langList').removeClass('open');
		$('#langSelect').val($(this).text());
	});
	
	
	
	// color set selection
	$('#csLabel').show();
	$('#colorSetSelect').show();
	$('#colorSetSelect').hover(
		function () {
			$(this).addClass('open');
		},
		function () {
			$(this).removeClass('open');
		}
	);
	
	$('#colorSetSelect li').each(function(i) {
		var cols = new Array();
		$(this).find('span').each(function(i) {
			cols.push($(this).text());
		});
		$(this).find('.csample').html('<div style="background-color:'+cols[0]+';"></div><div style="background-color:'+cols[1]+';"></div><div style="background-color:'+cols[3]+';"></div><div style="background-color:'+cols[5]+';"></div>');
	});
	
	$('#colorSetSelect li').click(function() {
		$('#colorSetSelect #selCol').html($(this).html());
		$('#colorSetSelect #selCol').attr('style', $(this).attr('style'));
		$('#colorSetSelect').removeClass('open');
		var cols = new Array();
		$(this).find('span').each(function(i) {
			cols.push($(this).text());
		});
		$('#colors .picker').each(function(i) {
			$.farbtastic(this).setColor(cols[i]);
		});
	});
	
	// submit
	$('#submit').submit(function() {
		$('#submit #fontInput').val('');
		$('#font ul li').each(function() {
			$('#submit #fontInput').val($('#submit #fontInput').val()+$(this).attr('id')+", ");
		});
	});
	
}