// slide.js: Showroom, slide mode

var Slide = function() {
	// configuration
	var VIEWPORT_WIDTH = 470;
	var THUMB_WIDTH = 94;
	var THUMBS_BUFFER = 2;

	// private variables & initialization
	var offset = (VIEWPORT_WIDTH - THUMB_WIDTH) / 2 - THUMBS_BUFFER * THUMB_WIDTH;
	var nSides = Math.ceil(VIEWPORT_WIDTH / (2 * THUMB_WIDTH) - 0.5) + THUMBS_BUFFER;
	var id = null;
	var keysEnabled = false;

	// private methods
	function syncNavigator() {
		if(!navigatorExists()) return;
		var container = document.getElementById('slide_navigator').children[0];
		for(var i = -nSides; i < nSides; i++) {
			var j = id + i;
			if(j + THUMBS_BUFFER < 0 || j + THUMBS_BUFFER >= container.children.length) continue;
			var element = container.children[j + THUMBS_BUFFER].children[0];
			var item = Showroom.getItem(j);
			if(typeof element != 'undefined' && element !== null &&
			   element.parentNode.className != 'blankNav' &&
			   (typeof element.style.backgroundImage == 'undefined' ||
			    element.style.backgroundImage == '' ||
			    element.style.backgroundImage === null)) {
				element.style.backgroundImage = 'url(photo.php?k=' + item.image + '&w=88&h=66)';
				element.setAttribute('title', item.title);
			}
		}
		container.style.left = (-offset - id * THUMB_WIDTH) + 'px';
	}

	function getIndex(element) {
		var i = element.parentNode.children.length;
		while(element.parentNode.children[--i] !== element && i >= 0);
		return i - THUMBS_BUFFER;
	}

	function handleNavClick(event) {
		var container = document.getElementById('slide_navigator').children[0];
		var target = Core.getEventTarget(event);
		if(target.tagName.toLowerCase() == 'span') target = target.parentNode;
		if(target.parentNode !== container) return;
		if(Core.hasClass(target, 'selected')) return;
		setCurrentImage(getIndex(target));
		syncNavigator();
		loadImage();
	}

	function handleLoad(event) {
		document.getElementById('slide_image').className = '';
	}

	function closeSlide() {
		Showroom.setMode('grid');
		Showroom.clearDescription();
	}

	function nextImage() {
		if(id + 1 >= Showroom.getNImages()) return;
		setCurrentImage(id + 1);
		syncNavigator();
		loadImage();
	}

	function prevImage() {
		if(id - 1< 0) return;
		setCurrentImage(id - 1);
		syncNavigator();
		loadImage();
	}

	function setCurrentImage(i) {
		var nImages = Showroom.getNImages();
		var container = document.getElementById('slide_navigator').children[0];
		if(id !== null) container.children[id + THUMBS_BUFFER].className = '';
		id = (i < 0) ? 0 : ((i < nImages) ? i : nImages - 1);
		document.getElementById('prev').className = (id > 0) ? '' : 'buttonHidden';
		document.getElementById('next').className = (id < nImages - 1) ? '' : 'buttonHidden';
		container.children[id + THUMBS_BUFFER].className = 'selected';
	}

	function loadImage(noUpdate) {
		if(typeof noUpdate == 'undefined') noUpdate = false;
		var imageContainer = document.getElementById('slide_image').children[0];
		imageContainer.parentNode.className = 'loading';
		imageContainer.innerHTML = '';
		var item = Showroom.getItem(id);
		Showroom.setProduct(id);
		Showroom.updateDescription(id);
		if(!noUpdate) Showroom.updateHash();
		var imageElement = document.createElement('img');
		imageElement.src = 'photo.php?k=' + item.image;
		imageContainer.appendChild(imageElement);
		if(imageElement.complete) {
			handleLoad();
		} else {
			Core.addEvent(imageElement, 'load', handleLoad, false);
		}
	}
	
	function clearImage() {
		var imageContainer = document.getElementById('slide_image').children[0];
		imageContainer.parentNode.className = '';
		imageContainer.innerHTML = '';
	}

	function openWithImage(i, noUpdate) {
		if(!navigatorExists()) createNavigator();
		setCurrentImage(i);
		syncNavigator();
		loadImage(noUpdate);
	}

	function createNavigator() {
		var nImages = Showroom.getNImages();
		deleteNavigator();
		var slideViewport = document.getElementById('slide_navigator');
		var container = document.createElement('div');
		container.style.width = (nImages + 2 * THUMBS_BUFFER) * THUMB_WIDTH + 'px';
		for(var i = -2; i < nImages + 2; i++) {
			var thumb = document.createElement('div');
			var thumbImage = document.createElement('span');
			if(i < 0 || i >= nImages) {
				thumb.className = 'blankNav';
			} else {
				Core.addEvent(thumb, 'click', handleNavClick, false);
			}
			thumb.appendChild(thumbImage);
			container.appendChild(thumb);
		}
		slideViewport.appendChild(container);
	}

	function deleteNavigator() {
		var slideViewport = document.getElementById('slide_navigator');
		while(slideViewport.firstChild !== null) slideViewport.removeChild(slideViewport.firstChild);
	}

	function navigatorExists() {
		var slideViewport = document.getElementById('slide_navigator');
		return (typeof slideViewport.children[0] != 'undefined');
	}

	function handleKeys(event) {
		if(!keysEnabled) return true;
		switch(event.keyCode) {
			case 27: Showroom.setMode('grid'); return false;
			case 37: prevImage(); return false;
			case 39: nextImage(); return false;
			default: return true;
		}
	}

	function refocus(event) {
		document.getElementById('keyCatcher').focus();
	}

	// public methods
	return {
		reset : function() {
			id = null;
			deleteNavigator();
			clearImage();
			Showroom.setProduct(null);
			Showroom.updateHash();
		},
		
		open : function(i, noUpdate) {
			openWithImage(i, noUpdate);
		},
		
		init : function() {
			Core.addEvent(document.getElementById('close'), 'click', closeSlide, false);
			Core.addEvent(document.getElementById('next'), 'click', nextImage, false);
			Core.addEvent(document.getElementById('prev'), 'click', prevImage, false);
//			Core.addEvent(document.getElementById('keyCatcher'), 'keypress', handleKeys, true);
//			Core.addEvent(document.getElementById('keyCatcher'), 'blur', refocus, true);
		}
	};
} ();

Core.initLibrary(Slide);