// global variables
var jcrop_api;

/**
 * Converts number from centimeters to inches
 */
function centimeter_to_inch(num)
{
	var constant = 0.393700787;
	
	return Math.round((num * constant));
}

/**
 * Converts number from inches to centimeters
 */
function inch_to_centimeter(num)
{
	var constant = 2.54;

	return Math.round((num * constant));
}

/**
 * Switches the units dimensions are displayed at
 */
function cc_convert_custom_dimension(unit)
{
	var width,
		height;

	width = $('#custom-width').val();
	height = $('#custom-height').val()

	// convert custom sizes to new unit
	if(unit == 'metric')
	{
		width = inch_to_centimeter(width);
		height = inch_to_centimeter(width);
	}
	else if(unit == 'imperial')
	{
		width = centimeter_to_inch(width);
		height = centimeter_to_inch(width);
	}

	$('#custom-width').val(width);
	$('#custom-height').val(height);
}

/**
 * Switches the units dimensions are displayed at
 */
function cc_unit_switch()
{
	// bind event to fire on the change of the unit radio buttons
	$('#units-fieldset :radio')
		.change(
			function (event) {
				var unit;
				
				// toggle visibility of elements
				$('.imperial').toggle();
				$('.metric').toggle();
				
				// convert the number in the custom dimension box
				cc_convert_custom_dimension($(this).val());
			}
		);
	
	// 
	$('.ratio-fieldset table :radio')
		.not('#size-custom')
		.change(
			function (event) {
				var $row,
					$cell,
					width,
					height;

				// find the parent table row
				$row = $(this).parents('tr');
				// find the second column
				$cell = $row.children('td').eq(1);
				// gather width and height in visible units
				width = $cell.find('.width:visible').text();
				height = $cell.find('.height:visible').text();
				// set value of custom dimensions
				$('#custom-width').val(width);
				$('#custom-height').val(height);
			}
		);
}

/**
 * Called whenever the crop area changes and
 * updates the hidden fields
 */
function cc_canvas_crop_update(c) {
	$('#x1').val(c.x);
	$('#y1').val(c.y);
	$('#x2').val(c.x2);
	$('#y2').val(c.y2);
	$('#width').val(c.w);
	$('#height').val(c.h);
}

/*
 * Sets the selection area acording to values
 * in the hidden form
 */
function cc_canvas_crop_set_select() {
	var x1,
		y1,
		x2,
		y2,
		crop;
	
	x1 = $('#x1').val();
	y1 = $('#y1').val();
	x2 = $('#x2').val();
	y2 = $('#y2').val();

	if(x1 || x2)
	{
		crop = [x1, y1, x2, y2];
	}
		
	jcrop_api.setSelect(crop);
	
}

/**
 * Sets up the jCrop plugin to position the image on
 * the selected canvas size
 */
function cc_canvas_crop() {
	// local vars
	var ratio,
		options;

	// get the image ratio from the hidden fields
	ratio = $('#ratio').val();

	options = {
		aspectRatio : ratio,
		onSelect	: cc_canvas_crop_update,
		onChange	: cc_canvas_crop_update
	};

	// only bind if we are in manual mode
	if($('input[name=crop]').val() == 'manual') {
		jcrop_api = $.Jcrop('#image-crop', options);

		cc_canvas_crop_set_select();
	}
}

/**
 * Turns the Jcrop plugin on/off depending
 * on options selected by user
 */
function cc_canvas_crop_toggle() {
	$('input[name=crop]')
		.change(
			function (event) {
				switch($(this).val())
				{
					case 'auto':
						// disable crop
						jcrop_api.release();
						jcrop_api.disable();
						break;
					case 'manual':
					default:
						// enable crop
						jcrop_api.enable();
						cc_canvas_crop_set_select()
						break;
				}
			}
		);
	
}

/**
 * JS function for step one of the canvas process
 */
function cc_step_one() {

	// check we are on step one
	if($('#step-one').length == 0)
		return;

	$('#step-one').validate();

	cc_unit_switch();

	$('#rectangle-sizes input[name="orientation"]')
		.change(
			function (event) {
				var orientation = $(this).val();
				
				// grab evert cell in the second column
				$('#rectangle-sizes tr td:nth-child(2)')
					.each(
						function (index, element) {
							var width,
								height;
							
							// swap both width and height
							$(this).find('.metric, .imperial')
								.each(
									function () {
										// get the current width and height
										width = $(this).children('.width').text();
										height = $(this).children('.height').text();
										// swap the values
										$(this).children('.width').text(height);
										$(this).children('.height').text(width);
									}
								)
						}
					);
			}
		);
}

/**
 * JS function for step two of the canvas process
 */
function cc_step_two() {
	
	// check we are on step two
	if($('#step-two').length == 0)
		return;
	
	$("#color-overlay .selector").farbtastic("#edge-color");
	
	if($("#edge-custom-colour").is(':checked')) {
	
		$("#custom-colour-picker *").hide();

		$("#custom-colour-picker")
			.slideDown(
				function()
				{
					$("#custom-colour-picker *").fadeIn();
				}
			);
	}
	
	$('#proceed')
		.click(
			function (event) {
				$('#edge-color').val($('#edge-color').css('background-color'));
			}
		);
		
		
	// Show color chooser on selection of radio button
	$("#edge-custom-colour")
		.change(
			function(event)
			{	
				$("#custom-colour-picker *").hide();
		
				$("#custom-colour-picker")
					.slideDown(
						function()
						{
							$("#custom-colour-picker *").fadeIn();
						}
					);
			}
		);

	// Show color picker
	$("#edge-color")
		.click(
			function(event){					
				$("#color-overlay").fadeToggle();
			}
		)
	
	// Hide color chooser on selection of any other radio button
	$("#edge-input :radio:not(#edge-custom-colour)")
		.change(
			function(event)
			{
				if($("#custom-colour-picker").is(":visible"))
				{
					$("#custom-colour-picker *")
						.fadeOut(
							function()
							{
								$("#custom-colour-picker").slideUp();
							}
						);
				}					
			}
		);
	
	// close color picker
	$('#close-color-picker')
		.click(
			function (event) {
				event.preventDefault();
				$("#color-overlay").fadeToggle();
			}
		);
}

/**
 * JS function for step three of the canvas process
 */
function cc_step_three() {
	// check we are on step three
	if($('#step-three').length == 0)
		return;
	
	if($('#color-custom').attr('checked'))
	{
		$('#color-custom-container').show();
	}
	
	// Show custom color on selection of radio button
	$("#color-custom")
		.change(
			function (event) {
				$("#color-custom-container").fadeToggle();
			}
		);
}

/**
 * JS function for step five of the canvas process
 */
function cc_step_five() {

	// check we are on step five
	if($('#step-five').length == 0)
		return;

	cc_canvas_crop();
	
	cc_canvas_crop_toggle();
}

/**
 * Adds odd and even classes to tables
 */
function cc_stripe_tables() {
	
	$("table tbody tr:odd").addClass('odd');
	$("table tbody tr:even").addClass('even');
}

$(window).load(
    function() {
		cc_step_one();
	
		cc_step_two();
	
		cc_step_three();
	
		cc_step_five();
		
		//cc_stripe_tables();
	}
);