// JavaScript Document
$(function(){

	$('.profile-photo').click(function(){
		$('.new-profile-image').click();
	});
	
	$('.new-profile-image').change(function(){
		$('#changeProfilePicture').submit();
		setTimeout(function(){ $('#changeProfilePicture').submit(); },100)
	});
	
	$('#changeProfilePicture').submit(function(){
											   
		if($('.overlay-profile').length){
			
		}else{
			$('.profile-photo').append('<div class="overlay-profile" style="height:110%;top: 0px;width: 95%;opacity: 0.5; background:#CCCCCC; position:absolute; z-index:18;">'+
								   '<div id="busy-icon" align="center" style="align:center; padding-top:30%; " ><img src="images/spinner.gif" alt="Loading..."></div><div id="statustext" style="z-index:12"></div>'+
								   '</div>');
		}
		
		var progressbox     = $('#progressbox');
		var progressbar     = $('#progressbar');
		var statustxt       = $('#statustext');
		var completed       = '0%';								   
											   
			$(this).ajaxForm({
			beforeSend: function() {
				//console.log("beforeSend");
				progressbox.show(); //show progressbar
				progressbar.width(completed); //initial value 0% of progressbar
				statustxt.html(completed); //set status text
				statustxt.css({'color':'#000','font-size':'15px','font-weight':'bold','text-align':'center'}); 
				
				
			},
			uploadProgress: function(event, position, total, percentComplete) {
				progressbar.width(percentComplete + '%') //update progressbar percent complete
				statustxt.html(percentComplete + '%'); //update status text
				console.log(percentComplete);
				if(percentComplete>50)
					{
						statustxt.css({'color':'#000','font-size':'15px','font-weight':'bold','text-align':'center'});  //change status text to white after 50%
					}
				console.log(percentComplete);
			},
			success: function(url) {
				//alert("Employee details successfully updated.");
				$('.profile-photo').html('<img src="upload/thumb/'+url+'" height="250" width="220">');
			},
			complete: function() {
				console.log('done.');
			}
	
			});
	});
	

});