var _fontType = 'vbandit.ttf.gif';
var _cropped = '';
var _final = '';
var posX = 0;
var posY = 0;
var artFile = '';
var artFileSize = '';
var resize = '';
function preview(img, selection) { 
	//get width and height of the uploaded image.
	var current_width = $('#selectedImg').find('#thumbnail').width();
	var current_height = $('#selectedImg').find('#thumbnail').height();

	var scaleX = (thumb_width / selection.width)/2; 
	var scaleY = (thumb_height / selection.height)/2; 

	$('#selectedImg').find('#thumbnail_preview').css({ 
		width: Math.round(scaleX * current_width) + 'px', 
		height: Math.round(scaleY * current_height) + 'px',
		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
	});

	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2);
	$('#w').val(selection.width);
	$('#h').val(selection.height);

} 


function getContent(param,showin){
		$("#editFunctions").draggable();
		$.ajax({
			type: 'POST',
			url: '_content.php',
			data: 'func='+param,
			cache: false,
			success: function(response){
				response = unescape(response);
				$(showin).hide().fadeIn("slow").html(response);
				var myPicker = new jscolor.color(document.getElementById('color'), {})
				var vignetteColor = new jscolor.color(document.getElementById('vignetteColor'), {})
				var stroke = new jscolor.color(document.getElementById('stroke'), {})
				myPicker.fromString('FF0000');
			}
		});
		return false;
}

function genEffects(param){
		$('#loader').show();
		_bg = 'black';
		_text = $('#effects_text').val();
		$.ajax({
			type: 'POST',
			url: '_functions.php',
			data: 'func=genEffects&image='+_final+'&background='+_bg+'&text='+_text+'&effect='+param,
			cache: false,
			success: function(response){
				response = unescape(response);
				var response = response.split("|");
				_final = response[0];

				$('#loader').hide();
				$('#selectedImg').hide().fadeIn("normal").html('<div style="background:url('+_final+') no-repeat; width:'+thumb_width+'px; height:'+thumb_height+'px; border:1px solid #404040;"><div id="art"> </div>'
																						+'<img class="ecoverType"   src="images/type_'+type+'.gif" /></div>');

				if(strstr(response[1],"ERROR")){
					alert(response[1]);
				}else{
				insertArt(response[1],response[2],response[3]);	
				}
				$('#loader').hide();
			}
			
		});
		return false;
}

function selectFont(font){
		_fontType = basename(font);
		$('#selectedFont').show("slow").html('<img src="'+font+'" onclick="tb_show(\'\', \'_cliparts.php?type=fonts&height=600&width=240\',\'\')">');
		tb_remove();
}

function genImage(f){
	$('#loader').show();
	var _title = $('#title').val();
	var _fontColor = $('#color').val();
	var _pos = $('input[name=position]:checked').val();
	var _fontsize = $('#fontsize').val();
	var _sidetext = $('#sidetext').val();
	var _arc = $('#arc').val();
	var _stroke = $('#stroke').val();
	var _strokeOption = $('input[name=strokeOption]:checked').val();
	$.ajax({
		type: 'POST',
		url: '_functions.php',
		data: 'func=genImage&title='+_title+'&fontColor='+_fontColor+'&fontType='+_fontType+'&position='+_pos+'&image='+_final
				+'&fontsize='+_fontsize+'&sidetext='+_sidetext+'&save='+f+'&type='+type+'&arc='+_arc+'&stroke='+_stroke+'&strokeOption='+_strokeOption,
		cache: false,
		success: function(response){
			response = unescape(response);
			//$('#debug').show().html(response);
			var response = response.split("|");
			_final = response[0];
				
			$('#loader').hide();
			$('#selectedImg').hide().fadeIn("normal").html('<div style="background:url('+_final+') no-repeat; width:'+thumb_width+'px; height:'+thumb_height+'px; border:1px solid #404040;"><div id="art"> </div>'
																						+'<img class="ecoverType"   src="images/type_'+type+'.gif" /></div>');
			if(f=="save"){
				$('#title').val("");	
				$('#sidetext').val('');	
			}
			if(strstr(response[1],"ERROR")){
				alert(response[1]);
			}else{
				
				insertArt(response[1],response[2],response[3]);	
			}
		}
	});
	return false;
}
function insertArt(f,w,h){
	artFile = f;
	$("#art").draggable({ stop:function(event,ui){
		var parentPos = $('#selectedImg').offset();						
		var offset =$(this).offset();
		$("#check").css("display","none");	
		posX = offset.left - parentPos.left;
		posY = offset.top - parentPos.top;
		}});
		if(w){
			imgsize = 'width="'+w+'" height="'+h+'"';
		}else{
			imgsize='width="100" height="100"';	
		}
		artFileSize = w+"x"+h;
		$("#art").html('<div class="artFileArea" style="width:'+w+'; height:auto;"><img src="images/clicktoapply.gif" id="check"><img src="'+artFile+'" id="artFile"'+imgsize+' style="border:1px solid #fff;"><img src="images/cancel.gif" onclick="removeArt()" class="a"><img src="images/apply.gif" onclick="imageFunctions(\'insertArt\')" class="b"></div>');
		//$("#art").dblclick(function(){ imageFunctions('insertArt');});z
		$("#art").keypress(function(e){if(e.which==13) imageFunctions('insertArt');});
		$('#helper').show("normal").html('Move the graphic to your desired location. Click on the <b>handle</b><img src="images/handle.gif"> to resize the image. Click <img src="images/apply.gif"> to apply!');
		$("#artFile").resizable({maxWidth: thumb_width, maxHeight:thumb_height, stop: function(event,ui){
								artFileSize =  ui.size.width+"x"+ui.size.height;
								
								}
							});
		$("#addgraphics").hide();
		tb_remove();
}


function removeArt(){
	$('#helper').hide();
	$("#artFile").resizable('destroy');
	$("#art").draggable('destroy');
	$("#art").html('');
	$("#addgraphics").show();

}

function imageFunctions(fn){
	appendQuery = '';
	if(fn=="insertArt"){
		appendQuery = '&artFile='+artFile+'&posX='+posX+'&posY='+posY+'&artFileSize='+artFileSize;
		artFileSize = 0;
	}
	if(fn=="vignette"){
		vcolor = $('#vignetteColor').val();
		if(!confirm("Are you sure you want to apply the vignette effect? color:#"+vcolor)){
		return false;	
		}
		appendQuery = '&vignetteColor='+vcolor;
	}
	$('#loader').show();
	$.ajax({
		type: 'POST',
		url: '_functions.php',
		data: 'func=manipulate&type='+type+'&image='+_final+'&fn='+fn+appendQuery,
		cache: false,
		success: function(response){
			response = unescape(response);
	
			_response = response;
			var response = response.split("|");
			responseType = response[0];
			
			_final = response[1];
			steps = response[2];

			if(responseType=="success"){
				if(steps ==1 ){
				$('#undo').hide();	
				}else{
				$('#undo').show();	
				}
				$('#loader').hide();
				$('#selectedImg').hide().fadeIn("normal").html('<div style="background:url('+_final+') no-repeat; width:'+thumb_width+'px; height:'+thumb_height+'px; border:1px solid #404040;">'
															+'<div id="art"> </div><img class="ecoverType"  src="images/type_'+type+'.gif"/></div>');

				$('#helper').hide();
				$("#addgraphics").show();
			}else{
			alert(_response);
			}
		}
		
	});
	return false;
}

function finalize(){
	$('#helper').hide();
	$('#loader').show("slow");
	$('#selectedImg').hide("slow");
	$('#editFunctions').hide("slow");
	$.ajax({
		type: 'POST',
		url: '_functions.php',
		data: 'func=finalize&imageFile='+_final+'&type='+type,
		cache: false,
		success: function(response){
			response = unescape(response);
			_response = response;
			var response = response.split("|");
			if(response[0]=="success"){
				$('#selectedImg').hide().fadeIn("slow").html('<center>'+response[1]+'<br />'+response[3]+'</center>');
				enableResize(response[2]);
			}else if(response[0]=="error"){
				$('#selectedImg').hide().fadeIn("slow").html(response[1]);	
			}else{
				$('#selectedImg').hide().fadeIn("slow").html("There was an unexpected error. Your action cannot be completed. <br><pre>" + _response+"</pre>");	
			}
				$('#loader').hide("slow");
		}
	});
	return false;
}

function enableResize(key){
		$('#helper').show("normal").html('Use the <b>handle</b><img src="images/handle.gif"> to resize the image. <b>Click</b> on the download button to download the resized image');
		$("#completed").resizable({aspectRatio:true, stop: function(event,ui){
								resize =  ui.size.width+"x"+ui.size.height;
								},start:function(event,ui){
									$("#imagebox").css("background","none");	
								}
							});
	$("#downloadbtn").click(function(){
									 window.location.href = 'getfile?key='+key+'&size='+resize;
									 });
}