var Cropper = (function() {
	var jcrop_api = false;
	return {
		index : 0,
		magnification_factor : 4,
		
		applyMagnification : function () {
			if(typeof jcrop_api != 'object' ) {return;}
			$('#magnification_level').text('x' + Cropper.magnification_factor);
			
			$('#magnifier').
				attr('width', parseInt($('#magnifier').attr('naturalWidth'))*Cropper.magnification_factor).
				attr('height', parseInt($('#magnifier').attr('naturalHeight'))*Cropper.magnification_factor);

			jcrop_api.tellSelect([
				parseInt($('#x').val()),
				parseInt($('#y').val()),
				parseInt($('#w').val()),
				parseInt($('#h').val())
				]);
		}, 
		
		
		
		decreaseMagnification : function() {
			if(this.magnification_factor > 0) {
				this.magnification_factor--;
				this.applyMagnification();
			}
		
		},
		
		increaseMagnification : function() {
			if(this.magnification_factor < 10) {
				this.magnification_factor++;
				this.applyMagnification();
			}
		
		},
		init : function(url) {
			$('#magnification_level').text('x' + Cropper.magnification_factor);
			
			if (jcrop_api !== false) {
				jcrop_api.destroy();
			}

			var img = new Image();
			img.src = url;
			img.onload = function() {


				$('#cropper').
					attr('src', this.src).
					attr('width', this.width).
					attr('height', this.height);
				$('#magnifier').
					attr('src', this.src).
					attr('width', this.width*Cropper.magnification_factor).
					attr('height', this.height*Cropper.magnification_factor);
				
				jcrop_api = $.Jcrop('#cropper');

				jcrop_api.setOptions({
					onChange: Cropper.showCoords,
					onSelect: Cropper.showCoords
				});
				
			}
		},
		
		showCoords: function(c) {
			$('#x').css({width: c.x.toString().length + "em"}).val(c.x);
			$('#y').css({width: c.y.toString().length + "em"}).val(c.y);
			$('#w').css({width: c.w.toString().length + "em"}).val(c.w);
			$('#h').css({width: c.h.toString().length + "em"}).val(c.h);
			
			$('#magnifier').css({top: -parseInt(c.y*Cropper.magnification_factor), left: -parseInt(c.x*Cropper.magnification_factor)});
			$('#magnifier_frame').css({height: parseInt(c.h*Cropper.magnification_factor), width: parseInt(c.w*Cropper.magnification_factor)});
		},
		
		snap: function(name) {
			$("#css_container").append(
					"." + ((name)?name:"sprite_"+ this.index++)  +"{\n" +
					"\theight               : "+ $('#h').val() + "px;\n" +
					"\twidth                : "+ $('#w').val() + "px;\n" +
					"\tbackground-position  : -" + $('#y').val() +"px " + "-"+ $('#x').val() +"px;\n" +
				" }\n\n");
			
		},
		
		fromURL: function(url) {
			this.init(url);
			
			
		}
		
	}
	
})();

var CssSprites =  (function() {
	
	var height 	= 0;
	var width 	= 0;
	
	return {
		init : function(hook) {
			var e				= hook || "viewport";
			this.canvas 		= document.getElementById(e);
			this.canvas.width 	= 0;
			this.canvas.height 	= 0;
			this.ctx 			= this.canvas.getContext('2d');
			
			this.cursor			= {h:0, w:0};
			this.index			= 0;
			this.sort_index		= 0;
			this.last_index 	= 0;
			this.rules			= [];
			this.sorting		= [];
			this.queued_files 	= [];
			this.action			= "";
			this.contentType 	= 'image/png';

			document.CssSprites = this;

		},
		
		draw : function(file) {
			if (file.source === undefined) {return false;}
			CssSprites.sorting[CssSprites.sort_index] = file.name;

			this.img = new Image(); 
			this.img.src = file.source;	
			this.img.onload = CssSprites.makeHover;
		},

		pixastic: function() {
			$('#tools').append($(this));
			if(CssSprites.action != '') {
				Pixastic.process(this, CssSprites.action, {}, CssSprites.endPixAction);				
			} 
			else {
				CssSprites.rules[CssSprites.index] = {h: this.height, w: this.width};
				CssSprites.ctx.drawImage(this, CssSprites.cursor.w, 0);
				$("#" + $(this).attr('id')).remove();
				CssSprites.finish(CssSprites.ctx.canvas, this);
			}
			
		},
		
		endPixAction : function (canvas) {
			var ctx = canvas.getContext("2d");
			var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
			CssSprites.rules[CssSprites.index] = {h: canvas.height, w: canvas.width};

			CssSprites.ctx.drawImage(ctx.canvas.__pixastic_org_image, CssSprites.cursor.w, 0);
			CssSprites.ctx.putImageData(data, CssSprites.cursor.w,  canvas.height);
			$("#" + ctx.canvas.id).remove();
			CssSprites.finish(CssSprites.ctx.canvas, canvas);
		},
		

		
		finish : function(canvas, image) {
			var data = CssSprites.canvas.toDataURL("image/png");
			$("#result").attr("src", data);
			$("#result_container").append(' <div id="s'+ CssSprites.index +'" class="sprites">&nbsp;</div>');

			
			
			$("#s" + CssSprites.index).css({
				backgroundImage		: "url("+data+")", 
				backgroundColor		: "transparent",
				backgroundRepeat 	: "no-repeat",
				backgroundPosition 	: "-"+ CssSprites.cursor.w +"px " + "-"+ (CssSprites.action!=''?CssSprites.rules[CssSprites.index].h:0) +"px", 
				height				: image.height + "px",
				width				: image.width + "px",
				'float'				: "left"
			}).attr("rel", CssSprites.cursor.w);
			
			if(CssSprites.action != '') {
				$("#s" + CssSprites.index).bind('mouseover', function() {
					$(this).css({
						backgroundPosition 	: "-"+$(this).attr('rel')+"px " + "0px"
					});	
				}).bind('mouseout', function() {
					$(this).css({
						backgroundPosition 	:  "-"+$(this).attr('rel')+"px " + "-" + $(this).height() +"px"
					});
				});
			}

			var sprite_name = CssSprites.sorting[CssSprites.index].replace(/#|\./g, "_");

			if($('#stylesheets_render').val() == "css") {
				
				$('#css_container').append(
						" #" + sprite_name  + " {\n" +
							"\theight               : "+ image.height + "px;\n" +
							"\twidth                : "+ image.width + "px;\n" +
							"\tbackground-position  : -" + CssSprites.cursor.w +"px " + "-"+ (CssSprites.action!=''?CssSprites.rules[CssSprites.index].h:0) +"px;\n" +
						" }\n\n");
							
				if (CssSprites.action != '') {
					$('#css_container').append(
						" #" + sprite_name + ":hover {\n" +
							"\tbackground-position  : -" + CssSprites.cursor.w +"px " + "0px;\n" +
						" }\n\n" 
					);
				}

			} 
			else if($('#stylesheets_render').val() == "sass") {
				$('#css_container').append(
						"#" + sprite_name +"\n" +
						"  :height "+ image.height + "px\n" +
						"  :width "+ image.width + "px\n" +
						"  :background\n"+ 
						"    :position -" + CssSprites.cursor.w +"px " + "-"+ (CssSprites.action!=''?CssSprites.rules[CssSprites.index].h:0) +"px\n");
							
				if (CssSprites.action != '') {
					$('#css_container').append(
						"  &:hover\n" +
						"    :background\n" +
						"      :position -" + CssSprites.cursor.w +"px " + "0px\n");
				}

				$('#css_container').append("\n");
				
			}
			// http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb
			$('#html_container').append($('<div/>').text('<div class="sprites" id="' + sprite_name + '"></div>\n\n').html());
			
			
			CssSprites.cursor.h += parseInt(image.height); 
			CssSprites.cursor.w += parseInt(image.width);
		
			CssSprites.index++;
			if(CssSprites.index == CssSprites.last_index) {
				CssSprites.saveImage();
			}

		},
		
		makeHover : function(){
			CssSprites.hoverImg = new Image(); 
			CssSprites.hoverImg.src = this.src;
			CssSprites.hoverImg.id = 'temp'+ CssSprites.index;
			CssSprites.hoverImg.onload = CssSprites.pixastic;
			
			return false;
		},
		
		saveImage : function() {

			$('#waiter').hide("slow");
			$( '#css_container' ).chili();
			$( '#html_container' ).chili();

			var data = this.canvas.toDataURL(CssSprites.contentType);
			$("#result").attr("src", data).show();
			
			$(".sprites").css({
				backgroundImage		: "url("+data+")", 
				backgroundColor		: "transparent",
				backgroundRepeat 	: "no-repeat"
			});

			
			
			if ($('#stylesheets_render').val() == "css" && 
					$('#stylesheets_compression').is(':checked') === true) {
				var css = $('#css_container').text();
				css = css.replace(/\n|\t/g, "").
						replace(/\s[-]*0px/g, " 0").
						replace(/\s+}\s+/g, "}").
						replace(/\s+{\s+/g, "{").
						replace(/\s+:\s+/g, ":").
						replace(/\s*;\s+/g, ";"). 
						replace(/\s{2}/g, '');
				$('#css_container').html("<textarea>" + css + "</textarea>");
			}
			
			CssSprites.init("viewport");
			
			
		},
		
		setFiles : function (data) {
			$( '#css_container, #html_container, #result_container' ).empty();

			if ($('#stylesheets_render').val() == "css") {
				$('#css_container').append(
					"\n .sprites {\n" +
						"\tbackground-image     : url(/your/image/url.png);\n" +
						"\tbackground-color     : transparent;\n" +
						"\tbackground-repeat    : no-repeat;\n" +
					" }\n\n");
			
			} 
			else if($('#stylesheets_render').val() == "sass") {
				
				$('#css_container').append(
						".sprites\n" +
						"  :background\n" +
						"    :image url(/your/image/url.png)\n" +
						"    :color transparent\n" +
						"    :repeat no-repeat\n\n");
						
			}
			
			for(file in data) {	
				this.draw(data[file]);
				this.sort_index++;
			}
			
		

		},
		
		addFile: function(data) {
			var data = eval('(' + data + ')');
			CssSprites.canvas.width 	+= data.width;
			if($('#pixaction').val() != '') {
				data.height = data.height * 2;		
			}
			
			CssSprites.canvas.height 	= (CssSprites.canvas.height > data.height)?CssSprites.canvas.height:data.height;
			
			CssSprites.last_index++;
			CssSprites.queued_files.push({
				'source': data.source,
				'name'	: data.base
			});
			
		},
		setBackgroundColor : function(hex) {
			
		}
		
	}
})();


$(document).ready(function() {
	
	$('#menu li').each(function() {
		if($(this).hasClass("keep")){return;}
		$(this).text($('a', $(this)).text());

	});
	
	$('#menu li').click(function() {
		if($(this).hasClass("keep")){
			window.location = $('a', $(this)).attr('href');
			return;
		}
		$(".page").hide();
		$('#menu li').removeClass('selected');
		$('#' + $(this).addClass('selected').attr('rel')).show();
	});

	$("#menu .home").click();

	CssSprites.init("viewport");

$('#upload_form').submit(function() { 

	$(this).ajaxSubmit({
		url 		: '/services/uploadr.php',
		type 		: 'post',
		dataType : 'json',
		iframe 	: true,
		success	: function(data) {
			for(var i in data.images) {
				if(data.images[i].source.indexOf('upload_file_custom_sprite') != -1) {		
					Cropper.fromURL(data.images[i].source);
					return;
				}
			}

			if(data.files > 0) {$('#waiter').show();} else {return;}
			
			CssSprites.data = data;

			CssSprites.init("viewport");
			CssSprites.action 			= $('#pixaction').val();
			if(CssSprites.action != ''){ data.height = data.height * 2;}
			CssSprites.contentType 		= $("#output_image_type").val();
			CssSprites.canvas.width 	= data.width;
			CssSprites.canvas.height 	= data.height;
			
			$("#result").width(data.width);
			$("#result").height(data.height);
			CssSprites.last_index 		= data.files;
			CssSprites.setFiles(data.images);
			
			$("#image_container").removeClass("invisible");
			$("#preview_container").removeClass("invisible");
		}	
	}); 


    return false; 
}); 
	
$("#new_input_button").bind("click", function() {
	var rand = Math.random().toString().split(".")[1];
	$(this).before('<div  id="cancel_' + rand + '" class="cancel_div"><input type="file" name="image_' + rand + '" id="upload_file_'+rand+'"/><img src="/js/uploadify/cancel.png" class="cancel_field" onclick="$(\'#cancel_' + rand + '\').remove();"/><br/></div>');
	$("#upload_file_" + rand).bind("change", function(){
		$("#new_input_button").trigger("click");
		
	});
});

$("#new_input_button").trigger("click");



$("#upload_form").ajaxForm(); 

$('#uploadify').uploadify({ 
	'uploader':  	'/js/uploadify/scripts/uploadify.swf', 
	'script':    	'/js/uploadify/scripts/uploadify.php', 
	'folder':    	'/i/users', 
	'cancelImg': 	'/js/uploadify/cancel.png',
	'queueSizeLimit': 200,
	'fileExt'		: '*.png;*.gif;*.jpeg;*.jpg',
	'multi' : 		true,
	'onComplete'	: function(event, qid, file, response, data) {
		CssSprites.addFile(response);
		return true;
	},
	
	'onAllComplete': function(e, data) {
		multiUploadInit(); 
		return true;
	}
}); 

$('#upload_file_custom_sprite').attr('name', $('#upload_file_custom_sprite').attr('name') + '_' +  Math.random().toString().split(".")[1]);
	
});


$("#upload_file_custom_sprite").change(function() {
	$('#upload_form').submit();
});

$("#upload_file_custom_sprite_url").change(function() {
	Cropper.fromURL($(this).val());
});


function multiUploadInit(){
	if(CssSprites.queued_files.length > 0) {
		$('#waiter').show();
	}
	CssSprites.action 			= $('#pixaction').val();
	CssSprites.contentType 		= $("#output_image_type").val();
	$("#result").width(CssSprites.canvas.width);
	$("#result").height(CssSprites.canvas.height);

	CssSprites.setFiles(CssSprites.queued_files);

	$("#image_container").removeClass("invisible");
	$("#preview_container").removeClass("invisible");
	CssSprites.queued_files = [];

}