////////////////////////////////////////////////////////////////////////////////
// Declare global variables
////////////////////////////////////////////////////////////////////////////////
var _allImages = new Array(); // Holds all of the image data from server
var _filmstrip = document.getElementById('filmstrip'); // Our filmstrip layer
var _landingZone= document.getElementById('landingZone'); // Table which creates the filmstrip bondary
var _detail = document.getElementById('detailFrame'); // Detail layer.
var _filmWidth = 0; // Width in pixels of our filmstrip
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 _totalOffset=0; // offset position of the filmstrip
var _originalOffset=0; // Offset of strip before we started moving it.
var _leftOffset=0; // The left location of the landingZone table
var _currentPic = 0; // Index of current Picture
var _dragOK=false; // True when we can move the detail window
var _topOffset=0; // The top position of the landingZone table.
var _autoscroll=0; // Holding the mouse on the left or right edge of the panel will autoscroll it
////////////////////////////////////////////////////////////////////////////////
// These are the AJAX routines to get data from the server.
////////////////////////////////////////////////////////////////////////////////
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
}
var imageExtension=''
var thumbWidth=74;
var thumbWidthWide=108;
var pad=10;
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.
if(record[4]=='pad'){
imageClass = 'galleryPad'
loop_filmWidth = pad;
}
if(record[4]=='wide'){
imageClass = 'thumbnailWide'
loop_filmWidth = thumbWidthWide;
}
else{
imageClass = 'thumbnail';
loop_filmWidth = thumbWidth;
}
//console.debug(ktr+' - '+imageClass+' '+record)
tmp+='
';
_filmWidth+=loop_filmWidth; // Increment our filmstrip Width counter.
ktr++; // Increment our counter
} // End WHILE loop
_filmstrip.innerHTML=tmp; // Insert tmp into our filmstrip layer.
_totalOffset=0; // Reset filmstrip to start at beginning.
bindStrip(); // rebind the strip to the landingzone.
}
////////////////////////////////////////////////////////////////////////////////
// End AJAX routines.
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// These functions help anchor the filmstrip to the landingZone table
////////////////////////////////////////////////////////////////////////////////
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() {
_landingZone.innerHTML = '';
// _landingZone.style.width = '760px';
// _landingZone.style.height = '110px';
// 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,113px,'+_totalOffset+'px)';
_filmstrip.style.left=(_leftOffset-_totalOffset)+'px'; // set the left offset of the filmstrip
document.onmousemove=mouseTrack;
autoscroll();
}
////////////////////////////////////////////////////////////////////////////////
// End filmstrip anchor functions.
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// 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,113px,'+_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 autoscroll(e){
if(_autoscroll==1)_originalOffset+=2;
else if(_autoscroll==2)_originalOffset-=2;
else{setTimeout('autoscroll()',33);return false;}
_totalOffset= _originalOffset; // 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=_leftScroll; // 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=_rightScroll; // 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,113px,'+_totalOffset+'px)';
// And set the left offset
_filmstrip.style.left=(_leftOffset-_totalOffset)+'px';
setTimeout('autoscroll()',33);
// return false so the browser won't try to do it's events!
return false;
}
var _mousex;
var _mousey;
var _leftScroll = _landingZone.offsetLeft +10;
var _rightScroll = ( _landingZone.offsetLeft + _landingZone.offsetWidth)-10;
function mouseTrack(e){
if (e == null) { e = window.event; }
//debug = document.getElementById('comments');
//mozilla and others
//can use window.pageXOffset and window.pageYOffset
_windowX = window.pageXOffset;
_windowY = window.pageYOffset;
if(isNaN(_windowX)){
//IE
_windowX = document.documentElement.scrollLeft;
_windowY = document.documentElement.scrollTop
}
if(isNaN(_windowX)){
//Othersincluding IE6 in strict mode
_windowX = document.body.scrollLeft;
_windowY = document.body.scrollTop
}
_mousex = e.clientX + _windowX;
_mousey = e.clientY + _windowY;
//debug.innerHTML += "Window Scroll: window is"+_windowX +', '+ _windowY +"
";
//debug = document.getElementById('comments');
//debug.innerHTML += "Autoscroll: mouse is"+window.scrollX +', '+ window.scrollY +"
";
//console.debug("Autoscroll: mouse is"+_mousex +', '+ _mousey );
//console.debug("Autoscroll: filmstrip topleft is"+_leftOffset+', '+ _topOffset );
filmstripRight = _leftOffset + _landingZone.offsetWidth + 100;
filmstripBottom = _topOffset + _landingZone.offsetHeight;
//console.debug("Autoscroll: filmstrip bottomright is"+filmstripBottom+', '+ filmstripRight );
$boundsWidth = (_mousex > _leftOffset && _mousex < filmstripRight) ? true : false;
$boundsHeight = (_mousey > _topOffset && _mousey < filmstripBottom) ? true : false;
if($boundsWidth && $boundsHeight){
if(_mousex < _leftScroll){ _autoscroll=2;}
else if(_mousex > _rightScroll){ _autoscroll=1;}
else _autoscroll = 0;
//console.debug(_autoscroll);
}
}
function cleanup(e) {
// called when user releases a mouse button after a drag event
_scrollOK = false; // Setting this to false disables scrollHandler
_dragOK = false; // This disables the move handler (detail window)
_savedTarget.style.cursor=_orgCursor; // Change back to the original cursor shape
document.onmousemove=mouseTrack; // Disable the mousemove handler
document.onmouseup=null; // Disable the mouseup handler
_originalOffset = _totalOffset;
}
function moveHandler(e){ // Called on mousemove when detail layer is dragable
if (e == null) { e = window.event; } // Get the event data
if (e.button<=1&&_dragOK){ // Make sure mouse button is down and ok to drag
_savedTarget.style.left=e.clientX-_dragXoffset+'px'; // Move to the new left offset
_savedTarget.style.top=e.clientY-_dragYoffset+'px'; // Move to the new top offset.
return false; // Return false so browser doesn't do its own thing
} // End button/dragOK check
}
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"||target.className=="thumbnailWide") { // 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!!!!
} else {
//Handle detail window
if (target.className.indexOf('detail')>=0) {
return false;
// Check to see if we're over a datail layer
_savedTarget=document.getElementById('detailFrame'); // This is our target object
_orgCursor=target.style.cursor; // This was our orginal cursor
target.style.cursor=cursorType; // Set mouse to grab if possible
_dragOK=true; // flag filmstrip as scrollable
_dragXoffset=e.clientX-parseInt(_savedTarget.style.left); // Remember original X position
_dragYoffset=e.clientY-parseInt(_savedTarget.style.top); // Remember original Y position
document.onmousemove=moveHandler; // set up a mouse-move handler
document.onmouseup=cleanup; // set up a button-up handler
return false; // return FALSE -- IMPORTANT!!!!!!!
}
}
}
////////////////////////////////////////////////////////////////////////////////
// End drag/scroll Handlers
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// These functions support the detail Window
////////////////////////////////////////////////////////////////////////////////
function showPic(idx) {
if ((_totalChange<-5)||(_totalChange>5)) { return false } // User scrolled, not a click event so return.
detail=document.getElementById('detailFrame'); // get the detail window
detailComments=document.getElementById('comments'); // get the comments window
detailImg=document.getElementById('detailPic'); // get the picture window
if (idx==null) {idx=_currentPic} // set idx if nothing was passed.
if ((detail.style.display=='block')&&(idx==_currentPic)) { // If the detail window is visible
return; //Dont hide the detail
detail.style.display='none'; // Make it invisible
detailImg.innerHTML=''; // Clear out last picture
detailComments.innerHTML=''; // Clear out last comments
} else { // Detail Window is not visible
var record = _allImages[idx].split('~|~'); // Get the image record
detailImg.innerHTML='
'; // Insert the pic
detailComments.innerHTML=record[3]; // Insert the comments
detail.style.display='block'; // Make the detail window visible
_currentPic=idx; // Remember the current picture.
}
}
function flickrGo() {
var record = _allImages[_currentPic].split('~|~'); // Get the image record
document.location.href=record[2]; // Navigate to the photo's web page on flickr.
}
function flickrZoom() {
var record = _allImages[_currentPic].split('~|~'); // Get the image record
document.location.href=record[1]+imageExtension; // Navigate to the original resolution picture on flickr
}
////////////////////////////////////////////////////////////////////////////////
// End detail window functions
////////////////////////////////////////////////////////////////////////////////