//create a preview of the selection
function preview(img, selection) { 
	//alert("running preview");
	//get width and height of the uploaded image.
	var current_width = $('#uploaded_image').find('#thumbnail').width();
	var current_height = $('#uploaded_image').find('#thumbnail').height();

	var scaleX = 100 / selection.width; 
	var scaleY = 100 / selection.height; 
	
	$('#uploaded_image').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);
} 

//show and hide the loading message
function loadingmessage(msg, show_hide){
	if(show_hide=="show"){
		//alert("showing");
		$('#loader').show();
		$('#progress').show().text(msg);
		$('#uploaded_image').html('');
	}else if(show_hide=="hide"){
		//alert("hiding");
		$('#loader').hide();
		$('#progress').text('').hide();
	}else{
		$('#loader').hide();
		$('#progress').text('').hide();
		$('#uploaded_image').html('');
	}
}

function slideshowreturn(){
	//alert("slideshowreturn");
	$('#upload_status').hide();
	$('#uploaded_image').html('').hide();
	$('#slideshow_thumbs').removeClass('hidden');
}

//delete the image when the delete link is clicked.
function deleteimage(large_image, thumbnail_image){
	loadingmessage('Please wait, deleting images...', 'show');
	
	$.post('image_uploader/image_handling.php',
		   'a=delete&large_image='+large_image+'&thumbnail_image='+thumbnail_image,
			 function(data){
				loadingmessage('', 'hide');
				var responseType = data[0];
				var responseMsg = data[1];
				if(responseType==1){
					$('#upload_status').show().html('<h1 style="padding:0px;margin:2px 5px;">Success</h1><p>'+responseMsg+'</p>');
					$('#uploaded_image').html('');
					setTimeout(function(){
						$('#upload_status').hide().html('');
						$('#slideshow_thumbs').removeClass('hidden');
						
					},2500);
				}else{
					$('#upload_status').show().html('<h1 style="padding:0px;margin:2px 5px;">Unexpected Error</h1><p>Please try again</p>'+data);
				}
		   },'json');
}
$(document).ready(function(){
		
		$('#loader').hide();
		$('#progress').hide();
		
		var myUpload = $('#uploadButton').upload({
		   name: 'image',
		   action: 'image_uploader/image_handling.php',
		   enctype: 'multipart/form-data',
		   params: {upload:'Upload'},
		   autoSubmit: true,
		   onSubmit: function() {
			   	$('#slideshow_thumbs').addClass('hidden');
		   		$('#upload_status').html('').hide();
				loadingmessage('Please wait while we upload your file...', 'show');
		   },
		   onComplete: function(response) {
		   		loadingmessage('', 'hide');
				response = jQuery.trim(unescape(response));
				var response = response.split("|");
				var responseType = response[0];
				var responseMsg = response[1];
				if(responseType=="success"){
					
					var current_width = response[2];
					var current_height = response[3];
					//display message that the file has been uploaded
					$('#upload_status').show().html('<h1 style="padding:0px;margin:2px 5px;">Success</h1><p>The image has been uploaded.<br /><br /> <b>1)</b> Photo Caption: <input type="text" name="caption" id="caption" value="" size="60"><br />');
					$('#disclaimer').show().html('<b>2)</b> I agree to the <a href=\"javascript:void(1);\" class=\"doClick\">disclaimer</a>. <input type="checkbox" name="agree" id="agree" value="1">');
					$('#cropinstructions').show().html('<b>Instructions</b><br />1) Type a photo caption. 2) Agree to disclaimer. 3) Crop Image - click and hold your left mouse on the image and drag a square around the area you would like to appear in the thumbnail preview image.  When finished, click the "Save Thumbnail" button.</p>');

					//put the image in the appropriate div
					$('#uploaded_image').html('<h2>Crop Photo Below</h2><div style="border:1px solid #bbbbbb; position:relative;float:left;overflow:hidden; width:100px; height:100px;padding:1px;"><img src="'+responseMsg+'" style="position: relative;" id="thumbnail_preview" alt="Thumbnail Preview" /></div><img src="'+responseMsg+'" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />')
					$('#uploaded_image').show();
					//find the image inserted above, and allow it to be cropped
					$('#uploaded_image').find('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview ,maxHeight:300,maxWidth:300}); 
					//display the hidden form
					$('#thumbnail_form').show();
				}else if(responseType=="error"){
					$('#upload_status').show().html('<h1 style="padding:0px;margin:2px 5px;">Error</h1><p>'+responseMsg+'</p>');
					$('#uploaded_image').html('');
					$('#thumbnail_form').hide();
				}else{
					$('#upload_status').show().html('<h1 style="padding:0px;margin:2px 5px;">Unexpected Error</h1><p>Please try again</p>'+response);
					$('#uploaded_image').html('');
					$('#thumbnail_form').hide();
				}
		   }
		});
	
	//create the thumbnail
	$('#save_thumb').click(function() {
		//alert('testing save thumb');
		//var agree = $('#agree:checked').val();
		var x1 = $('#x1').val();
		var y1 = $('#y1').val();
		var x2 = $('#x2').val();
		var y2 = $('#y2').val();
		var w = $('#w').val();
		var h = $('#h').val();
		var caption = $('#caption').val();
		
		if(caption==""){
			alert("You must enter a text caption.");
			return false;
		}
		
		if($('#agree:checked').val() !=="1") {
			alert("You must agree to the disclaimer.");
			return false;
		}
		
		
		
		if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
			alert("You must make a selection first");
			return false;
		}else{
			//hide the selection and disable the imgareaselect plugin
			$('#uploaded_image').find('#thumbnail').imgAreaSelect({ disable: true, hide: true }); 
			loadingmessage('Saving thumbnail, almost done....', 'show');
			$('#thumbnail_form').hide();
			$('#upload_status').hide();
			$('#disclaimer').hide();
			$('#cropinstructions').hide();
			
			
			$.post('image_uploader/image_handling.php',
				   'save_thumb=Save%20Thumbnail&x1='+x1+'&y1='+y1+'&x2='+x2+'&y2='+y2+'&w='+w+'&h='+h+'&caption='+caption,
				   function (data){
					   	loadingmessage('', 'hide');
						var responseType = data[0];
						var responseLargeImage = data[1];
						var responseThumbImage = data[2];
						if(responseType=="1"){
							$('#upload_status').show().html('<h1 style="padding:0px;margin:2px 5px;">Success</h1><p>The images have been saved. Once approved, they will be added to the rotation.</p><a id="slideshowreturn" href="javascript:slideshowreturn();">Return to the Slide Show</a>');
							//load the new images
							$('#uploaded_image').html('<img src="'+responseThumbImage+'" alt="Thumbnail Image"/><br><img src="'+responseLargeImage+'" alt="Large Image"/>');
							//hide the thumbnail form
							$('#thumbnail_form').hide();
						}else{
							$('#upload_status').show().html('<h1 style="padding:0px;margin:2px 5px;">Unexpected Error</h1><p>Please try again</p>'+response);
							//reactivate the imgareaselect plugin to allow another attempt.
							$('#uploaded_image').find('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview, maxWidth:300,maxHeight:300,handles:true }); 
							$('#thumbnail_form').show();
						}
				   },'json' );

			
			return false;
		}
	});
 

});