{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="container">
    <div class="cb-box marginTop" id="mainUploadContainer">
      <div class="pad-bottom video-info-container">
        <ul class="nav nav-tabs uploaderTabs">
           <li class="active"><a href="#file-upload" data-toggle="tab">Photo Upload</a></li>
        </ul>
        <div class="tab-content uploadFormDiv">
          <div class="tab-pane fade in active clearfix" id="file-upload">
            <div class="instructions alert alert-info">
               {lang code='upload_right_guide_photo'}
            </div>
            <div class="clearfix" id="uploaderContainer">
              <h4>Select Collection</h4>
              <div class="row">
                <div id="SelectionDIV" class="col-md-9">
                   {if $collections}
                   <div class="form-group">
                       <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-warning">No Collection Found</p>
                      <div class="form-group">
                         <label>Select Collection</label>
                         <select class="form-control" id="collectionSelection" name="collectionSelection">
                            <option value="0">no collection found</option>
                         </select>
                     </div>
                   {/if}
                </div>
                <div class="col-md-3 text-center">
                   <a href="#" class="btn btn-success" id="createNewCollection">
                      Create New Collection
                   </a>
                </div> 
              </div>
              <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">
                          <button type="button" id="addNewCollection" class="btn btn-success">
                             Add Collection
                          </button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              <div class="upload-area col-md-12 clearfix">
                <div class="fileUploaderForm">
                    <div class="dragDropContainer" id="dragDrop">
                        Drag &amp; Drop Files Here
                    </div>
                    <div class="selectButtonContainer">
                        <a id="selectFiles" href="javascript:;" class="btn btn-primary btn-lg selectFiles">Select Photos</a>
                    </div>
                </div>
              </div>
            </div>
            <div id="uploadDataContainer" class="uploadDataContainer clearfix marginTop">
              <div class="uploadingProgressContainer clearfix hidden">
                  <div class="alert alert-info">
                      <p><b>Selected Files</b> Uploading in progress <small><span id="progressNumber">0%</span> Complete of Photo <span id="videoNumber"></span></small></p>
                  </div>
              </div>
              <div class="align-right hidden" id="uploadMore">
                  <a href="#" class="btn btn-primary uploadMoreVideos" id="uploadMoreVideos">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>
  </div>

  <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);
                        $(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 fileId = false;
                   var collectionId = $("#SelectionDIV select").val();
                   $.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
                      $(uploadForm).find("img").attr("src", msg.photoPreview);
                      $(uploadForm).find(".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 collectionId = $("#SelectionDIV select").val();
                           var self = $(this).parents("form");
                           var data = $(self).serialize();
                           data += "&collection_id="+collectionId;
                           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");
                      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("slow");
                  }
                });

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


{AD place='ad_300x250'}