/**
 * EZ Gallery
 * Frontend
 *
 * (c) Timo Besenreuther
 *     EZdesign.de
 *
 * Created:  2008-01-31
 * Modified: 2008-01-31
 */


function EzGalleryFrontend(imgs, cfg) {
	var imgsPerPage = cfg.imgsPerPage;
	var thumbWidth  = cfg.thumbWidth;
	var thumbHeight = cfg.thumbHeight;
	var fadeLength  = 500;
	
	var imgs = imgs;
	var totalPages = Math.ceil(imgs.length/imgsPerPage);
	var container = $('#ezgallery');
	var thumbs;
	var currStart = 0;
	var innerWidth;
	var detail;
	var detailI = -1;
	
	cfg.lock = false;
	
	_initialize();
	
	
	/**
	 * initialize
	 * build html
	 * display first images
	 */
	
	function _initialize() {
		// inner width
		var cWidth = container.width();
		innerWidth = Math.floor(cWidth/(thumbWidth+10))*(thumbWidth+10);
		
		// controls
		container.append(_ce('div', {
			id: 'ezgallerycontrols'
		}).css({
			width: innerWidth+'px'
		})
		
		.append(_ce('a', {
			id: 'ezgalleryprev',
			href: '#'
		}).css({
			display: 'none'
		}).html('« zurück').click(function() {
			if (!cfg.lock)
				EzGallery.prev();
			return false;
		}))
		
		.append(_ce('a', {
			id: 'ezgallerynext',
			href: '#'
		}).css({
			display: (imgsPerPage < imgs.length ? 'block' : 'none')
		}).html('weiter &raquo;').click(function() {
			if (!cfg.lock)
				EzGallery.next();
			return false;
		}))
		
		.append(_ce('div', {
			id: 'ezgallerystatus'
		}))
		
		);
		
		_updateStatus();
		
		// thumbs
		thumbs = _ce('div', {
			className: 'ezgallerythumbs'
		});
		for (var i = 0; i < imgsPerPage; i++) {
			var thumb = _ce('div', {
				className: 'ezgallerythumb'
			}).css({
				width: (thumbWidth)+'px',
				height: (thumbHeight)+'px',
				cssFloat: 'left',
				margin: '5px',
				padding: '0'
			});
			if (i < imgs.length) {
				thumb.append(_ce('img', {
					alt: '',
					src: imgs[i][0]
				}).ezGalleryThumb(i));
			}
			thumbs.append(thumb);
		}
		container.append(thumbs);
		
		// detail view
		detail = _ce('div', {
			className: 'ezgallerydetail'
		}).hide();
		container.append(detail);
	}
	
	
	/**
	 * next
	 */
	
	this.next = function() {
		if (detailI == -1) {
			// next page
			if (currStart+imgsPerPage < imgs.length) {
				_showPage(currStart + imgsPerPage);
			}
		} else {
			// next image
			this.show(detailI+1);
		}
		_updateStatus()
	};
	
	
	/**
	 * prev
	 */
	
	this.prev = function() {
		if (detailI == -1) {
			// prev page
			if (currStart > 0) {
				_showPage(currStart - imgsPerPage);
			}
		} else {
			// prev image
			this.show(detailI-1);
		}
		_updateStatus()
	};
	
	
	/**
	 * show page
	 */
	
	function _showPage(startWith) {
		currStart = startWith;
		if (currStart < 0 || currStart >= imgs.length) currStart = 0;
		thumbs.children().each(function(i) {
			var div = $(this);
			var oldImg = $(this).find('img');
			
			if (currStart+i < imgs.length) {
				var show = function() {
					oldImg.remove();
					var newImg = new Image();
					newImg.onload = function() {
						var img = $(this).ezGalleryThumb(currStart+i);
						img.hide();
						div.removeClass('loading').append(newImg);
						img.fadeIn(fadeLength);
					};
					newImg.src = imgs[currStart+i][0];
				};
				if (oldImg.length == 0) {
					window.setTimeout(show, fadeLength);
				} else {
					oldImg.fadeOut(fadeLength, show);
				}
				div.addClass('loading');
			} else {
				oldImg.fadeOut(fadeLength, function() {
					oldImg.remove();
				});
			}
		});
		
		// next button
		if (currStart+imgsPerPage >= imgs.length) {
			$('#ezgallerynext:visible').fadeOut(fadeLength);
		} else {
			$('#ezgallerynext:hidden').fadeIn(fadeLength);
		}
		// prev button
		if (currStart <= 0) {
			$('#ezgalleryprev:visible').fadeOut(fadeLength);
		} else {
			$('#ezgalleryprev:hidden').fadeIn(fadeLength);
		}
	}
	
	
	/**
	 * show full image
	 */
	
	this.show = function(i) {
		cfg.lock = true;
		var i = i;
		if (i == detailI) return false;
		if (i < 0) i = imgs.length-1;
		if (i >= imgs.length) i = 0;
		var oldDetailI = detailI;
		detailI = i;
		// show image
		var showNext = function() {
			var newImg = new Image();
			var cfgPassed = cfg;
			newImg.onload = function() {
				// handle fast clicking
				if (EzGallery.getCurrDetailI() != i) {
					return false;
				}
				detail.find('div.ezgallerydetailitem').remove();
				// append image
				var img = $(this).click(function() {
					EzGallery.next();
				});
				var item = _ce('div', {
					className: 'ezgallerydetailitem'
				}).css({
					padding: '5px'
				}).hide().append(img);
				// backlink
				item.append(_ce('a', {
					className: 'ezgalleryback',
					href: '#'
				}).html('&laquo; Zur&uuml;ck zur &Uuml;bersicht').click(function() {
					$(this).blur();
					EzGallery.back();
					return false;
				}));
				detail.removeClass('loading').append(item);
				item.fadeIn(fadeLength);
				cfgPassed.lock = false;
			};
			newImg.src = imgs[i][1];
		};
		if (oldDetailI == -1) {
			// hide thumbs
			thumbs.fadeOut(fadeLength, function() {
				// show detail
				detail.hide().addClass('loading').fadeIn(fadeLength, showNext);
				$('#ezgalleryprev:hidden').fadeIn(fadeLength);
				$('#ezgallerynext:hidden').fadeIn(fadeLength);
			});
		} else {
			// hide old image
			detail.addClass('loading').find('div.ezgallerydetailitem').fadeOut(fadeLength, function() {
				$(this).remove();
				showNext();
			});
		}
		_updateStatus()
	}
	
	this.getCurrDetailI = function() {
		return detailI;
	}
	
	
	/**
	 * update status
	 */
	
	function _updateStatus() {
		var status = '';
		if (detailI == -1) {
			// pages
			status = 'Seite '+(currStart/imgsPerPage+1)+' von '+totalPages;
		} else {
			status = 'Bild '+(detailI+1)+' von '+imgs.length;
		}
		$('#ezgallerystatus').html(status);
	}
	
	
	/**
	 * back to thumb view
	 */
	
	this.back = function() {
		if (detailI >= 0) {
			var page = 0;
			for (var i = 0; i < totalPages; i++) {
				if ((i+1)*imgsPerPage > detailI) {
					page = i;
					break;
				}
			}
			detailI = -1;
			detail.fadeOut(fadeLength, function() {
				$(this).html('');
				thumbs.find('img').remove();
				thumbs.show();
				_showPage(page * imgsPerPage);
				_updateStatus();
			});
		}
	}
	
	
	/**
	 * create dom element
	 */
	
	function _ce(tagname, attr) {
		return $(document.createElement(tagname)).attr(attr);
	}
	
	
}


$.fn.ezGalleryThumb = function(fullImgIndex) {
	var el = $(this);
	var fullImg = fullImgIndex;
	el.click(function() {
		EzGallery.show(fullImgIndex);
		return false;
	});
	return el;
}