var $x1, $y1, $x2, $y2, $w, $h, $orig_width, $orig_height, $zoom_width, $zoom_height, $zoom_factor, $counter, $css, $image;

 function selectChange(img, selection)
 {
	$x1 = selection.x1;
	$y1 = selection.y1;
	$x2 = selection.x2;
	$y2 = selection.y2;
	$w = selection.width;
	$h = selection.height;
	
	$('#preview_container').css('width', (selection.width*$zoom_factor)+'px');
	$('#preview_container').css('height', (selection.height*$zoom_factor)+'px');

	$('img#preview').css('width', $zoom_width+'px');
	$('img#preview').css('height', $zoom_height+'px');
	
	$('img#preview').css('margin-left', '-'+(selection.x1*$zoom_factor)+'px');
	$('img#preview').css('margin-top', '-'+(selection.y1*$zoom_factor)+'px');
}

function save ()
{
	$('#sprite_container').append('<div id="sprite'+(++$counter)+'" class="sprite_infos"></div>');
	$('#sprite'+$counter).append('<div id="infos'+$counter+'" style="float: left; margin-right: 10px;"></div>');
	$('#infos'+$counter).append('<input type="hidden" name="sprite_id'+$counter+'" id="sprite_id'+$counter+'" class="spriteid" value="'+$counter+'" /><br />');
	$('#infos'+$counter).append('<label>Sprite CSS Id : </label><input type="text" name="sprite_name'+$counter+'" id="sprite_name'+$counter+'" style="width: 100px;" value="" /><br />');
	$('#infos'+$counter).append('<label>Width : </label><input type="text" name="sprite_width'+$counter+'" id="sprite_width'+$counter+'" onkeyup="resizeSprite('+$counter+');" style="width: 30px;" value="'+$w+'" /><br />');
	$('#infos'+$counter).append('<label>Height : </label><input type="text" name="sprite_height'+$counter+'" id="sprite_height'+$counter+'" onkeyup="resizeSprite('+$counter+');" style="width: 30px;" value="'+$h+'" /><br />');
	$('#infos'+$counter).append('<label>Top : </label><input type="text" name="sprite_top'+$counter+'" id="sprite_top'+$counter+'" onkeyup="resizeSprite('+$counter+');" style="width: 30px;" value="'+$y1+'" /><br />');
	$('#infos'+$counter).append('<label>Left : </label><input type="text" name="sprite_left'+$counter+'" id="sprite_left'+$counter+'" onkeyup="resizeSprite('+$counter+');" style="width: 30px;" value="'+$x1+'" /><br />');
	$('#infos'+$counter).append('<a href="#" onclick="removeSprite('+$counter+'); return false;"><img src="img/btn_remove.gif" /></a><br />');
	$('#sprite'+$counter).append('<div id="spritecontainernormal'+$counter+'" style="overflow: hidden; float: left; margin-right: 10px; border: 1px solid #ccc;"></div>');
	$('#spritecontainernormal'+$counter).append('<img id="imgnormal'+$counter+'" src="img/'+$image+'" />');
	$('#sprite'+$counter).append('<div id="spritecontainer'+$counter+'" style="overflow: hidden; border: 1px solid #ccc;"></div>');
	$('#spritecontainer'+$counter).append('<img id="img'+$counter+'" src="img/'+$image+'" />');
	$('#sprite'+$counter).append('<div class="clear">&nbsp;</div>');
	
	$('#spritecontainernormal'+$counter).css('width', $w+'px');
	$('#spritecontainernormal'+$counter).css('height', $h+'px');
	
	$('img#imgnormal'+$counter).css('margin-left', '-'+$x1+'px');
	$('img#imgnormal'+$counter).css('margin-top', '-'+$y1+'px');
	
	$('#spritecontainer'+$counter).css('width', ($w*$zoom_factor)+'px');
	$('#spritecontainer'+$counter).css('height', ($h*$zoom_factor)+'px');
	
	$('img#img'+$counter).css('width', $zoom_width+'px');
	$('img#img'+$counter).css('height', $zoom_height+'px');
	
	$('img#img'+$counter).css('margin-left', '-'+($x1*$zoom_factor)+'px');
	$('img#img'+$counter).css('margin-top', '-'+($y1*$zoom_factor)+'px');
}

function getCSS()
{
	$css = '';
	
	$(".spriteid").each(function () {
	    var id = $(this).val();
		$css += '#'+$('#sprite_name'+id).val()+" {\n";
		$css += "\twidth: "+$('#sprite_width'+id).val()+"px;\n";
		$css += "\theight: "+$('#sprite_height'+id).val()+"px;\n";
		$css += "\tbackground: url("+$('#image_path').val()+$('#image_name').val()+") -"+$('#sprite_left'+id).val()+"px -"+$('#sprite_top'+id).val()+"px no-repeat;\n";
		$css += "}\n\n";
	});
	
	$('#css_result').text($css);
	$('#css_result').css('display', 'block');
}

function resizeSprite (id)
{
	var width = $('#sprite_width'+id).val();
	var height = $('#sprite_height'+id).val();
	var top = $('#sprite_top'+id).val();
	var left = $('#sprite_left'+id).val();
	
	$('#spritecontainernormal'+id).css('width', width+'px');
	$('#spritecontainernormal'+id).css('height', height+'px');
	
	$('img#imgnormal'+id).css('margin-left', '-'+left+'px');
	$('img#imgnormal'+id).css('margin-top', '-'+top+'px');
	
	$('#spritecontainer'+id).css('width', (width*$zoom_factor)+'px');
	$('#spritecontainer'+id).css('height', (height*$zoom_factor)+'px');
	
	$('img#img'+id).css('margin-left', '-'+(left*$zoom_factor)+'px');
	$('img#img'+id).css('margin-top', '-'+(top*$zoom_factor)+'px');
}

function removeSprite(id)
{
	$('#sprite'+id).slideUp('slow');
	$('#sprite'+id).remove();
}


 $(document).ready(function () {
	$x1 = 0;
	$y1 = 0;
	$x2 = 0;
	$y2 = 0;
	$w = 0;
	$h = 0;
	$zoom_factor = 15;
	$counter = 0;
	$image = $('#image').val();
	$orig_width = parseInt($('img#preview').css('width'));
	$orig_height = parseInt($('img#preview').css('height'));
	$zoom_width = $orig_width*$zoom_factor;
	$zoom_height = $orig_height*$zoom_factor;
 });

 $(window).load(function () {
   $('img#spritecreator').imgAreaSelect({ onSelectChange: selectChange, handles: true, keys: true });

	
 });