/*
 * @see  http://www.fengcool.com/
 * @link http://www.fengcool.com/2009/06/ajax-form-upload-local-image-file-without-refresh/
 * */
var debug = false;
var frameId = 'frame_ID';      //hidden frame id
var jFrame = null;             //hidden frame object
var formId = 'form_ID';        //hidden form id
var jForm = null;              //hidden form object
var limit = 1;
var fileMax = null;               //maximum number of file to be uploaded
var fileCount = 0;             //file counter
var uploadUrl = "/profile/up"; //where to handle uploaded image

var up = function(){  

var jForm = createForm(formId);       //create hidden form
var jFrame = createUploadIframe(frameId);   //create hidden iframe

//append hidden form to hidden iframe
jForm.appendTo('body');         
jForm.attr('target',frameId);              //make form target to iframe

$("#inp").bind('change',startUpload);   //bind onchange function to input element
$("#removePimg").click(function(e){removeUpload(e);return false;});
function startUpload(){
   if(jForm!=null){               
      jForm.remove();                        //re-create hidden form
      jForm = createForm(formId);
      jForm.appendTo('body');
      jForm.attr('target',frameId);
   }
 
   var newElement = $(this).clone(true);  //clone input element object
   newElement.bind('change',startUpload); //bind onchange function. detect iframe changes
   newElement.insertAfter($(this));       //insert clone object to current input element object
   $(this).appendTo(jForm);                   
   if( preloaderImg != undefined) {
	   $("#pimg").attr("src", preloaderImg.src);
   }	 
   jForm.submit();                        //let's upload the file
   jFrame.unbind('load');                  
   jFrame.load(function(){               //bind onload function to hidden iframe
	   
      //get response message from hidden iframe
      var myFrame = document.getElementById($(this).attr('name'));   
      var response = $(myFrame.contentWindow.document.body).text();
 
      /*
      * you may handle upload status from reponse message.
      * in this example, upload succeeded if message contains ".gif" , otherwise, alert reponse message
      */
      
      var r = eval(response);
      if(r[0] == 'ok'){
    	  $('#flashmsg').html('');
    	  $('#flashmsg').css('display','none');
         addUpload(r[1]); //show thumbnails, add text box with file name
         fileCount++;
         if(limit > 1 && fileCount >= fileMax){ //reach maximum upload file, disable input element
            $("#inp").attr('disabled','disable');
         }
      }else if(r[0] == 'err'){  //error
    	  $("#pimg").attr("src", r[2] );
    	  $('#flashmsg').html(r[1]);
    	  $('#flashmsg').css('display','block');
      }
   });
}
}


function createUploadIframe(id){
   //set top and left to make form invisible
	var i_f, css_i_f;
	if(!debug){
		i_f = '<iframe width="0" height="0" name="' + id + '" id="' + id + '"></iframe>';
		css_i_f = {position: 'absolute',top: '0px',left: '-1px',border:'0 none'};
	}
	else {
		i_f = '<iframe width="600" height="100" name="' + id + '" id="' + id + '"></iframe>';
		css_i_f = {position: 'absolute',top: '10px',left: '10px',border:'2px dotted red', background: '#fff'};
	}	
		
   return $(i_f)
         .css(css_i_f)
         .appendTo('body');
}
 
function createForm(formId) {
	var f;
	if(!debug){
		f = '<form method="post" action="'+uploadUrl+'" name="' + formId + '" id="' + formId + 
        '" enctype="multipart/form-data" style="position:absolute;border: 0 none;'+
        'width:0px;height:0px;left:0px;top:-1500px;padding:0px">' +
        '<strong>You should hide red blocks</strong><br><br></form>'
	} else {
		f = '<form method="post" action="'+uploadUrl+'" name="' + formId + '" id="' + formId + 
        '" enctype="multipart/form-data" style="position:absolute;border: 2px dotted red;'+
        'width:200px;height:200px;left:10px;top:150px;padding:5px">' +
        '<strong>You should hide red blocks</strong><br><br></form>'
	}	
      return $(f);
}
 
function addUpload(img){
	$("#pimg").attr("src", img); 
}
 
function removeUpload(e){
   $('#flashmsg').html('');
   $('#flashmsg').css('display','none');
   var removeId = $(e.target).attr('alt');
   $('#'+removeId).remove();
   if(fileCount>0) fileCount--;
   $("#inp").removeAttr('disabled');
   $.ajax({
       type: 'POST',
       data: "",
       url: "/profile/delimg",
       success: function(data) {
	       addUpload(data);
       }    
   });
}