diff --git a/upload/styles/cb_28/layout/photo_upload.html b/upload/styles/cb_28/layout/photo_upload.html
index 43d4a053..29ad7119 100644
--- a/upload/styles/cb_28/layout/photo_upload.html
+++ b/upload/styles/cb_28/layout/photo_upload.html
@@ -1,24 +1,25 @@
 
 {if $step == 1 || $step == ""}
-	<div id="uploadMessage" class=""></div>
-	<div class="container">
-		<div class="cb-box progress-container overallProgressContainer hidden" id="overallProgressContainer">    
-			<div class="row">
-				<div class="col-md-12">
-					<div class="col-md-2" id="uploadedFilesInfo">
-						<p>Uploaded 0 of 0</p>
-					</div>
-					<div class="col-md-10">
-						<div class="progress">
-							<div id="overallProgress" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
-								<span class="sr-only">40% Complete (success)</span>
-							</div>
+<div id="uploadMessage" class=""></div>
+<div class="container">
+	<div class="cb-box progress-container overallProgressContainer hidden" id="overallProgressContainer">    
+		<div class="row">
+			<div class="col-md-12">
+				<div class="col-md-2" id="uploadedFilesInfo">
+					<p>Uploaded 0 of 0</p>
+				</div>
+				<div class="col-md-10">
+					<div class="progress">
+						<div id="overallProgress" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+							<span class="sr-only">40% Complete (success)</span>
 						</div>
 					</div>
 				</div>
+			</div>
 				<!-- <div class="col-md-2">
 					<a id="uploadFiles" class="btn btn-success" href="javascript:;">Upload</a>
 				</div> -->
+
 			</div>
 		</div>
 	</div>
@@ -37,13 +38,13 @@
 						<div class="clearfix" id="uploaderContainer">
 							{if $c}
 							<div class="alert alert-info" role="alert">
-							Photo will be uploaded into <strong><i>{$c.collection_name}</i></strong> Collection
+								Photo will be uploaded into <strong><i>{$c.collection_name}</i></strong> Collection
 							</div>
 							{else}
 							<h4 class="h4">{lang code="select_collection_upload"}</h4>
 							<div class="row">
 								<div id="SelectionDIV" class="col-md-9">
-				   					{if $collections}
+									{if $collections}
 									<div class="form-group clearfix">
 										<select class="form-control" id="collectionSelection" name="collectionSelection">
 											{foreach from=$collections item=item}
@@ -79,8 +80,8 @@
 													<label for="{$field.id}">{$field.title}</label>
 													{$field.class = 'form-control'}
 													{if $field.type == 'checkbox'}
-														{$field.label_class = 'checkbox'}
-														{$field.notShowSeprator = true}
+													{$field.label_class = 'checkbox'}
+													{$field.notShowSeprator = true}
 													{/if}
 													{$formObj->createField($field)}
 												</div>
@@ -118,6 +119,9 @@
 									<p><b>{lang code="selected_files"}</b>{lang code="uploading_in_progress"} <small><span id="progressNumber" style="color:#fff;">0%</span> <span style="color:#fff;">{lang code="complete_of_photo"} </span><span id="videoNumber" style="color:#fff;"></span></small></p>
 								</div>
 							</div>
+							<!-- the div for displaying progress bars -->
+							<div class="realProgressBars"></div>
+							<!-- the div for displaying progress bars -->
 							<div class="align-right hidden" id="uploadMore">
 								<a href="#" class="btn btn-primary uploadMoreVideos" id="uploadMoreVideos">{lang code="upload_more_photos"}</a>
 							</div>
@@ -140,124 +144,189 @@
 	{/if}
 
 	<script type="text/javascript">
-	   (function(window){
-		   $(document).ready(function(){
-			   var baseurl = '{$baseurl}';
-			   var photo_extensions = '{","|implode:$cbphoto->exts}';
+		(function(window){
+			$(document).ready(function(){
+				var baseurl = '{$baseurl}';
+				var photo_extensions = '{","|implode:$cbphoto->exts}';
 
-			   /* files uploading */
-			   $.get("{$theme}/js/plupload/js/plupload.full.min.js", function(e){
-				 var files = [];
-				   var filesIndex = 0;
-				   var uploader = new plupload.Uploader({
-					  browse_button: 'selectFiles',
-					  runtimes : 'html5,flash,silverlight,html4',
-					  url : uploadScriptPath,
-					  browse_button: 'selectFiles',
-					  dragdrop: true,
-					  drop_element: "dragDrop",
-					  filters: {
-						mime_types : [
-						  { title : "Image files", extensions : photo_extensions },
-						]
-					  }
-				   });
+				/* files uploading */
+				$.get("{$theme}/js/plupload/js/plupload.full.min.js", function(e){
+					var files = [];
+					var filesIndex = 0;
+					var uploader = new plupload.Uploader({
+						browse_button: 'selectFiles',
+						runtimes : 'html5,flash,silverlight,html4',
+						url : uploadScriptPath,
+						browse_button: 'selectFiles',
+						dragdrop: true,
+						drop_element: "dragDrop",
+						filters: {
+							mime_types : [
+							{ title : "Image files", extensions : photo_extensions },
+							]
+						}
+					});
 
 				   // initialize the uploader
 
 				   uploader.init();
 				   uploader.bind('FilesAdded', function(up, uploadedFiles) {
 
-					   for(var i = 0; i < uploadedFiles.length; i++){
-						   files.push(uploadedFiles[i]);
-					   }
+				   	for(var i = 0; i < uploadedFiles.length; i++){
+				   		files.push(uploadedFiles[i]);
+				   	}
 
-					   $("#selectedFiles").toggle("display");
-					   $("#uploadMore").addClass("hidden");
+				   	$("#selectedFiles").toggle("display");
+				   	$("#uploadMore").addClass("hidden");
 
 					   // creating the selected files list
 					   var ul = document.createElement('ul');
 					   ul.id = "selectedFilesList";
-						ul.className = "nav nav-tabs";
-						var li = false;
-						var index = 0;
+					   ul.className = "nav nav-tabs";
+					   var li = false;
+					   var index = 0;
 					   plupload.each(files, function(file) {
-							li = document.createElement('li');
-							if(index === 0){
-								li.className = "active";
-							}else{
-								li.className = "";
-							}
-							var link = document.createElement("a");
-							link.href = "#tab"+index;
-							link.setAttribute("data-toggle", "tab");
-							if(files.length < 8){
-							  link.innerHTML = "(" + (index + 1) + ") " + file.name.substring(0, 10);
-							}else{
-							  link.innerHTML = "(" + (index + 1) + ") ";
-							}
-							li.id = index++;
-							li.appendChild(link);
-							ul.appendChild(li);
-						});
+					   	li = document.createElement('li');
+					   	if(index === 0){
+					   		li.className = "active";
+					   	}else{
+					   		li.className = "";
+					   	}
+					   	var link = document.createElement("a");
+					   	link.href = "#tab"+index;
+					   	link.setAttribute("data-toggle", "tab");
+					   	if(files.length < 8){
+					   		link.innerHTML = "(" + (index + 1) + ") " + file.name.substring(0, 10);
+					   	}else{
+					   		link.innerHTML = "(" + (index + 1) + ") ";
+					   	}
+					   	li.id = index++;
+					   	li.appendChild(link);
+					   	ul.appendChild(li);
+					   });
 
 					   $("#files").html("");
-						$("#files").append(ul);
+					   $("#files").append(ul);
 
-						var totalFiles = files.length;
-						
-						var oneFile = false;
+					   var totalFiles = files.length;
+
+					   var oneFile = false;
 
 
-						var uploadForm = $("#photoForm form").clone();
-						var uploadForms = [];
-						for (var i = 0; i < totalFiles; i++ ){
-							var oneUploadForm = $(uploadForm).clone().get(0);
-							var wrapperDiv = document.createElement("div");
-							if(i == 0){
-								wrapperDiv.className = "tab-pane active photoFormContainer";
-							}else{
-								wrapperDiv.className = "tab-pane photoFormContainer";
-							}
-							wrapperDiv.id = "tab"+i;
-							oneUploadForm.className = "";
-							$(oneUploadForm).find("input[name='photo_title']").val(files[i].name.slice(0, -4));
-                       		$(oneUploadForm).find("textarea#photo_description").val(files[i].name.slice(0, -4));
-							$(oneUploadForm).find("input[name='photo_title']").val(files[i].name);
-							$(oneUploadForm).find("textarea#photo_description").val(files[i].name);
-							$(oneUploadForm).find("input[name='category[]']:first").attr('checked', 'checked');
-							if(typeof files[i]['photoThumb'] !== "undefined"){
-							  $(oneUploadForm).find("img").attr("src", files[i]['photoThumb']);
-							}
-							wrapperDiv.appendChild(oneUploadForm);   
-							uploadForms.push(wrapperDiv);
-						}
-						$("#allUploadForms").html("");
-						$("#allUploadForms").append(uploadForms);
+					   var uploadForm = $("#photoForm form").clone();
+					   var uploadForms = [];
+					   for (var i = 0; i < totalFiles; i++ ){
+					   	var oneUploadForm = $(uploadForm).clone().get(0);
+					   	var wrapperDiv = document.createElement("div");
+					   	if(i == 0){
+					   		wrapperDiv.className = "tab-pane active photoFormContainer";
+					   	}else{
+					   		wrapperDiv.className = "tab-pane photoFormContainer";
+					   	}
+					   	wrapperDiv.id = "tab"+i;
+					   	oneUploadForm.className = "";
+					   	$(oneUploadForm).find("input[name='photo_title']").val(files[i].name.slice(0, -4));
+					   	$(oneUploadForm).find("textarea#photo_description").val(files[i].name.slice(0, -4));
+					   	$(oneUploadForm).find("input[name='photo_title']").val(files[i].name);
+					   	$(oneUploadForm).find("textarea#photo_description").val(files[i].name);
+					   	$(oneUploadForm).find("input[name='category[]']:first").attr('checked', 'checked');
+					   	if(typeof files[i]['photoThumb'] !== "undefined"){
+					   		$(oneUploadForm).find("img").attr("src", files[i]['photoThumb']);
+					   	}
+					   	wrapperDiv.appendChild(oneUploadForm);   
+					   	uploadForms.push(wrapperDiv);
+					   }
+
+					// functions added
+					//function for real progress bar
+					$.each( uploadedFiles, function( key, fileNow ) {
+						console.log("filenow "+fileNow);
+						var currentTitle = fileNow.name,
+						plFileId = fileNow.id;					   	
+					  	//<button class="clearfix cancel_button btn btn-danger" style="float:right; margin-top: -20px">Cancel Uploading</button>
+
+					  	// appends progress bar along with title
+					  	// this progress bar is later updated on realtime
+					  	// via fileprogress event of pluploader
+
+					  	$(".realProgressBars").append('<h5 class="realProgTitle_'+plFileId+'">'+currentTitle+'</h5><button class="clearfix cancel_button btn btn-danger" to_cancel="'+plFileId+'" style="float:right; margin-top: -8px; margin-left:10px;">Cancel Uploading</button><div class="progress"><div class="progress-bar progress-bar_'+plFileId+'" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%"><span class="sr-only">70% Complete</span><span class="realProgText_'+plFileId+'">50% completed</span></div></div>');
 
 
+					  });
+					//real progress bar end function
+
+					$("#allUploadForms").html("");
+					$("#allUploadForms").append(uploadForms);
+					
+					/*
+					* Trigger element when "Cancel Uploading" button is clicked
+					* stops uploading
+					* hides uploading div
+					*/
+					//function for cancel button
+					(function() {
+						$(".cancel_button").on("click",function(e) {
+							e.preventDefault();
+							var toCancel = $(this).attr('to_cancel');
+							var thecount = 0;
+							$(this).attr('disabled',true);
+							$(this).text("Canceled");
+							$.each( uploadedFiles, function( iNow, currentFile ){
+								if (currentFile.id == toCancel) {
+									uploader.removeFile(uploadedFiles[thecount]);
+									$(this).unbind().remove();
+									$(".progress-bar_"+toCancel).addClass('progress-bar-danger');
+									$(".realProgText_"+toCancel).text("Canceled");
+									$('li#'+thecount).fadeOut('slow');
+									totalFiles = totalFiles - 1;
+								}
+								thecount++;
+							});
+						});
+					})();
+					//function for cancel button ended
+					// function for UploadProgress
+
+					uploader.bind('UploadProgress', function(up, file) {
+					// this the unique ID assigned to each file upload
+					var pluploadFileId = file.id,
+					filePercentage = file.percent;
+					// update progress bar widht
+					$('.progress-bar_'+pluploadFileId).css("width",filePercentage+"%");
+					//updawte progress bar text to show percentage
+					$('.realProgText_'+pluploadFileId).text(filePercentage+"% Completed");
+					// $("#progressNumber").text(file.percent + "%");
+					// meaning file has completely uploaded
+					if (filePercentage == 100) {
+						// remove cancel button
+						$(".cancel_button[to_cancel='" + pluploadFileId + "']").fadeOut('slow');
+						// tunr progress bar into green to show success
+						$('.progress-bar_'+pluploadFileId).addClass('progress-bar-success');
+					}
+				});
+
+				// function for UploadProgress ended
+				// functions added ended
 
 
-
-
-					   setTimeout(function(){
-						  $("#uploaderContainer").addClass("hidden");
-							$("#uploadDataContainer").removeClass("hidden");
-							$(".uploadingProgressContainer").removeClass("hidden");
-							$("#uploadedFilesInfo").text("Uploaded 0 of " + files.length);
-							$(".allProgress").removeClass("hidden");
-							$("#overallProgressContainer").removeClass("hidden");
-						   uploader.start();
-					   }, 1000);
+				setTimeout(function(){
+					$("#uploaderContainer").addClass("hidden");
+					$("#uploadDataContainer").removeClass("hidden");
+					$(".uploadingProgressContainer").removeClass("hidden");
+					$("#uploadedFilesInfo").text("Uploaded 0 of " + files.length);
+					$(".allProgress").removeClass("hidden");
+					$("#overallProgressContainer").removeClass("hidden");
+					uploader.start();
+				}, 1000);
 					   // updating file title in the form
 					   $("#allUploadForms").css("display", "block");
-				   });
+					});
 
-				   uploader.bind("BeforeUpload", function(){
-					   $("#fileUploadProgress").removeClass("hidden");
-						$(".progress-container").removeClass("hidden");
+uploader.bind("BeforeUpload", function(){
+	$("#fileUploadProgress").removeClass("hidden");
+	$(".progress-container").removeClass("hidden");
 
-				   })
+})
 
 				   /*
 				   This is the event handler for UploadProgress,
@@ -285,8 +354,8 @@
 
 					var currentFileIndex = 0;
 
-				   uploader.bind('FileUploaded', function(plupload, fileDetails, response){
-					   $("#overallProgress").css("width", ((100/files.length)*(++filesUploaded))+"%");
+					uploader.bind('FileUploaded', function(plupload, fileDetails, response){
+						$("#overallProgress").css("width", ((100/files.length)*(++filesUploaded))+"%");
 						$("#overallProgress").parents(".row").find("#uploadedFilesInfo").text("Uploaded " + (filesUploaded) + " of " + files.length);
 						var serverResponse = $.parseJSON(response.response);
 						var fileName = serverResponse.file_name;
@@ -300,18 +369,18 @@
 						var collection_id = '{$c.collection_id}';
 						if (collection_id ) 
 						{
-						  collectionId = collection_id;
+							collectionId = collection_id;
 						}
 						else
 						{
-						  collectionId = $("#SelectionDIV select").val();
+							collectionId = $("#SelectionDIV select").val();
 						}
 						var fileId = false;
-					   fileDetails.name = fileDetails.name.slice(0, -4);
-					   var stored_cid = collectionId;
-					   $.ajax({
-						   url : baseurl + "/actions/photo_uploader.php",
-						   type : "post",
+						fileDetails.name = fileDetails.name.slice(0, -4);
+						var stored_cid = collectionId;
+						$.ajax({
+							url : baseurl + "/actions/photo_uploader.php",
+							type : "post",
 							data : {
 								insertPhoto : "yes",
 								title : fileDetails.name,
@@ -320,7 +389,7 @@
 								ext: serverResponse.extension,
 							},
 							dataType: "JSON",
-					   }).success(function(msg){
+						}).success(function(msg){
 						  //creating the hidden form fields
 						  var slicedTitle = $('#photo_title').val().slice(0, -4);
 						  var slicedDesc = $('#photo_description').val().slice(0, -4);
@@ -331,15 +400,15 @@
 						  $(".submitPhoto").removeAttr("disabled");
 						  
 						  if(typeof files[(currentFileIndex - 1)] !== "undefined"){
-							files[(totalUploaded-1)]['photoThumb'] = msg.photoPreview;
+						  	files[(totalUploaded-1)]['photoThumb'] = msg.photoPreview;
 						  }
-						   var hiddenPhotoIdField = document.createElement('input');
-						   hiddenPhotoIdField.name = 'photo_id';
-						   hiddenPhotoIdField.type = 'hidden';
-						   hiddenPhotoIdField.value =  msg.photoID;
+						  var hiddenPhotoIdField = document.createElement('input');
+						  hiddenPhotoIdField.name = 'photo_id';
+						  hiddenPhotoIdField.type = 'hidden';
+						  hiddenPhotoIdField.value =  msg.photoID;
 
-						   uploadForm.append(hiddenPhotoIdField);
-					   });
+						  uploadForm.append(hiddenPhotoIdField);
+						});
 
 					   /* 
 					   Submit the form with all the video details and options 
@@ -347,36 +416,36 @@
 					   */
 
 					   $(uploadForm).find(".submitPhoto").on({
-							click: function(e){
-								e.preventDefault();
-								var cid = $('.cid').val();
-								var collectionId = $("#SelectionDIV select").val();
+					   	click: function(e){
+					   		e.preventDefault();
+					   		var cid = $('.cid').val();
+					   		var collectionId = $("#SelectionDIV select").val();
 
-								if(cid !== '')
-								{
-									collectionId = cid;
-								}
-								var self = $(this).parents("form");
-								var data = $(self).serialize();
-								data += "&collection_id="+stored_cid;
-								data += "&server_url=undefined&folder=undefined&updatePhoto=yes";
+					   		if(cid !== '')
+					   		{
+					   			collectionId = cid;
+					   		}
+					   		var self = $(this).parents("form");
+					   		var data = $(self).serialize();
+					   		data += "&collection_id="+stored_cid;
+					   		data += "&server_url=undefined&folder=undefined&updatePhoto=yes";
 
-								$.ajax({
-									url : baseurl + "/actions/photo_uploader.php",
-									type : "post",
-									data : data
-								}).success(function(msg){
-									$("#uploadMessage").removeClass("hidden");
-									$("#uploadMessage").html("Picture details are successfully updated").attr("class", "alert alert-success");
-									setTimeout(function(){
-										$("#uploadMessage").addClass("hidden");
-									}, 5000);
-								}).fail(function(err){
-									console.log(err);
-								});
-							}
-						});
-						currentFileIndex++;
+					   		$.ajax({
+					   			url : baseurl + "/actions/photo_uploader.php",
+					   			type : "post",
+					   			data : data
+					   		}).success(function(msg){
+					   			$("#uploadMessage").removeClass("hidden");
+					   			$("#uploadMessage").html("Picture details are successfully updated").attr("class", "alert alert-success");
+					   			setTimeout(function(){
+					   				$("#uploadMessage").addClass("hidden");
+					   			}, 5000);
+					   		}).fail(function(err){
+					   			console.log(err);
+					   		});
+					   	}
+					   });
+					   currentFileIndex++;
 					});
 
 					uploader.bind("UploadComplete", function(plupload, files){
@@ -406,7 +475,7 @@
 							var formData = $(this).parents("form").serialize();
 							formData += "&mode=add_collection";
 							var collectionName = $(this).parents("form").find("#collection_name").val();
-						  	$.ajax({
+							$.ajax({
 								type: "post",
 								url: baseurl + "/ajax.php",
 								data: formData,
@@ -425,11 +494,11 @@
 									$(".h4").show();
 									$(".instructions").show();
 									$("#SelectionDIV").show();
-							  		setTimeout(function(){
+									setTimeout(function(){
 										$("#uploadMessage").addClass("hidden");
-							  		}, 5000);
+									}, 5000);
 								}else{
-										$("#uploadMessage").html(msg.err).attr("class", "alert alert-danger").removeClass("hidden");
+									$("#uploadMessage").html(msg.err).attr("class", "alert alert-danger").removeClass("hidden");
 									setTimeout(function(){
 										$("#uploadMessage").addClass("hidden");
 									}, 5000);
@@ -495,27 +564,28 @@
 						}
 					});
 				});
-			});
-		})(window);
-	</script>
+});
+})(window);
+
+</script>
 
 {/if}
 {* These steps are no longer in use *}
 {if $step == 2}
-	<h2>Enter Information</h2>
-	{foreach item=item from=$photos}
-		{include file="$style_dir/blocks/upload/photo_form.html" photo=$item}
-	{/foreach}
-	<button class="LoadMoreButton clearfix" onclick="callAjax(this);" type="button" name="insertPhotos" id="insertPhotos">Save All</button>
+<h2>Enter Information</h2>
+{foreach item=item from=$photos}
+{include file="$style_dir/blocks/upload/photo_form.html" photo=$item}
+{/foreach}
+<button class="LoadMoreButton clearfix" onclick="callAjax(this);" type="button" name="insertPhotos" id="insertPhotos">Save All</button>
 {/if}
 
 {if $step == 3}
-	<div class="photoBox">
-		<div style="background:#FFF; text-align:center; border-bottom:1px solid #ccc; color:#666; padding:8px; font:bold 14px Arial;">{lang code="photo_success_heading"}</div>
-		
-		<div class="clearfix" style="padding:8px; font:normal 11px Tahoma;">
-			You can manage your photos from <strong><a href="{link name='manage_photos'}">{lang code='manage_photos'}</a></strong>.
-		</div>
+<div class="photoBox">
+	<div style="background:#FFF; text-align:center; border-bottom:1px solid #ccc; color:#666; padding:8px; font:bold 14px Arial;">{lang code="photo_success_heading"}</div>
+
+	<div class="clearfix" style="padding:8px; font:normal 11px Tahoma;">
+		You can manage your photos from <strong><a href="{link name='manage_photos'}">{lang code='manage_photos'}</a></strong>.
 	</div>
+</div>
 {/if}