(function($) {

	$.fn.aDrawBoard = function(options) {
	
		var
			defaults = {
				transparent: true,
				backgroundColour: '#c4c4c4',
				submitAction: '',
				parentID: false,
				lineWeight: '2'
			},
			settings = $.extend({}, defaults, options);
		
		var ul_frame = '<iframe id="ul_frame" name="ul_frame" src="about:none" style="width:0px;height:0px;border:0px solid #fff" />';
		$("body").append(ul_frame);
		
		return this.each(function() {
		
			var $this = $(this);
			var jsthis = $this[0];
						
			if($this.is('canvas')) {
			
				var controls_active = false;
				
				var context = $this[0].getContext("2d");
				context.lineWidth = defaults.lineWeight;
				var drawing = false;
				
				var position = $(this).offset();
//				alert($this.offset().top);
				var top = position.top;
				var left = position.left;
				
				$this.mousedown(function(e){
					var mouseX = e.pageX - $this.offset().left;
					var mouseY = e.pageY - $this.offset().top;
					context.beginPath();
					context.moveTo(mouseX, mouseY);
					drawing = true;
				}).mouseup(function(){
					context.closePath();
					drawing = false;
					if(!controls_active) {
						generateControls($this);					
						$this.siblings(".drawboard_controls").find("#cancel").click(function(){
							context.clearRect(0,0,$this.width(),$this.height());
							$(this).closest(".drawboard_controls").remove();
							controls_active = false;
							return false;
						});
						$this.siblings(".drawboard_controls").find("form").submit(function(){
							
							var $form = $(this);
							$(this).attr('target',"ul_frame");
//							$(this).closest("form").submit();
							
//							var image = $(this).closest(".drawboard_controls").find("#imageField").val();
//							var overlay_data = jsthis.toDataURL("image/png");
//							var title = $(this).closest(".drawboard_controls").find("#titleField").val();
							
							$("#ul_frame").load(function(){
//								alert("loaded!");
								var return_data = frames["ul_frame"].document.getElementsByTagName("body")[0].innerHTML;
//								alert(return_data);
								$form.closest(".image").find(".overlays").append(return_data);
								context.clearRect(0,0,$this.width(),$this.height());
								$form.closest(".drawboard_controls").remove();
								$this.trigger('image_saved');
							});
							
							controls_active = false;
//							$.ajax({
//								url: options.submitAction,
//								type: 'POST',
//								data: 'image=' + image + '&overlay=' + overlay_data + '&title=' + title,
//								complete: function(feedback) {
//									alert(feedback);
//								}
//							});
//							return false;
						});
						controls_active = true;
					}
					updateFormData($this.parent().find('form'),jsthis.toDataURL("image/png"));
				}).mousemove(function(e){
					if(drawing) {
						var mouseX = e.pageX - $this.offset().left;
						var mouseY = e.pageY - $this.offset().top;
//						$("#header").html(mouseX + " : " + mouseY);
//						context.arc(mouseX,mouseY,8,0,Math.PI*2,true);
						context.lineTo(mouseX, mouseY);
						context.stroke();
					}
				});
			}
		});
		
		function generateControls($canvas) {
			if(!options.parentID) {
				var parentDOM_ID = $canvas.parent("div").attr("id");
				var parentID = parentDOM_ID.replace("img_","");
			} else {
				var parentID = options.parentID;
			}
			var controls = '<div class="drawboard_controls" style="position:absolute;right:-165px;bottom:0px">';
			controls += '<form name="drawboard_form" method="post" action="' + options.submitAction + '" enctype="multipart/form-data">';
			controls += '<input id="imageField" type="hidden" name="image" value="' + parentID + '" />';
			controls += '<input id="overlay_data" type="hidden" name="overlay" value="" />';
			controls += 'label:<br/>';
			controls += '<p><input name="title" type="text" class="formfield" id="titleField" value="" /></p>';
			controls += '<button type="submit" name="submit" id="submit">save</button> ';
			controls += '<button type="button" name="cancel" id="cancel">cancel</button> ';
			controls += '</form>';
			controls += '</div>';
			$canvas.parent().append(controls);
		}
		
		function updateFormData($form, dataURI) {
//			alert(dataURI);
			$form.children("#overlay_data").val(dataURI);
		}
	
	}

}) (jQuery);