{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>
					</div>
				</div>
				<!-- <div class="col-md-2">
					<a id="uploadFiles" class="btn btn-success" href="javascript:;">Upload</a>
				</div> -->
			</div>
		</div>
	</div>

	<div class="clearfix photoupload-block">
		<div class="cb-box container" id="mainUploadContainer">
			<div class="pad-bottom video-info-container flat-tabs">
				<ul class="nav nav-tabs uploaderTabs">
					<li class="active"><a href="#file-upload" data-toggle="tab">{lang code="photo_upload_tab"}</a></li>
				</ul>
				<div class="tab-content uploadFormDiv">
					<div class="tab-pane fade in active clearfix" id="file-upload">
						<div class="instructions alert alert-block alert-info">
							{lang code='upload_right_guide_photo'}
						</div>
						<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
							</div>
							{else}
							<h4 class="h4">{lang code="select_collection_upload"}</h4>
							<div class="row">
								<div id="SelectionDIV" class="col-md-9">
				   					{if $collections}
									<div class="form-group clearfix">
										<select class="form-control" id="collectionSelection" name="collectionSelection">
											{foreach from=$collections item=item}
											<option value="{$item.collection_id}">{$item.collection_name}</option>
											{/foreach}
										</select>
									</div>
									{else}
									<p class="alert alert-danger">{lang code="no_collection_found_alert"}</p>
									<div class="form-group">
										<label>{lang code="select_collection_upload"}</label>
										<select class="form-control" id="collectionSelection" name="collectionSelection">
											<option value="0">	{lang code="no_collection_upload"}</option>
										</select>
									</div>
									{/if}
								</div>
								<div class="col-md-3 text-center">
									<a href="#" class="btn btn-ghost btn-lg" id="createNewCollection">{lang code="create_new_collection_btn"}</a>
								</div>
							</div>
							{/if}
							<div class="row">
								<div class="col-md-10 col-md-offset-1">
									<div class="manageCollection">
										<div id="CollectionDIV" style="display:none">
											<form action="#" type="post">
												<h3>Create New Collection</h3>
												{assign var='reqFields' value=$cbcollection->load_required_fields()}    
												{foreach from=$reqFields item=field}
												{if $field.id != 'type'}
												<div class="form-group">
													<label for="{$field.id}">{$field.title}</label>
													{$field.class = 'form-control'}
													{if $field.type == 'checkbox'}
														{$field.label_class = 'checkbox'}
														{$field.notShowSeprator = true}
													{/if}
													{$formObj->createField($field)}
												</div>
												{/if}
												{/foreach}
												<div class="moveR" style="float:left; margin:0px 5px 0 5px";>
													<button type="button" id="addNewCollection" class="btn btn-success">Add Collection</button>
												</div>
												<div style="float:left; margin:0px 5px 0 5px;">
													<button type="button" id="cancelAddCollection" class="btn btn-success">Cancel</button>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
							{if $collections}
							<div class="upload-area col-md-12 clearfix">
								<div class="fileUploaderForm">
									<div class="dragDropContainer clearfix" id="dragDrop">
										<span class="upload-logo"></span>
										<strong class="block-title">{lang code="drag_drop"}</strong>
										<p>{lang code="photo_can_be"} {$Cbucket->configs[176].value} {lang code="photo_upload_txt"}</p>
									</div>
									<div class="selectButtonContainer">
										<a id="selectFiles" href="javascript:;" class="btn btn-primary btn-lg selectFiles">{lang code = "select_photos"}</a>
									</div>
								</div>
							</div>
							{/if}
						</div>
						<div id="uploadDataContainer" class="uploadDataContainer clearfix marginTop">
							<div class="uploadingProgressContainer clearfix hidden">
								<div class="alert alert-block alert-info">
									<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>
							<div class="align-right hidden" id="uploadMore">
								<a href="#" class="btn btn-primary uploadMoreVideos" id="uploadMoreVideos">{lang code="upload_more_photos"}</a>
							</div>
							<div class="marginTop">
								<div id="files" class=""></div>
								<div id="allUploadForms" class="tab-content allUploadForms"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="photoForm" class="hidden">
		{include file="$style_dir/blocks/upload/photo_form.html" }
	</div>
	<!-- Following hidden field is used to store Collection ID. -->
	{if $c}
	<input type="hidden" name="cid" id="cid" class="cid" value="{$c.collection_id}">
	{/if}

	<script type="text/javascript">
	   (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 },
						]
					  }
				   });

				   // initialize the uploader

				   uploader.init();
				   uploader.bind('FilesAdded', function(up, uploadedFiles) {

					   for(var i = 0; i < uploadedFiles.length; i++){
						   files.push(uploadedFiles[i]);
					   }

					   $("#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;
					   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);
						});

					   $("#files").html("");
						$("#files").append(ul);

						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);






					   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");

				   })

				   /*
				   This is the event handler for UploadProgress,
				   It fires regularly after a certain amount of time when the the files are being uploaded
				   */

				   var totalUploaded = 0;
					/*
					This is the event handler for UploadProgress,
					It fires regularly after a certain amount of time when the the files are being uploaded
					*/

					var filesUploaded = 0;
					var totalPercentage = 0;
					uploader.bind('UploadProgress', function(up, file) {
						$("#progressNumber").text(file.percent + "%");
						$("#videoNumber").text(file.name);
					});


				   /*
					This is the event handler for FileUploaded,
					it fires when the uploading of the files is completed  
					*/

					var currentFileIndex = 0;

				   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;
						var uploadForm = $("#tab"+currentFileIndex+" form");
						totalUploaded++;
						/*
						Insert the video in the database and get the video db id from the
						database which will be sent with the final form
						*/
						var collectionId;
						var collection_id = '{$c.collection_id}';
						if (collection_id ) 
						{
						  collectionId = collection_id;
						}
						else
						{
						  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",
							data : {
								insertPhoto : "yes",
								title : fileDetails.name,
								file_name : fileName,
								collection_id: collectionId,
								ext: serverResponse.extension,
							},
							dataType: "JSON",
					   }).success(function(msg){
						  //creating the hidden form fields
						  var slicedTitle = $('#photo_title').val().slice(0, -4);
						  var slicedDesc = $('#photo_description').val().slice(0, -4);
						  $('#photo_title').val(slicedTitle);
						  $('#photo_description').val(slicedDesc);
						  $(uploadForm).find("img").attr("src", msg.photoPreview);
						  $(uploadForm).find("img").css("max-width", "100%");
						  $(".submitPhoto").removeAttr("disabled");
						  
						  if(typeof files[(currentFileIndex - 1)] !== "undefined"){
							files[(totalUploaded-1)]['photoThumb'] = msg.photoPreview;
						  }
						   var hiddenPhotoIdField = document.createElement('input');
						   hiddenPhotoIdField.name = 'photo_id';
						   hiddenPhotoIdField.type = 'hidden';
						   hiddenPhotoIdField.value =  msg.photoID;

						   uploadForm.append(hiddenPhotoIdField);
					   });

					   /* 
					   Submit the form with all the video details and options 
					   to update the video information in the system
					   */

					   $(uploadForm).find(".submitPhoto").on({
							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";

								$.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){
						$("#fileUploadProgress").addClass("hidden");
						$("#uploadMore").removeClass("hidden");
						$(".uploadingProgressContainer").addClass("hidden");
						uploader.refresh();
						$("#uploadMessage").html("All Files are uploaded Successfully").attr("class", "alert alert-success");            
						setTimeout(function(){
							$("#uploadMessage").addClass("hidden");
						}, 5000);
					});

					uploader.bind('Error', function(up, err) {
						$("#uploadMessage").removeClass("hidden");
						if(err){
							$("#uploadMessage").html(err.message).attr("class", "alert alert-danger");
						}
						setTimeout(function(){
							$("#uploadMessage").addClass("hidden");
						}, 8000);
					});

					$("#addNewCollection").on({
						click: function(e){
							e.preventDefault();
							var formData = $(this).parents("form").serialize();
							formData += "&mode=add_collection";
							var collectionName = $(this).parents("form").find("#collection_name").val();
						  	$.ajax({
								type: "post",
								url: baseurl + "/ajax.php",
								data: formData,
							}).success(function(msg){
								msg = $.parseJSON(msg);
								if(msg.err === null){
									var newCollectionElement = document.createElement('option');
									newCollectionElement.value = parseInt(msg.id);
									newCollectionElement.innerHTML = collectionName;
									newCollectionElement.selected = true;
									$("#collectionSelection").get(0).appendChild(newCollectionElement);
									$("#CollectionDIV").toggle("slow");
									$("#uploadMessage").html(msg.msg).attr("class", "alert alert-success").removeClass("hidden");
									$(".upload-area").show();
									$("#createNewCollection").show();
									$(".h4").show();
									$(".instructions").show();
									$("#SelectionDIV").show();
							  		setTimeout(function(){
										$("#uploadMessage").addClass("hidden");
							  		}, 5000);
								}else{
										$("#uploadMessage").html(msg.err).attr("class", "alert alert-danger").removeClass("hidden");
									setTimeout(function(){
										$("#uploadMessage").addClass("hidden");
									}, 5000);
								}
							});
						}
					});
					
					$("#createNewCollection").on({
						click: function(e){
							e.preventDefault();
							$("#CollectionDIV").toggle("fast");
							$("#createNewCollection").hide();
							$(".h4").hide();
							$("#SelectionDIV").hide();
							$(".upload-area").hide();
							$(".instructions").hide();
						}
					});

					$("#cancelAddCollection").on({
						click: function(e){
							e.preventDefault();
							$("#CollectionDIV").hide();
							$("#createNewCollection").show();
							$(".h4").show();
							$("#SelectionDIV").show();
							$(".upload-area").show();
							$(".instructions").show();
						}
					});

					$("#selectedFilesList a").on({
						click: function(e){
							e.preventDefault();
							$(this).tab("show");
						}
					});

					$("#SelectionDIV select").on({
						change: function(e){
							var collectionField = $("#collectionId");
							if(collectionField){
								$(collectionField).val(this.value);
							}else{
								var newField = document.createElement("input");
								newField.type = "hidden";
								newField.name = "collection_id";
								newField.value = this.value;
								$("#allUploadForms form").each(function(index, value){
									$(value).get(0).appendChild(newField);
								});
							}
						}
					});

					$("#uploadMoreVideos").on({
						click: function(e){
							e.preventDefault();
							$("#uploaderContainer").removeClass("hidden");
							$("#uploadDataContainer").addClass("hidden");
							/*$(this).addClass("hidden");*/
						}
					});
				});
			});
		})(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>
{/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>
{/if}