// JavaScript Document

function importData(fileName) {
   var AJAX = null;                                               // Initialize the AJAX variable.
   if (window.XMLHttpRequest) {                                   // Are we working with mozilla?
      AJAX=new XMLHttpRequest();                                  //  Yes -- this is mozilla.
   } else {                                                       // Not Mozilla, must be IE
      AJAX=new ActiveXObject("Microsoft.XMLHTTP");                //  Wheee, ActiveX, how do we format c: again?
   }                                                              // End setup Ajax.
   if (AJAX==null) {                                              // If we couldn't initialize Ajax...
      alert("Your browser doesn't support AJAX.");                // Sorry msg.                                         
      return false                                                // Return false (WARNING - SAME AS ALREADY PROCESSING!)
   } else {
      AJAX.onreadystatechange = function() {                      // When the browser has the request info..
         if (AJAX.readyState==4 || AJAX.readyState=="complete") { //   see if the complete flag is set.
            processData(AJAX.responseText);
         }                                                        // End Ajax readystate check.
      }                                                           // End create post-process fucntion block.
      AJAX.open("GET", fileName, true);                           // Open the url 
      AJAX.send(null);                                            // Send the request.
      return true;                                                // Everything went a-ok.
   }                                                              // End Ajax setup aok if/else block                 
}
   
function processData (dat) {
   // we'll process the data here.
}   

var _allImages = new Array();                           // Holds all of the image data from server
var _filmstrip = document.getElementById('filmstrip');  // Our filmstrip layer
var _filmWidth = 0;                                     // Width of filmstrip in pixels.

function processData (dat) {
   allImages = dat.split('``');                         // Explode the server image data into array elements
   var ktr=0;                                           // Initialize our counter
   _filmstrip.innerHTML='';                             // Initialize our filmstrip
   _filmWidth=0;                                        // Initiaize the film width.
   var tmp = '';                                        // Temp variable to hold our HTML as we build it.
   while ((ktr<allImages.length)&&(allImages[ktr].indexOf('EOF*EOF')<0)) { // For each record in allImages.
      record = allImages[ktr].split('~|~');             // Explode record into individual fields.
      // The next line builds our HTML in a variable, this is faster than doing X innerHTML insertions.
      tmp+='<img src="'+record[1]+'_s.jpg" class="thumbnail">';
      _filmWidth+=80;                                   // Increment our filmstrip Width counter.
      ktr++;                                            // Increment our counter
   }                                                    // End WHILE loop
   _filmstrip.innerHTML=tmp;                            // Insert tmp into our filmstrip layer.
}


 var _landingZone= document.getElementById('landingZone');       // Table which creates the filmstrip bondary
   var _topOffset = 0;                                             // Y position of the table in the web page
   var _leftOffset = 0;                                            // X position of the table in the web page.
   var _totalOffset = 0;                                           // Current X offset of the filmstrip.
                        
   function findPos(obj) {
      // Credit for this function: http://www.quirksmode.org/js/findpos.html
      // Visit the URL for a complete tutorial on this function
      var curleft = curtop = 0;
      if (obj.offsetParent) {
         curleft = obj.offsetLeft
         curtop = obj.offsetTop
         curwidth = obj.offsetWidth;
         while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
         }
      }
      return [curleft,curtop,curwidth];
   }

   function bindStrip() {
      // moves filmstrip into the landingZone table.
      ofs=findPos(_landingZone);                                      // Find the left/top & width of table
      _filmstrip.style.top=ofs[1]+'px';                               // Set filmstrip's top location
      _filmstrip.style.left=ofs[0]+'px';                              // Set filmstrip's left location
      _topOffset = ofs[1];                                            // Remember top offset globally
      _leftOffset= ofs[0];                                            // Remember the left offset globally
      // The next line crops the filmstrip and shows only a small section of it
      _filmstrip.style.clip='rect(0px,'+(_landingZone.offsetWidth+_totalOffset)+'px,80px,'+_totalOffset+'px)';
      _filmstrip.style.left=(_leftOffset-_totalOffset)+'px';          // set the left offset of the filmstrip
   }

   bindStrip();
   
  var _totalChange = 0;                                          // Total pixels moved/changed
var _savedTarget = null;                                       // Target object of drag event
var _orgCursor = null;                                         // Original cursor Style
var _dragXOffset = 0;                                          // X offset of the move event
var _dragYOffset = 0;                                          // Y offset of the move event
var _scrollOK = false;                                         // True if we can scroll filmstrip
var _originalOffset=0;                                         // Original offset (before drag event)
   
// Begin Drag/Scroll Handlers

function scrollHandler(e) {
   // This function handles the draging of the filmstrip from left to right
   if (e == null) { e = window.event; }                        // Get event data
   _totalChange=(_dragXoffset-e.clientX);                      // Calculate total movement
   if (e.button<=1&&_scrollOK){                                // Is mouse down and scroll enabled?
      _totalOffset=_originalOffset+(_dragXoffset-e.clientX);   // Find the distance mouse has moved
      if ((_totalOffset) < 0) {                                // Are we scrolling too far left?
         _totalOffset=0;                                       // Yes, set the offset to 0
         _originalOffset=0;                                    // and the original
         _dragXoffset=e.clientX;                               // and reset the mouse.
         _totalChange=20;                                      // Simulate a move so we don't open a pic.
      }
      if ((_totalOffset+_landingZone.offsetWidth)>=(_filmWidth-5)) { // Are we too far right?
         _totalOffset=(_filmWidth-_landingZone.offsetWidth-5);   // Yes, set offset to max
         _originalOffset=(_filmWidth-_landingZone.offsetWidth-5);// and the original
         _dragXoffset=e.clientX;                                 // reset the mouse
         _totalChange=20;                                      // Simulate a move so we don't open a pic.
      }
      // Set the visible clip here.
      _filmstrip.style.clip='rect(0px,'+(_landingZone.offsetWidth+_totalOffset)+'px,80px,'+_totalOffset+'px)';
      // And set the left offset
      _filmstrip.style.left=(_leftOffset-_totalOffset)+'px';
      // return false so the browser won't try to do it's events!
      return false;
   }
}

function cleanup(e) {
   // called when user releases a mouse button after a drag event
   _scrollOK = false;                                    // Setting this to false disables scrollHandler
   _savedTarget.style.cursor=_orgCursor;                 // Change back to the original cursor shape
   document.onmousemove=null;                            // Disable the mousemove handler
   document.onmouseup=null;                              // Disable the mouseup handler
}

function dragHandler(e) {
   _totalChange=0;                                            // Total pixels moved
   var cursorType='-moz-grabbing';                            // Set hand to "grab"
   if (e == null) { e = window.event; cursorType='w-resize';} // Package event for IE
   var target = e.target != null ? e.target : e.srcElement;   // Get the target object
   //Handle filmstrip
   if (target.className=="filmstrip"||target.className=="thumbnail") { // Check if event over filmstrip
      _savedTarget=target;                                    // This is our target object
      _orgCursor=target.style.cursor;                         // This was our orginal cursor
      _originalOffset=_totalOffset;                           // Mark the current offset
      target.style.cursor=cursorType;                         // Set mouse to grab if possible
      _scrollOK=true;                                         // flag filmstrip as scrollable
      _dragXoffset=e.clientX;                                 // remember original X position
      document.onmousemove=scrollHandler;                     // set up a mouse-move handler
      document.onmouseup=cleanup;                             // set up a button-up handler
      return false;                                           // return FALSE -- IMPORTANT!!!!
   }
}
// End drag/scroll Handlers

document.onmousedown = dragHandler;                            // Call dragHandler on mouse down