// JavaScript Document
Event.observe(window, 'load', setupPage, false);

function setupPage() {
	// Create accordian
	$$('#thumbstripslider a').each( function (elm) { Event.observe(elm, 'click', showPic); });
	//attachNextPrev();
	Event.observe($('leftlink'), 'click', scrollThumbStripRight);
	Event.observe($('rightlink'), 'click', scrollThumbStripLeft);
	document.observe('keydown', keyboardAction);
}

function keyboardAction(event) {
	var key = String.fromCharCode(event.keyCode).toLowerCase();
	

	if (key.match(/x|c/) || (event.keyCode == Event.KEY_ESC) || (event.keyCode == Event.KEY_UP)){ // close album, show index
		document.stopObserving('keydown', keyboardAction);
		window.location = '/gallery';
	} else if ((key == 'p') || (event.keyCode == Event.KEY_LEFT)){ // display previous image
		if ($('leftthumb')){
			// Prev Image
			nextPrevShow($('leftthumb').up('a'));
			document.stopObserving('keydown', keyboardAction);
			
		}
	} else if ((key == 'n') || (event.keyCode == Event.KEY_RIGHT)){ // display next image
		if ($('rightthumb')){
			// Prev Image
			nextPrevShow($('rightthumb').up('a'));
			document.stopObserving('keydown', keyboardAction);
			
		}
	} else if (key == 'i'){ // display thumbstip index
		toggleThumbStrip();
	}
}

function attachNextPrev() {
	// attach on click listeners to next and previous nav links
	if ($('leftthumb')) {
		Event.observe($('leftthumb').up('a'), 'click', nextPrevClick);
	}
	if ($('rightthumb')) {
		Event.observe($('rightthumb').up('a'), 'click', nextPrevClick);
	}
}

function nextPrevClick(e) {
	// Next or previous thumbnail has been clicked
	var elmClicked = Event.findElement(e,'a'); //get element
	// find matching URL in slider
	nextPrevShow(elmClicked);
	Event.stop(e); // stop event to disable link being followed		
}

function nextPrevShow(elmClicked) {
	var elmMatched = false;
	$$('#thumbstripslider a').each( function(m) { if (elmClicked.href == m.href) elmMatched = m; } );
	if (elmMatched) {
		// If we've got a match and we should always
		$('mainimage').elmMatched = elmMatched;
		new Effect.Fade('mainimage',{to:.2,duration:.3,
						afterFinish: function (obj) {
											updateStageElements(obj.element.elmMatched);
											obj.element.elmMatched = false;
											document.observe('keydown', keyboardAction);
									 }
									 });
	}
}

function showPic(e) {
	// thumbnail has been clicked show pic
	var elm = Event.findElement(e,'a'); //get element
	updateStageElements(elm);
	Event.stop(e); // stop event to disable link being followed
}

function updateStageElements(elm) {
	// Update stage elements
	var prevElm = elm.previous();
	var nextElm = elm.next();
	var mainpic = $('mainimage');

	$('loading').show();
	//hideGalleryStage();
	if ($('leftpane')) {
		if (prevElm) {
			// prev thumb so update main stage
			$('leftpane').update('');
			$('leftpane').appendChild(cloneThumbLink(prevElm,'leftthumb'));
		} else {
			// otherwise clear it
			$('leftpane').update(' ');
		}
	}
	if ($('rightpane')) {
		if (nextElm) {
			// next thumb so update main stage
			$('rightpane').update('');
			$('rightpane').appendChild(cloneThumbLink(nextElm,'rightthumb'));
		} else {
			// otherwise clear it
			$('rightpane').update(' ');
		}
	}
	attachNextPrev(); // re-attach next/previous events

	var preload = new Image();
	preload.onload = function(e) {
		$('mainimage').src = this.src;
		// update viewed count for image
		new Ajax.Request('/_gallery_ajax.php', { method: 'post', parameters: { filename: this.src } } );
		// Start resize from last image to current image widthxheight
		resizeImage('mainimage',this.width,this.height,5,
					function() {
						$('loading').hide();
					});
	};
	var thumbSrc = elm.down('img').src;
	var StandardSrc = thumbSrc.sub("thumb","standard");
	preload.src = StandardSrc;
}

function cloneThumbLink(elm,id) {
	// clone link with with enclosed thumb
	a = elm.cloneNode(true);
	Event.stopObserving(a,'click',showPic); // clear click handler applied in thumbstrip
	a.down('img').id = id;
	return a;
}


function pause(numberMillis) {
	//
	// pause(numberMillis)
	// Pauses code execution for specified time. Uses busy code, not good.
	// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
	//
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
			return;
	}
}

function scrollThumbStripLeft(e) {
	// scroll thumbs one set left
	// bringing elements hidden out to the right into view
	startChunkSlide(-1);
}

function scrollThumbStripRight(e) {
	// scroll thumbs one set right
	// bringing elements hidden out to the left into view
	startChunkSlide(1);
}

function startChunkSlide(dir) {
	// slide thumbs one set dir -1 = left, 1 = right
	var thumbstrip = $('thumbstrip');
	var thumbstripslider = $('thumbstripslider');
	var speed = 120;
	if (thumbstrip.getWidth() <= thumbstripslider.getWidth()) {
		// slider is bigger than thumbstrip container so consider a slide
		var xpos = 0;
		if (thumbstripslider.style.left) {
			var xpos = parseInt(thumbstripslider.style.left);
		} else {
			thumbstripslider.style.left = '0px';
		}
		if (dir == -1) {
			var xoffset = ((xpos - thumbstrip.getWidth()) >= (0-thumbstripslider.getWidth()+thumbstrip.getWidth())) ? xpos - thumbstrip.getWidth() : 0-thumbstripslider.getWidth()+thumbstrip.getWidth();
			moveElement('thumbstripslider',xoffset,0,speed);
		} else {
			var xoffset = ((xpos + thumbstrip.getWidth()) <= 0) ? xpos + thumbstrip.getWidth() : 0;
			moveElement('thumbstripslider',xoffset,0,speed);
		}
	}
}

function toggleThumbStrip(e) {
	// show hide the thumbstrip
	if($('thumbstrip').visible()) {
		// thumb strip is visible so hide it
		//new Effect.Fade('thumbstrip',{duration:.5});
		showGalleryStage();
	} else {
		// thumb strip is invisible so jump to current pic and show thumb strip
		var thumbstrip = $('thumbstrip');
		var thumbstripslider = $('thumbstripslider');
		if (thumbstrip.getWidth() <= parseInt(thumbstripslider.style.width)) {
			// slider is bigger than thumbstrip container so consider a move
			var MainSrc = $('mainimage').src;
			var thumbSrc = MainSrc.sub("standard","thumb");
			var elmMatched = false;
			var elmPos = false;
			var thumbs = 0;
			$$('#thumbstripslider img').each( function(m) { if (thumbSrc == m.src) {elmMatched = m; elmPos = thumbs; }; thumbs++; } );
			if (elmMatched) {
				// found thumb that matches main image currently shown
				var thumbLeft = (parseInt(thumbstripslider.style.width)/thumbs) * elmPos;
				var newLeft = (thumbLeft > (parseInt(thumbstripslider.style.width) - thumbstrip.getWidth())) ? (parseInt(thumbstripslider.style.width) - thumbstrip.getWidth()) : thumbLeft;
				thumbstripslider.style.left = "-" + newLeft + "px";	// place thumbnail on left
			}
		}
		new Effect.Appear('thumbstrip',{to:1,duration:.5});
		hideGalleryStage();
	}
	if (e) Event.stop(e); // stop event to disable link being followed
}

function hideGalleryStage() {
	// fade down left and right thumbs, plus main image
	var leftthumb = $('leftthumb');
	var rightthumb = $('rightthumb');
	if (leftthumb) new Effect.Fade('leftthumb',{duration:.5});
	if (rightthumb) new Effect.Fade('rightthumb',{duration:.5});
	new Effect.Fade('mainimage',{to:.2,duration:.3});
}

function showGalleryStage() {
	// fade up left and right thumbs, plus main image
	var leftthumb = $('leftthumb');
	var rightthumb = $('rightthumb');
	if (leftthumb) new Effect.Appear('leftthumb',{duration:.5});
	if (rightthumb) new Effect.Appear('rightthumb',{duration:.5});
	new Effect.Appear('mainimage',{duration:.3}); // place effect at end to stop main image flashing
}

function resizeImage(elementID,final_width,final_height,interval,afterFinish) {
  // resize image from current width and height to final_width x final_height
  var elem = $(elementID);
  var steps = 4;
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.width) {
    elem.width = 0;
  }
  if (!elem.height) {
    elem.height = 0;
  }
  if (afterFinish) {
	  elem.afterFinish = afterFinish
  }

  if (elem.width == final_width && elem.height == final_height) {
	if (elem.afterFinish) elem.afterFinish();
    return true;
  }
  if (elem.width < final_width) {
    var dist = Math.ceil((final_width - elem.width)/steps);
    elem.width = elem.width + dist;
  }
  if (elem.width > final_width) {
    var dist = Math.ceil((elem.width - final_width)/steps);
    elem.width = elem.width - dist;
  }
  if (elem.height < final_height) {
    var dist = Math.ceil((final_height - elem.height)/steps);
    elem.height = elem.height + dist;
  }
  if (elem.height > final_height) {
    var dist = Math.ceil((elem.height - final_height)/steps);
    elem.height = elem.height - dist;
  }
  var repeat = "resizeImage('"+elementID+"',"+final_width+","+final_height+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}

function moveElement(elementID,final_x,final_y,interval) {
  var elem = $(elementID);
  var steps = 2;
  var distLimit = 2000;	// set high so has no effect
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/steps);
	if (dist > distLimit) dist = distLimit;
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/steps);
	if (dist > distLimit) dist = distLimit;
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/steps);
	if (dist > distLimit) dist = distLimit;
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/steps);
	if (dist > distLimit) dist = distLimit;
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}