function newportUpload(inputButton,path,statusDiv, resultsDiv){

var inputButton = inputButton;
var path=path;
var statusDiv = statusDiv;
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 fileMax = 3;                  //maximum number of file to be uploaded
var fileCount = 0;               //file counter
var uploadUrl = path; //where to handle uploaded image
jForm = createForm(formId);       //create hidden form
jFrame = createUploadIframe(frameId)   //create hidden iframe
//append hidden form to hidden iframe
jForm.appendTo('body');         
jForm.attr('target',frameId);              //make form target to iframe
$(inputButton).bind('change',startUpload);   //bind onchange function to input element

function createUploadIframe(id){
return $('<iframe width="1" height="1" name="' + id + '" id="' + id + '"></iframe>')
.css({display: 'none'}).appendTo('body');
}

function createForm(formId) {
return $('<form method="post" action="'+uploadUrl+'" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data" style="position:absolute;border:1px solid #f00;'+ 'width:300px;height:100px;display:none;">' +'</form>');
}

function startUpload(){
    $(statusDiv).toggle();
    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);                   
   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).html();
   $(resultsDiv).html(response);
   $("#img_upload, #uploadstatus").toggle();
   $("#removepic").show();
  
   });

}

}//end of newportUpload




function addUpload(id,img){
   var div = $(document.createElement('div')).attr('id',id);
   //add uploaded image
   div.html("<img src='"+img+"'><br />");
   //add text box

   var fileName = img.substring(img.lastIndexOf("/")+1);

   var txtbx = $(document.createElement('input')).attr('name','img[]').attr('type','text').val(fileName);

   /* you may want to change textbox to a hidden field in production */

   //var txtbx = $(document.createElement('input')).attr('name','img[]').attr('type','hidden').val(fileName);

   txtbx.appendTo(div);



   //add remove thumbnail link

   var rem = $(document.createElement('a')).attr('alt',id).attr('href','javascript:;').text("Remove").click(removeUpload);      

   rem.appendTo(div);

   

   //add to the page

   div.appendTo("#uploaded_thumb");

}

 

function removeUpload(e){

   var removeId = $(e.target).attr('alt');

   $('#'+removeId).remove();

   if(fileCount>0) fileCount--;

   $("#inp").removeAttr('disabled');

}