/***********************************************************************
 *                                                                     *
 * JavaScript image Clipnail scroller                                 *
 *                                                                     *
 * Copyright 2002 Greg Dykema. All Rights Reserved.                    *
 * If you would like to use this script, please contact                *
 * sales@wellspringdata.com for licensing information.                 *
 *                                                                     *
 * This script horizontally scrolls a row of Clipnail images.         *
 *                                                                     *
 ***********************************************************************/


/***********************************************************************
 Instructions:

 1. Clipnails must be absolutely positioned at the top level of the
    document (e.g. not inside an enclosing DIV/layer). 

 2. Assign the ID's "thumb1", "thumb2", etc. to the thumbnails in
    left to right order. The script will stop looking for thumbnails
    when it sees a gap in the order, so make sure to use the ID's
    sequentially.

 3. Add the line
    <script language="JavaScript" src="../test/thumb_scroll.js" type="text/javascript"></script>
    to the HEAD section of the HTML page.

 4. Call wdThumbScroller() at the bottom of the page BODY. E.g.:

    wdThumbScroller(160, 70, 10, 150, 640, 6, 50, 24); 

    which initializes a scroller in which the first thumb appears at
    a left-coordinate of 160px, each thumb is 70px wide, there is a
    10px gap between thumbs, the left edge of the visible scrolling
    area is at 150px, the right edge of the scrolling area is at
    640px, there are up to six complete thumbs visible at any one
    time, the scroll interval is 50milliseconds, and there are at
    most 24 thumbs on this page.

    The parameters are as follows:

    wdThumbScroller(left, twidth, tspace, left_limit, right_limit, visible_count, scroll_speed, max_tnum)    

    left: the left coordinate of the left-most visible thumbnail in pixels
    twidth: width of each thumbnail in pixels
    tspace: spacing between thumbs in pixels
    left_limit: the leftmost coordinate at which a thumb should still
        be visible, in pixels
    right_limit: the rightmost coordinate at which a thumb should
        still be visible, in pixels
    visible_count: the number of complete thumbs visible at any one
        time
    scroll_speed: the delay in milliseconds before the thumbs will be
        moved each step during scrolling
    max_tnum: the maximum number of thumbnails the script will scan
        for

 5. Position obscuring graphics at least as wide as the thumbnails on
    either side of the scroll area. The graphic on the left should be
    positioned and sized such that its right edge abuts leftlimit and
    the similarly the graphic on the right should abut rightlimit to
    its left. These graphics must have a z-index at least one greater
    than the thumbs as they are used to obscure the thumbnails as they
    move in and out of the visible scroll area.

 6. Set up scrolling controls that execute the following code on
    activation:

    Left scroll:
    onMouseOver="wdThumbScroller.x_offset=5; wdThumbScroller.scroll();" onMouseOut="wdThumbScroller.x_offset=0;"

    Right scroll:
    onMouseOver="wdThumbScroller.x_offset=-5; wdThumbScroller.scroll();" onMouseOut="wdThumbScroller.x_offset=0;"

    These events can be attached to arrow graphics, for example. To
    require that the mouse be held down on the control for scrolling,
    use onMouseDown and onMouseUp instead of onMouseOver and
    onMouseOut.

    The x_offset value controls how far (in pixels) the images will
    advance for each scroll step. Smaller values will result in
    smoother (but slower) scrolling. Scroll speed is also affected by
    the scroll_speed parameter to wdThumbScroller. Setting this value
    smaller will speed up scrolling but will use more of the user's
    CPU.

 Notes:

 1. Works best if all thumbnails are the same width. If they are not,
    set twidth to the widest width and this spacing (plus tspace)
    will be used for all thumbs.

 2. Thumb left coordinate and visibility do not have to be
    explicitly set for each image as the script will set these values
    during initialization. z-index and top coordinates must be set,
    however.

 ***********************************************************************/


function wdClipScroller(left, twidth, tspace, left_limit, right_limit, visible_count, scroll_speed, max_tnum) {
    var t, e;
    
    wdClipScroller.top = top;
    wdClipScroller.left = left;
    wdClipScroller.twidth = twidth;
    wdClipScroller.theight = 70;
    wdClipScroller.tspace = tspace;
    wdClipScroller.left_limit = left_limit;
    wdClipScroller.right_limit = right_limit;
    wdClipScroller.visible_count = visible_count;
    wdClipScroller.x_offset = 0;
    wdClipScroller.scroll_speed = scroll_speed;
    wdClipScroller.leftmost = 1;
    wdClipScroller.rightmost = visible_count;
    wdClipScroller.clips = new Array;

    // Find thumb elements by ID
    wdClipScroller.tnum = max_tnum;
    for (t=1; t<=max_tnum; t++) {
        e = document.getElementById("clip"+t);
	if (e != null) {
	    wdClipScroller.clips[t] = {
		style: e.style,
		left: left + (t - 1) * (twidth + tspace)
	    }
	    if (t <= visible_count) {
		e.style.visibility = "visible";
		e.left = wdClipScroller.clips[t].left + "px";
	    }
	    else {
		e.style.visibility = "hidden";
	    }
	}
	else {
	    wdClipScroller.tnum = t - 1;
	    break;
	}
    }

}

wdClipScroller.scroll = function() {
    var min, t, left, stop;

    // check to see if we should stop!
    // Right limit check
    if (wdClipScroller.clips[wdClipScroller.tnum].left <= wdClipScroller.right_limit - wdClipScroller.tspace - wdClipScroller.twidth
	&& wdClipScroller.x_offset < 0) {
	return;
    }
    // Left limit check
    if (wdClipScroller.clips[1].left >= wdClipScroller.left_limit + wdClipScroller.tspace
	&& wdClipScroller.x_offset > 0) {
	return;
    }

    // move them doggies
    for (t=1; t<=wdClipScroller.tnum; t++) {
	left = wdClipScroller.clips[t].left + wdClipScroller.x_offset;
	if (left >= wdClipScroller.left_limit - wdClipScroller.twidth && left <= wdClipScroller.right_limit) {
	    wdClipScroller.clips[t].style.left = left + "px";
	}
	wdClipScroller.clips[t].left = left;
    }

    // do some left-moving checks
    if (wdClipScroller.x_offset < 0) {
	// check to see if the leftmost thumbnail should be disappeared
	if (wdClipScroller.clips[wdClipScroller.leftmost].left + wdClipScroller.twidth < wdClipScroller.left_limit) {
	    wdClipScroller.clips[wdClipScroller.leftmost].style.visibility = "hidden";
	    wdClipScroller.leftmost++;
	}
	// should the next Clip on the right be made visible?
	if (wdClipScroller.rightmost < wdClipScroller.tnum) {
	    if (wdClipScroller.clips[wdClipScroller.rightmost+1].left < wdClipScroller.right_limit) {
		wdClipScroller.clips[wdClipScroller.rightmost+1].style.visibility = "visible";
		wdClipScroller.rightmost++;
	    }
	}
	// check to see if we should stop!
	if (wdClipScroller.clips[wdClipScroller.tnum].left <= wdClipScroller.left_limit + wdClipScroller.tspace) {
	    wdClipScroller.x_offset = 0;
	}
    }
    // do some right-moving checks
    else {
	// should the rightmost Clipnail be disappeared?
	if (wdClipScroller.clips[wdClipScroller.rightmost].left >= wdClipScroller.right_limit) {
	    wdClipScroller.clips[wdClipScroller.rightmost].style.visibility = "hidden";
	    wdClipScroller.rightmost--;
	}
	// should the next Clip on the left be made visible?
	if (wdClipScroller.leftmost > 1) {
	    if (wdClipScroller.clips[wdClipScroller.leftmost-1].left + wdClipScroller.twidth > wdClipScroller.left_limit) {
		wdClipScroller.clips[wdClipScroller.leftmost-1].style.visibility = "visible";
		wdClipScroller.leftmost--;
	    }
	}
	// check to see if we should stop!
	if (wdClipScroller.clips[1].left + wdClipScroller.twidth + wdClipScroller.tspace >= wdClipScroller.right_limit) {
	    wdClipScroller.x_offset = 0;
	}
    }

    // left clipping (top right bottom left)
    if (wdClipScroller.clips[wdClipScroller.leftmost].left <= wdClipScroller.left_limit) {
	wdClipScroller.clips[wdClipScroller.leftmost].style.clip = "rect(0px " + wdClipScroller.twidth + "px " +
	      wdClipScroller.theight + "px " + (wdClipScroller.left_limit - wdClipScroller.clips[wdClipScroller.leftmost].left) + "px )";
    }
    
    // right clipping
    if (wdClipScroller.clips[wdClipScroller.rightmost].left + wdClipScroller.twidth >= wdClipScroller.right_limit) {
	wdClipScroller.clips[wdClipScroller.rightmost].style.clip = "rect(0px " + 
	    (wdClipScroller.right_limit - wdClipScroller.clips[wdClipScroller.rightmost].left) + "px " +
	    wdClipScroller.theight + "px 0px)";
    }

    if (wdClipScroller.x_offset != 0) {
        setTimeout("wdClipScroller.scroll()", wdClipScroller.scroll_speed);
    }

}