stage one complete

@@ -35,7 +35,8 @@ class pdfModel extends Model
             ->join('changesPDF', 'PDF_idPDF', '=', 'idPDF')
             ->join('stylesPDF', 'stylesPDF_idstylesPDF', '=', 'idstylesPDF')
             ->join('change_typePDF', 'idchange_typePDF', '=', 'change_typePDF_idchange_typePDF')
-            ->where('PDF.idPDF','=', $id);
+            ->where('PDF.idPDF','=', $id)
+			->orderBy('changesPDF.order', 'asc');
 
 
         return $rows;

-  var pluginUrl = "http://localhost:8888/Forms";
-  var pdf_customizer = "http://localhost:8888/pdf-customizer/public";
+ // var pluginUrl = "http://localhost:8888/Forms";
+ // var pdf_customizer = "http://localhost:8888/pdf-customizer/public";
 
-  // var pluginUrl = "http://contact.gotenzing.com";
-  //  var pdf_customizer = "http://pdf-customizer.synapsus.co";
+   var pluginUrl = "http://contact.gotenzing.com";
+    var pdf_customizer = "http://pdf-customizer.synapsus.co";
 
   function getAuth() {
 
@@ -64,10 +64,12 @@
       });
   }
 
-  function ShowBox(pheight, pwidth,up, right, height, width, example) {
+  function ShowBox(pheight, pwidth,up, right, height, width, count, example) {
 
      
       jQuery(document).ready(function($) {
+        $('span').hide();
+        $('#span'+count).show();
         $('#Canvas').css("background-image", "url(" + pdf_customizer + '/fileentry/getImage/' +example+")");  
         
        var Qc = document.getElementById("Canvas");
@@ -101,9 +103,9 @@
 
 
   function HideBox() {
-
-   
       jQuery(document).ready(function($) {
+        $('span').hide();
+
        var cnv = document.getElementById("Canvas");
        var ctx = cnv.getContext('2d');     // gets reference to canvas context
        ctx.beginPath();    // clear existing drawing paths
@@ -200,32 +202,33 @@
       var pdflist = "";
       var pdfChange = "";
       var f = 0;
-      pdflist += '<div class="column" style="position: static;  width: 212px; height: 10px; display: block; vertical-align: baseline; float: left;">';
+      pdflist += '<div id="pdfPreview" class="column">';
      // pdflist += '<img id="pdfimage"  src="' + pdf_customizer + '/fileentry/getImage/' + json[0].folder + '/' + json[0].example + '" width="300px">';
-      pdflist += '<canvas id="Canvas" width="252px" height="504px" style=" margin-top:60px; border-style: solid; background-image: url(' + pdf_customizer + '/fileentry/getImage/' + json[0].folder + '/' + json[0].example + '); background-size:252px 504px;"></div>';
-      pdfChange += '<form id="changes" name="changes" enctype="multipart/form-data" action="#"  METHOD="POST"><h4>' + json[0].name + '</h4>';
+      pdflist += '<canvas id="Canvas" width="252px" height="504px" style=" margin-top:60px; border-style: solid;  border-width:1px; background-image: url(' + pdf_customizer + '/fileentry/getImage/' + json[0].folder + '/' + json[0].example + '); background-size:252px 504px;"></div>';
+      pdfChange += '<form id="changes" name="changes" enctype="multipart/form-data" action=""  METHOD="POST"><h4>' + json[0].name + '</h4>';
       pdfChange += '<input type="hidden" id="id" name="id" value="' + json[0].idPDF + '">';
       for (i = 0; i < json.length; ++i) {
         var example = json[0].folder + '/' +json[i].example 
 
           if (json[i].change_type == "textflow") {
-              pdfChange +=   json[i].names + ': <textarea onfocus="ShowBox('+json[0].pheight+','+json[0].pwidth+','+ json[i].locationUp+','+json[i].locationRight+','+json[i].height+','+json[i].width +  ',\''+ example + '\')"  title="' + json[i].names + '" id="changescontent'+[f]+'" class="textarea" value="' + json[i].content + '" name="content">' + json[i].content + '</textarea>';
+              pdfChange +=   json[i].names + ': <textarea onfocus="ShowBox('+json[0].pheight+','+json[0].pwidth+','+ json[i].locationUp+','+json[i].locationRight+','+json[i].height+','+json[i].width +','+ i + ',\''+ example + '\')"  title="' + json[i].names + '" id="changescontent'+[f]+'" class="textarea" value="' + json[i].content + '" name="content">' + json[i].content + '</textarea>';
               ++f
               }
           if (json[i].change_type == "text") {
-              pdfChange +=  json[i].names + ': <input onfocusout="HideBox()"  onfocus="ShowBox('+json[0].pheight+','+json[0].pwidth+','+ json[i].locationUp+','+json[i].locationRight+','+json[i].height+','+json[i].width +',\''+ example + '\')" title="' + json[i].names + '" id="changescontent" type="text" name="content" value="' + json[i].content + '"">';
+              pdfChange +=  json[i].names + ': <input onfocusout="HideBox()"  onfocus="ShowBox('+json[0].pheight+','+json[0].pwidth+','+ json[i].locationUp+','+json[i].locationRight+','+json[i].height+','+json[i].width +','+ i + ',\''+ example + '\')" title="' + json[i].names + '" id="changescontent" type="text" name="content" value="' + json[i].content + '"">';
               }
           if (json[i].change_type == "img") {
-                  pdfChange +=  json[i].names + ': <input onfocusout="HideBox()"  onfocus="ShowBox('+json[0].pheight+','+json[0].pwidth+','+ json[i].locationUp+','+json[i].locationRight+','+json[i].height+','+json[i].width + ',\''+ example + '\')"  title="' + json[i].names + '" class="fileupload"   id="changescontent"   style="display: block; box-sizing: border-box; width: 100%; height: 2.4375rem; padding: .5rem; border: 1px solid #cacaca; margin: 0 0 1rem; font-family: inherit; font-size: 1rem; color: #8a8a8a; background-color: #fefefe; box-shadow: inset 0 1px 2px rgba(10,10,10,.1); border-radius: 0; transition: box-shadow .5s,border-color .25s ease-in-out; -webkit-appearance: none; -moz-appearance: none;" type="file" name="content"  >';
+                  pdfChange +=  json[i].names + ': <input onfocusout="HideBox()"  onfocus="ShowBox('+json[0].pheight+','+json[0].pwidth+','+ json[i].locationUp+','+json[i].locationRight+','+json[i].height+','+json[i].width +','+ i + ',\''+ example + '\')"  title="' + json[i].names + '" class="fileupload"   id="changescontent"   style="display: block; box-sizing: border-box; width: 100%; height: 2.4375rem; padding: .5rem; border: 1px solid #cacaca; margin: 0 0 1rem; font-family: inherit; font-size: 1rem; color: #8a8a8a; background-color: #fefefe; box-shadow: inset 0 1px 2px rgba(10,10,10,.1); border-radius: 0; transition: box-shadow .5s,border-color .25s ease-in-out; -webkit-appearance: none; -moz-appearance: none;" type="file" name="content"  >';
               }
+                pdfChange += '<span id="span'+i+'">'+json[i].tips+'</span><br/>';
         }
           pdfChange += '<input  type="submit"  value="Submit">';
           pdfChange += '</form>';
 
           strVar2 += ' <div class="callout primary"><div class="row column"><h1>Welcome to Synapsus Online PDF Editor</h1>';
           strVar2 += '<p class="lead">Please make your changes or return <a href="#" onclick="location.reload();">back to the list</a></p>';
-          strVar2 += ' </div></div><div class="row small-up-2 medium-up-3 large-up-3">';
-          strVar2 += pdflist + '<div class="column" style="margin-left:300px; width:300px;">' + pdfChange + '</div></div><div style="height: 200px; margin-top: 50px;padding: 10px;position: relative;"></div>';
+          strVar2 += ' </div></div><div id="wrapper" class="row small-up-2 medium-up-3 large-up-3">';
+          strVar2 += pdflist + '<div id="changesColumn" class="column" >' + pdfChange + '</div><div id="pdfFooter"></div></div>';
 
 
 
@@ -235,11 +238,40 @@
           jQuery(function($) {
 
             
+var stickySidebar = $('#pdfPreview');
+
+if (stickySidebar.length > 0) { 
+  var stickyHeight = stickySidebar.height(),
+      sidebarTop = stickySidebar.offset().top;
+}
 
-             $("#Canvas").stick_in_parent();
+// on scroll move the sidebar
+$(window).scroll(function () {
+  if (stickySidebar.length > 0) { 
+    var scrollTop = $(window).scrollTop();
             
+    if (sidebarTop < scrollTop) {
+      stickySidebar.css('top', scrollTop - sidebarTop);
 
+      // stop the sticky sidebar at the footer to avoid overlapping
+      var sidebarBottom = stickySidebar.offset().top + stickyHeight,
+          stickyStop = $('#changesColumn').offset().top + $('#changesColumn').height();
+      if (stickyStop < sidebarBottom) {
+        var stopPosition = $('#changesColumn').height() - stickyHeight;
+        stickySidebar.css('top', stopPosition);
+      }
+    }
+    else {
+      stickySidebar.css('top', '0');
+    } 
+  }
+});
 
+$(window).resize(function () {
+  if (stickySidebar.length > 0) { 
+    stickyHeight = stickySidebar.height();
+  }
+});
             
 
 
@@ -285,7 +317,7 @@
 
                       if (el.id)
                           document.getElementById(el.id).value = el.getContent();
-                        console.log(el.id);
+                        ///console.log(el.id);
                       tinymce.get(el.id).remove();