var thumbNum = 12;
var showNum = 4;
var curLeft = 0;
function getRanges() {
	var end = curLeft + showNum - 1; //calculate the image position at the end of the display
	
	var iva = new Array();	//create arrays for the in and out of range elements
	var ova = new Array();
	
	//get all of the <li> tags inside our imagrow
	var litags = document.getElementById("imagerow").getElementsByTagName("li");
	
	// loop through and add them to iva or ova if they 
	// are in or out, respectively, of our desired range
	for (var i = 0; i < litags.length; i++) {
		if ((i < curLeft) || (i > end)) 
			ova.push(litags[i]);
		else 
			iva.push(litags[i]);
	}
	return { in: iva, out: ova };
}

function onLoad() {
	if (document.addEventListener) {
			document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
			document.getElementById('strip').addEventListener('DOMMouseScroll',HandleWheel,false);
			document.getElementById('larrow').addEventListener('click',moveLeft,false);
			document.getElementById('rarrow').addEventListener('click',moveRight,false);
			setLeft();
	} else {
			document.getElementById('strip').onkeypress = HandleKeyPress;
			document.getElementById('strip').onmousewheel = HandleWheel;
			document.getElementById('larrow').onclick = moveLeft;
			document.getElementById('rarrow').onclick = moveRight;
			setLeft();
	}
}

function HandleKeyPress(e) {
	switch (e.keyCode) {

		case e.DOM_VK_LEFT:
			moveLeft();
			break;
		case e.DOM_VK_RIGHT:
			moveRight();
			break;
		case e.DOM_VK_ESCAPE:
			content.focus();
			return;
	}
}

/** Event handler for mouse wheel event.
 * originally from http://adomas.org/javascript-mouse-wheel/
 */
 function handle(delta) {
        if (delta < 0)
		moveRight();
        else
		moveLeft();
}

function HandleWheel(event){
        var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
                /** In Opera 9, delta differs in sign as compared to IE.
                 */
                if (window.opera)
                        delta = -delta;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta)
                handle(delta);
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}


function setLeft(){
	var rng = getRanges();
	for (var i = 0; i < rng.out.length; i++ ) {
		rng.out[i].setAttribute("style","display:none;");
		rng.out[i].style.display = "none";
	}
	for (var i = 0; i< rng.in.length; i++ ) {
		rng.in[i].setAttribute("style","display:inline;");
		rng.in[i].style.display = "inline";
	}
}

function moveLeft(){
  if (curLeft == 0) return; //already at the left
  else {
    curLeft = curLeft - 1;
    setLeft();
  }
}

function moveRight() {
  if (curLeft==thumbNum-showNum) return; //already at the right
  else {
    curLeft = curLeft + 1;
    setLeft();
  }
}