// +-------------------------------------------------------------+
// | Zaplife Photos javascript file
// | All rights reserved. Copyright 2005-2008 Zaplife
// |
// +-------------------------------------------------------------+

var dragging = false;

//Used to load thumbs into a page
function loadPhotoThumbs(type, id, container, photoId) {

	if (typeof photoId == "undefined") {
		var photoId = 0;
	}

	startLoader(container);

	var pars = 'action=load_photo_thumbs&' + 'id=' + id + '&type=' + type + sessionVar;
	var myAjax = new Request.HTML({
		url: webPath + 'ajax_photos.php?' + pars, 
		evalScripts: true,
		//update: $(container),
		onComplete: function (responseTree, responseElements, responseHTML, responseJavaScript) {
			$(container).set('html', responseHTML);
			//eval(responseJavaScript);
			if (type == 'editPhotoEntry') {
				new Sortables($('photosWrapperList' + id), {
					constrain: false,
					clone: true,
					opacity: 0.7,
					onStart: function() {
						dragging = true;
					},
					onComplete: function() {
						new Request({method: 'post', url: "ajax_photos.php"}).send("action=save_order&order="+this.serialize(0,function(el, index) {
								return el.getProperty('id').replace('channelPhoto','');
							})
						);
						setTimeout("dragging = false", 5000); //so that slideshow isn't launched until after sorting
						//dragging = false;
						//return false;
					}
				});
			}
			if (type != 'entry') { //If type is entry the update is called from loadChannelEntries instead
				startSlideshow.update();
			}
			if (photoId != 0) {
				startSlideshow.click($('photo' + photoId));
			}
		}
	}).get();
}

//Class to initialize slideshow viewing 
var buildSlideshow = new Class({

	Implements: Options,
	
	options: {
		initialWidth: 700,
		initialHeight: 650
	},

	initialize: function(options) {
		this.setOptions(options);
		
		//HTML elements
		this.overlay = new Element('div').set({'id': 'slideshowOverlay', 'class': 'overlay'}).inject(document.body);		
		this.container = new Element('div').set({'id': 'slideshowContainer', 'class': 'overlayContainer'}).setStyles({
            width: this.options.initialWidth + "px",
            height: 'auto',
            marginLeft: "-" + (this.options.initialWidth / 2) + "px",
            display: "none",
            textAlign: 'center'
        }).inject(document.body);
        		
		//this.overlay.onclick = this.close.bind(this);
		this.overlay.addEvent("click", function() {
			this.show.deActivateTagging('cancel');
			this.close();
		}.bind(this));
		
		//Effects
		this.fx = {
            overlay: new Fx.Tween(this.overlay, {
            	property: 'opacity',
            	duration: 500,
            	onComplete: this.start.bind(this)
            }),
            resize: new Fx.Morph(this.container, { duration: 400, transition: Fx.Transitions.Sine.easeInOut})
       	};
       	this.overlay.fade("hide");
		
	},
	
	setup: function(open) {
	
		/* This does not seem to work with Safari
		if (open) {
			//Include required JS files for slideshow
			var loaded = includeOnce(webPath + 'templates/' + theme + '/slideshow.css', 'css');
			while (!loaded) {}
			var loaded = includeOnce(jSPath + 'ratings.js');
			while (!loaded) {}
			var loaded = includeOnce(jSPath + 'slideshow.js');
			while (!loaded) {}
			var loaded = includeOnce(jSPath + 'zaplife_slideshow.js');
			while (!loaded) {}
		}
		*/
		//this.overlay.setStyles({'height': window.getScrollSize().y});
	
		/*
		var elements = $A(document.getElementsByTagName("object"));
        if (window.ie) {
            elements.extend(document.getElementsByTagName("select"))
        }
        elements.each(function(el) {
            el.style.visibility = open ? "hidden": ""
        });
        */
        var fn = open ? "addEvent": "removeEvent";
        window[fn]('scroll', this.positionOverlay.bind(this));
		
	},
	
	update: function() {
	
		this.anchors = [];
		$$("a[rel]").each(function(el) {
			if (el.rel.test(/^slideshow/i)) {
				//el.onclick = this.click.pass(el, this);
				var children = el.getChildren('img');
				if (children.length != 0) {
					el.addEvent('click', this.click.pass(el, this));
					this.anchors.push(el);
				}
			}
		}, this);
	},
	
	click: function(link) {
	
		if (dragging) {
			return false;
		}
	
		//HTML elements
		this.slideshowContainer = new Element('div').set({'id': 'slideshow', 'class': 'slideshow'}).inject(this.container);
		this.tabsContainer = new Element('div').setStyles({
        	'margin-top': '15px',
        	'margin-left': 'auto',
        	'margin-right': 'auto',
        	'position': 'relative',
        	'width': '662px'
        }).injectAfter(this.slideshowContainer);
        this.tagsContainer = new Element('div').setStyles({
        	'margin-top': '85px',
        	'margin-left': 'auto',
        	'margin-right': 'auto',
        	'position': 'relative',
        	'width': '662px',
        	'height': '20px'
        }).injectAfter(this.slideshowContainer);
	
		//Contains all image data of the current slideshow
		this.images = [];
		
		//The selected image
		this.imageNum = [];
	
		//Find out which images belong to this group and remove duplicates
		var j = [];
		this.anchors.each(function(el){
			if (el.rel == link.rel){
				for (j = 0; j < this.images.length; j++) if(this.images[j][0] == el.href.split('id=')[1]) break;
				if (j == this.images.length){
					//alert(el.getElement('img').src);
					var caption = '' + el.getElement('img').alt + '';
					if (el.title) {
						 caption += ' | ' + el.title;
					}
					this.images.push([el.href.split('id=')[1], caption]);
					if (el.href.split('id=')[1] == link.href.split('id=')[1]) this.imageNum = j;
				}
			}
		}, this);
	
		//Open window
		this.setup(true);
		if (window.getHeight() < 750) {
			this.top = window.getScrollTop() + 10; //This is for 800 height screens and smaller
		} else {
			this.top = window.getScrollTop() + (window.getHeight() / 10);
		}
		this.container.setStyles({top: this.top, display: ''});
		this.positionOverlay();
		//this.overlay.fade(0.8);
		this.fx.overlay.start(0.8);	
		
		//So that the click on the href doesn't take us any further
		return false;
		
	},
	
	start: function () {
		
		//Start slideshow
		if (this.show) {
        	this.show.destroy('empty');
        }
        var data = {};
        this.images.each(function(image, i){ this[webPath + 'showimage.php?mode=photo-m&type=jpg' + sessionVar +'&id=' + image[0]] = { 'caption': image[1], 'thumbnail': webPath + 'showimage.php?mode=thumb-c&type=jpg&id=' + image[0] }; }, data); 
        this.show = new zapSlideshow(this.slideshowContainer, data, { width: 660, height: 495, slide: this.imageNum, center: true, loader: false, resize: false, captions: true, controller: true, paused: true, overlap: false, thumbnails: true, duration: 400, transition: Fx.Transitions.Back.easeOut });
        //this.show.go(imageNum);
        
        //Build tabs menu
		this.tabs = new slideshowTabs(this.tabsContainer, {
			show: 0,
			classWrapper: 'tabPhotoWrapper',
			classMenu: 'tabPhotoMenu',
			classContainer: 'tabPhotoContainer',
			onSelect: function(toggle, container, index) {
				toggle.addClass('tabPhotoSelected');
				//container.effect('opacity').start(0, 1); // 1) first start the effect
				container.setStyle('display', ''); // 2) then show the element, to prevent flickering

				this.tabs[index].loaded = false;
				if (index == 0) { //case for comments & votes
					this.tabs[index].url = webPath + 'ajax_photos.php?action=load_comments_votes&id=' + startSlideshow.images[startSlideshow.show.currentPhoto][0] + sessionVar;
				} else {
					this.tabs[index].url = webPath + 'ajax_photos.php?action=photoinfo&id=' + startSlideshow.images[startSlideshow.show.currentPhoto][0] + sessionVar;
				}
			},
			onDeselect: function(toggle, container, index) {
				toggle.removeClass('tabPhotoSelected');
				//container.setStyle('display', 'none');
			},
			onRequest: function(toggle, container, index) {
				container.addClass('tabPhotoAjaxLoading');
			},
			onComplete: function(toggle, container, index) {
				container.removeClass('tabPhotoAjaxLoading');
				//Effect for visitors
				if ($('photoVisitors') && index == 1) {
					var photoViews = new Fx.Slide('photoVisitors', {mode: 'vertical'});
					photoViews.hide();
					$('photoVisitors').style.display = '';
					
					$('photoViews').addEvent('click', function(e){
						e = new Event(e);
						photoViews.toggle();
						e.stop();
					
						if (photoViews.open) {
							$('photoVisitorsArrow').src = 'images/arrow_right.gif';
						} else {
							$('photoVisitorsArrow').src = 'images/arrow_down.gif';
						}
					});
				}
				
				//Effects for comments
				if ($('newPhotoComment') && index == 0) {

					newPhotoCommentEffect = new Fx.Slide('newPhotoComment', {
						mode: 'vertical',
						onComplete: function() {
							if(this.wrapper.offsetHeight != 0)
							this.wrapper.setStyle('height', 'auto');
						}
					});
					newPhotoCommentEffect.hide();
					
					$('newPhotoCommentLink').addEvent('click', function(e){
						//$('photoCommentMessage').value = defaultMessage;
						e = new Event(e);
						newPhotoCommentEffect.toggle();
						
						//Kill events so that we can type comment
						/* startSlideshow.show.events.keyup.each(function(fn){ document.removeEvent('keyup', fn); });*/
						startSlideshow.show.toggleEvents(newPhotoCommentEffect.open);
						e.stop();
					});
				}

			},
			onFailure: function(toggle, container, index) {
				container.removeClass('tabPhotoAjaxLoading');
			}
		});
		this.tabs.addTab(langTabCommentsRating, '');
		//activeSlideshowTabs.addTab('Tags', 'Your comments');
		this.tabs.addTab(langTabDetails, '');
		
	}, 
	

	positionOverlay: function() {
		//this.overlay.setStyles({'top': window.getScrollTop(), 'height': window.getHeight()});
		this.overlay.setStyles({'height': window.getScrollSize().y});
	},
	
	close: function() {
		/*
		if (this.step < 0) return;
		this.step = -1;
		if (this.preload){
			this.preload.onload = Class.empty;
			this.preload = null;
		}
		for (var f in this.fx) this.fx[f].stop();
		this.center.style.display = this.bottomContainer.style.display = 'none';
		this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
		*/
		
		//Hide smiley tooltip if open
		if ($('smiliesTooltip')) {
			if ($('smiliesTooltip').style.display == 'block') {
				$('smiliesTooltip').style.display = 'none';
			}
		}
		
		this.overlay.fade("out");
		this.setup.pass(false, this);
		this.container.style.display = 'none';
		
		//Remove and destroy
		this.show.destroy('empty');
		this.show = false;
		this.container.empty();
		$('tagFrame').destroy(); //this.show.tagFrameContainer.destroy();
		
		return false;
	}

});

window.addEvent('domready', function(){
	startSlideshow = new buildSlideshow();
});


/*
var viewPhotos = new Class({
	initialize: function(container, props) {
		this.props = Object.extend({
			duration: 1000,
			interval: 4000,
			slideshow: 'stop',
			photos: [],
			titles: [],
			users: [],
			vote: [],
			comment: [],
			albumId: [],
			sharing: [],
			transition: Fx.Transitions.Cubic.easeInOut,
			type: 'scroll',
			width: 660,
			height: 495,
			photoTitle: '',
			defaultPhoto: false,
			defaultShowTags: 0,
			isAlbum: 0,
			sessUserId: 0
		}, props || {});

		if (this.props.photos.length < 1) { return; }

		this.container = $(container);

		this.isMouseOver = false;
		this.infoVisible = false;
		this.tagsVisible = false;
		this.commentsVisible = true;
		this.tagFrameSize = 142;
		this.taggingActive = false;
		
		//Create slideshow elements
		this.container.setStyles({overflow: 'hidden', display: 'block', position: 'relative', width: this.props.width + 'px',  height: this.props.height + 'px'});
		
		//Create first DIV
		this.divA = new Element('div');
		this.divA.id = 'divA';
		this.divA.setStyles({textAlign: 'center', display: 'block', visibility: 'hidden', position: 'absolute', left: '0px', top: '0px', zIndex: 1, width: this.props.width + 'px',  height: this.props.height + 'px'});
		//this.divA.fx = this.divA.effect("opacity", {duration: this.props.duration, transition: this.props.transition});
		this.divA.injectInside(this.container);

		//Create second DIV
		this.divB = this.divA.clone();
		this.divB.id = 'divB';
		//this.divB.fx = this.divB.effect("opacity", {duration: this.props.duration, transition: this.props.transition});
		this.divB.setStyle('opacity', 0);
		this.divB.injectAfter(this.divA);
		
		//Create img
		this.a = new Element('img');
		this.a.title = this.props.photoTitle;
		this.a.setStyles({height: 'auto', width: 'auto', cursor: 'pointer'});
		this.b = this.a.clone();
		
		//Add Slideshow events to img
		this.a.addEvents({
			"mouseenter": function() {
				this.isMouseOver = true;
				if(this.props.slideshow == "auto") this.slideshowTimer = $clear(this.slideshowTimer);
			}.bind(this),
			"mouseleave": function() {
				this.isMouseOver = false;
				if(this.props.slideshow == "auto") this.slideshowTimer = this._autoRotate.periodical(this.props.interval, this);
			}.bind(this),
			"click": function(event) {
				new Event(event).stop();
				this._next();
 			}.bind(this)
		});
		
		this.b.addEvents({
			"mouseenter": function() {
				this.isMouseOver = true;
				if(this.props.slideshow == "auto") this.slideshowTimer = $clear(this.slideshowTimer);
			}.bind(this),
			"mouseleave": function() {
				this.isMouseOver = false;
				if(this.props.slideshow == "auto") this.slideshowTimer = this._autoRotate.periodical(this.props.interval, this);
			}.bind(this),
			"click": function(event) {
				new Event(event).stop();
				this._next();
 			}.bind(this)
		});
		
		//Insert images into div's
		this.a.injectInside(this.divA);
		this.b.injectInside(this.divB);
		
		//Create Span's for PicLens
		this.spanA = new Element('span');
		//this.spanA.setStyles({display: 'none'});
		this.spanA.addClass('mbf-item');
		this.spanB = this.spanA.clone();
		
		//Insert Spans into div's
		this.spanA.injectInside(this.divA);
		this.spanB.injectInside(this.divB);
		
		//Create info DIV
		this.divInfo = new Element('div');
		this.divInfo.setStyles({opacity: '0', visibility: 'hidden', textAlign: 'left', display: 'block', position: 'absolute', left: '0px', top: '0px', zIndex: 99999, width: this.props.width + 'px',  height: this.props.height + 'px'});
		//this.divA.fx = this.divA.effect("opacity", {duration: this.props.duration, transition: this.props.transition});
		this.divInfo.injectAfter(this.divB);
		
		//Create indicator DIV
		this.divIndicator = new Element('div');
		this.divIndicator.setStyles({opacity: '1', display: 'block', position: 'absolute', left: (this.props.width) / 2 - 9 + 'px', top: (this.props.height) / 2 - 9 + 'px', zIndex: 99998, width: '18px',  height: '18px'});
		this.indicator = new Element('img');
		this.indicator.setProperty('src', 'images/loading.gif');
		this.indicator.injectInside(this.divIndicator);
		this.divIndicator.injectAfter(this.divInfo);
		
		this.direction = 'left';
		this.fxTimer = 0; 
		
		//Load first photo
		if (this.props.defaultPhoto != '') {
			/*
			//Add indexOf function for browser liks IE
			if(!Array.indexOf){
				Array.prototype.indexOf = function(obj, start){
					for(var i=(start||0); i<this.length; i++){
						if(this[i]==obj){
							return i;
						}
					}
				}
			}
			* /
			this.atScreen = this.props.photos.indexOf(this.props.defaultPhoto);
		} else {
			this.atScreen = 0;
		}
		
		this.index = 0;
		this._load();
		//this.a.setProperty('src', 'showimage.php?mode=photo-m&id=' + this.props.photos[this.atScreen].trim() + '&type=jpg');
		
		//Load tags if default
		if (this.props.defaultShowTags == 1) {
			this.tagsVisible = true;		
		}
		
		/*
		//Get photo menu
		this._loadMenu();
		//Get votes
		this._loadVote();
		if (this.props.albumComment == 1) {
			this.loadComments();
		}
		* /
		
		//Center photo vertically
		//imgCoord = this.a.getCoordinates();
		//this.a.setStyles({marginTop: (this.props.height - imgCoord['height']) / 2});
		
		//Build and populate thumb navigation
		var scroll = new Scroller('thumbnav', {area: 200, velocity: 0.2});

		// Mousemove
		$('thumbnav').addEvent('mouseenter', scroll.start.bind(scroll));
		$('thumbnav').addEvent('mouseleave', scroll.stop.bind(scroll));
		
		for (i = 0; i < this.props.photos.length; i++) {
			a = new Element('a');
			a.setProperty('name', i);
			a.setProperty('title', this.props.titles[i]);
			a.onclick = function(i) {
				this.goTo(i);
			}.pass(i, this);
			src = '/showimage.php?mode=thumb-c&id=' + this.props.photos[i].trim() + '&type=jpg';
			t = new Element('img');
			t.setProperty('border', '0');
			t.setProperty('alt', this.props.titles[i]);
			if (!window.webkit) {
				t.addClass('thumbopacity');
			}
			t.setProperty('src', src);
			if (i == this.atScreen) { 
				t.addClass('active');
			}
			t.injectInside(a);
			a.injectInside($('thumbnavcore'));
		}
		
		/*
		//Preload next photo
		this.direction = 'left';
		this.curr[0] = 1;

		this.loader = new Image();
		this.loader.src = this.props.hu + this.props.images[this.curr[0]].trim();
		this.loader.src = 'showimage.php?mode=photo-m&id=' + this.props.images[this.curr[0]].trim() + '&type=jpg';
		* /
		
		//Attach next button
		if($('previous_button')) {
			$('previous_button').addEvent("click", function(event) {
				new Event(event).stop();
				this._previous();
				//this.fireEvent("onClickPrevious", this, 20);
			}.bind(this));// check if value is not "undefined" before start search the dom with $()
		}
		
		//Attach prev button
		if($('next_button')) {
			$('next_button').addEvent("click", function(event) {
				new Event(event).stop();
				this._next();
				//this.fireEvent("onClickNext", this, 20);
			}.bind(this));
		}
		
		//Attach slideshow toggle button
		if($('toggle_button')) {
			$('toggle_button').addEvent("click", function(event) {
				new Event(event).stop(); 
				this._toggleSlide();
			}.bind(this));
		}
		
		//Attach info button
		if($('photo_info_button')) {
			$('photo_info_button').addEvent("click", function(event) {
				new Event(event).stop(); 
				this._toggleInfo(false);
			}.bind(this));
		}
		
		//Start slideshow
		if(this.props.slideshow == "auto") this.slideshowTimer = this._autoRotate.periodical(this.props.interval, this);
	},
	
	_loadMenu: function() {
		pars = 'action=menu&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.users[this.atScreen] + '&value2=' + this.props.sharing[this.atScreen];
    	var myAjax = new Ajax('ajax_photos.php', {method: 'post', data: pars, onComplete: function (response) {
    			$('menu').innerHTML = response;
    		}
    	}).request();
	},
	
	_loadVote: function() {
		//if (this.props.vote[this.atScreen] == 1) { //Need to work with different vote values per photo
		pars = 'action=showvotes&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.vote[this.atScreen];
		var myAjax = new Ajax('ajax_photos.php', {method: 'post', data: pars, onComplete: function (response) {
				$('vote').innerHTML = response;
			}
		}).request();
    	//}
	},
	
	loadComments: function() {
		if (this.commentsVisible && $('photoComments')) {
			pars = 'action=showcomments&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.comment[this.atScreen] + '&value2=' + this.props.users[this.atScreen] + '&value3=' + this.props.titles[this.atScreen];
    		var myAjax = new Ajax('ajax_photos.php', {method: 'post', data: pars, onComplete: function (response) {
    				$('photoComments').innerHTML = response;
    			}
    		}).request();
    	}
	},
	
	loadTags: function() {
		if (this.tagsVisible) {
			pars = 'action=loadtags&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.users[this.atScreen];
			var myAjax = new Ajax('ajax_photos.php', {method: 'post', data: pars, onComplete: function (response) {
					$('phototags_content').innerHTML = response;
				}
			}).request();
		}
	},
	
	activateTagging: function() {
		this.taggingActive = true;
		
		$('phototags_button').setStyle('display', '');
		tags.slideIn();
		//this.loadTags();
		
		//Load edit tags content
		if (this.props.users[this.atScreen] == this.props.sessUserId) {
			pars = 'action=loadedittags&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.users[this.atScreen];
				var myAjax = new Ajax('ajax_photos.php', { method: 'post', data: pars, onComplete: function (response) {
						$('phototags_content').innerHTML = response;
					}.bind(this)
				}).request();
		}
		
    	//Activate cursor tagging
		img.setStyle('cursor', 'crosshair');
		img.addEvent("click", function(event) {
				event = new Event(event).stop(); 
				this._setTagFrame(event);
			}.bind(this));
		$('tagframeinside').addEvent("click", function(event) {
				event = new Event(event).stop(); 
				this._setTagFrame(event);
			}.bind(this));
			
		//Activate tooltip
		showTooltip('photos',-(this.props.width-this.loader.width)/2 + 5,this.props.height/2);
			
		//Add userlist div
		this.taggingList = new Element('div');
		this.taggingList.setStyles({ display: 'none', textAlign: 'center', position: 'absolute', left: '0px', top: '0px', border: 'solid 2px #00a7c2', backgroundColor: '#ffffff', zIndex: 999, width: '182px',  height: 'auto' });
		//this.taggingList.addClass('cardbackground');
		this.taggingList.injectAfter('tagframe');
		
		pars = 'action=loadtagableusers&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.users[this.atScreen];
    		var myAjax = new Ajax('ajax_photos.php', { method: 'post', data: pars, onComplete: function (response) {
    				this.taggingList.innerHTML = response;
    			}.bind(this)
    		}).request();
		
		
		
		/*
		if (this.commentsVisible && this.props.albumComment == 1) {
			pars = 'action=showcomments&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId + '&value=' + this.props.albumComment + '&value2=' + this.props.albumUser + '&value3=' + this.props.titles[this.atScreen];
    		var myAjax = new Ajax('ajax_photos.php', {method: 'post', data: pars, onComplete: function (response) {
    				$('comments').innerHTML = response;
    			}
    		}).request();
    	}
    	* /
    	//alert('tag');
	},
	
	deActivateTagging: function(mode) {
		img.setStyle('cursor', 'pointer');
		img.removeEvents("click");
		$('tagframe').setStyles({display: 'none'});
		this.taggingList.setStyles({display: 'none'});
		this.taggingList.setHTML('');
		$('phototags_button').setStyle('display', 'none');
		hideTooltip('photos');
		this.tagsVisible = true;
		//this.loadTags();
		
		//Save tags
		if (mode == 'save' && this.props.users[this.atScreen] == this.props.sessUserId) {
			pars = 'action=savetags&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.users[this.atScreen] + '&value2=' + $('tags').value;
				var myAjax = new Ajax('ajax_photos.php', { method: 'post', data: pars, onComplete: function (response) {
						this.loadTags();
					}.bind(this)
				}).request();
		} else {
			this.loadTags();
		}
		this.taggingActive = false;
	},
	
	removeTagFrame: function() {
		$('tagframe').setStyles({display: 'none'});
		this.taggingList.setStyles({display: 'none'});
	},
	
	_setTagFrame: function(event) {
		var frameSize = this.tagFrameSize;
		var imgCoord = img.getCoordinates();
		var frameX = event.page.x - frameSize/2;
		var frameY = event.page.y - frameSize/2;
		
		//Bug
		if (window.ie) {
			var imgLeft = imgCoord['left'] + 1;
			var imgTop = imgCoord['top'] + 1;
		} else if (window.gecko) {
			var imgLeft = imgCoord['left'] + 2;
			var imgTop = imgCoord['top'] + 2;
		} else {
			var imgLeft = imgCoord['left'];
			var imgTop = imgCoord['top'];
		}
		
		if(frameX < imgLeft) frameX = imgLeft;
		if(frameY < imgTop) frameY = imgTop;
		if(frameX > imgLeft + imgCoord['width'] - frameSize) frameX = imgLeft + imgCoord['width'] - frameSize;
		if(frameY > imgTop + imgCoord['height'] - frameSize) frameY = imgTop + imgCoord['height'] - frameSize;
		$('tagframe').setStyles({left: frameX + 'px', top: frameY + 'px', display: ''});
		if (window.getWidth() < frameX + frameSize + 13 + 190) {
			this.taggingList.setStyles({left: frameX - 199 + 'px', top: frameY + 'px', display: ''});
		} else {
			this.taggingList.setStyles({left: frameX + frameSize + 13 + 'px', top: frameY + 'px', display: ''});
		}
		
		//Set coordinates in form
		$('tag_x').value = frameX - imgLeft + frameSize/2;
		$('tag_y').value = frameY - imgTop + frameSize/2;
		
		//alert(event.page.x);
		//alert(imgCoord['left']);
		
    	//alert('tag');
	},
	
	toggleTagFrame: function(x, y, display) {
		var frameSize = this.tagFrameSize;
		var imgCoord = img.getCoordinates();
		var frameX = x - frameSize/2;
		var frameY = y - frameSize/2;
		
		//Bug
		if (window.ie) {
			var imgLeft = imgCoord['left'] + 1;
			var imgTop = imgCoord['top'] + 1;
		} else if (window.gecko) {
			var imgLeft = imgCoord['left'] + 2;
			var imgTop = imgCoord['top'] + 2;
		} else {
			var imgLeft = imgCoord['left'];
			var imgTop = imgCoord['top'];
		}
		
		if (display) {
			display = '';
		} else {
			display = 'none';
		}
		
		$('tagframe').setStyles({left: frameX + imgLeft + 'px', top: frameY + imgTop + 'px', display: display});
		
	},
	
	addUserTags: function() {
	
		pars = 'action=addusertags&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.users[this.atScreen] + '&' + $('usertaglist').toQueryString();
		//alert(pars);
		var myAjax = new Ajax('ajax_photos.php', {method: 'post', data: pars, onComplete: this._updateTags.bind(this)}).request();
	},
	
	removeUserTag: function(id) {
	
		pars = 'action=removeusertag&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.users[this.atScreen] + '&value2=' + id;
		var myAjax = new Ajax('ajax_photos.php', {method: 'post', data: pars, onComplete: this.loadTags.bind(this)}).request();
	},
	
	_updateTags: function() {
	
		this.removeTagFrame();
		//Reload taggable users
		pars = 'action=loadtagableusers&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.users[this.atScreen];
    		var myAjax = new Ajax('ajax_photos.php', { method: 'post', data: pars, onComplete: function (response) {
    				this.taggingList.innerHTML = response;
    			}.bind(this)
    		}).request();
		//this.loadTags();
	},
	
	_toggleInfo: function(stick) {
		if (this.infoVisible == false || stick) {
			//if (this.divInfo.innerHTML == '') {
				pars = 'action=photoinfo&photo_id=' + this.props.photos[this.atScreen] + '&album_id=' + this.props.albumId[this.atScreen] + '&value=' + this.props.isAlbum;
    			var myAjax = new Ajax('ajax_photos.php', {method: 'post', data: pars, onComplete: this._showInfo.bind(this)}).request();
    		//} else {
    			//this._showInfo('');
    		//}	
		} else {
			if (!stick) {
				this.divInfo.effect('opacity').start(0.75, 0);
				this.infoVisible = false;
			}
		}
	},
	
	_showInfo: function(response) {
		this.infoVisible = true;
		this.divInfo.innerHTML = response;
		
		//Add effect to photoViews and hide
		if ($('photovisitors')) {
			var photoViews = new Fx.Slide('photovisitors', {mode: 'vertical'});
			photoViews.hide();
			$('photovisitors').style.display = '';
			
			$('photo_views').addEvent('click', function(e){
				e = new Event(e);
				photoViews.toggle();
				e.stop();
			
				if (photoViews.open) {
					$('togglearrowphotovisitors').src = 'images/arrow_right.gif';
				} else {
					$('togglearrowphotovisitors').src = 'images/arrow_down.gif';
				}
			});
		}
		//Show div
    	if (this.divInfo.style.opacity == 0) { this.divInfo.effect('opacity').start(0, 0.75); }
	},
	
	goTo: function(n) {
		if (this.atScreen != n && this.loader.complete && this.taggingActive == false) {
			$clear(this.timeout);
			this._toggleIndicator(true);
			if (this.props.slideshow == 'auto') { this._toggleSlide(); } //Stop slideshow
			this.direction = (n < this.atScreen) ? 'right' : 'left';
			this.index++;
			this.atScreen = n;
			this._load();
			if (this.infoVisible) { this._toggleInfo(true); }
		}
		//this.fireEvent("onGoTo", this, 20);
	},

	_previous: function() {
		if (this.loader.complete && this.taggingActive == false) {
			$clear(this.timeout);
			this._toggleIndicator(true);
			this.direction = 'right';
			this.index++;
			//$('index').setHTML(this.index);
			this.atScreen = this.atScreen - 1;
			if(this.atScreen < 0) this.atScreen = (this.props.photos.length - 1);
			//$('atScreen').setHTML(this.atScreen);
			this._load();
			if (this.infoVisible) { this._toggleInfo(true); }
			//this.fireEvent("onPrevious", this, 20);
		}
	},

	_next: function() {
		if (this.loader.complete && this.taggingActive == false) {
			$clear(this.timeout);
			this._toggleIndicator(true);
			this.direction = 'left';
			this.atScreen++;
			this.index++;
			//$('index').setHTML(this.index);
			if(this.atScreen >= this.props.photos.length) this.atScreen = 0;
			//$('atScreen').setHTML(this.atScreen);
			this._load();
			if (this.infoVisible) { this._toggleInfo(true); }
			//this.fireEvent("onNext", this, 20);
		}
	},

	_toggleSlide: function() {
		if (this.props.slideshow == 'auto') {
			this.props.slideshow = 'stop';
			this.slideshowTimer = $clear(this.slideshowTimer);
			var button = $E('img', $('toggle_button'));
			button.src = 'images/button_play.png';
		} else {
			this.props.slideshow = 'auto';
			this.slideshowTimer = this._autoRotate.periodical(this.props.interval, this);
			var button = $E('img', $('toggle_button'));
			button.src = 'images/button_pause.png';
		}
	},
	
	_toggleIndicator: function(show) {
		if (this.props.slideshow == 'stop') {
			if (show == true) {
				this.divIndicator.setStyle('opacity', '1');
			} else {
				this.divIndicator.setStyle('opacity', '0');
			}
		}
		
	},

	_autoRotate: function() {
		if(!this.isMouseOver) this._next();
	},
	
	_load: function() {
		//Stop current transitions if working
		//this.divA.fx.options.duration = 0;
		//this.divA.fx.stop(true);
		//this.divB.fx.options.duration = 0;
		//this.divB.fx.stop(true); 
	
		this.loader = new Element('img');
		this.loader.setProperty('src', 'showimage.php?mode=photo-m&id=' + this.props.photos[this.atScreen].trim() + '&type=jpg&cache=' + new Date().getTime());
		//this.loader.setProperty('src', 'showimage.php?mode=photo-m&id=' + this.props.photos[this.atScreen].trim() + '&type=jpg');
		this._animate();
	
	},

	_animate: function() {
		if (this.loader.complete && ((new Date).getTime() > this.fxTimer)) {
			//alert(this.index);
			//alert(this.atScreen);
			//(this.index % 2) ? alert('divA') : alert('divB');
			
			//Div and img is the one to be viewed, div2 hidden
			img = (this.index % 2) ? this.a : this.b;
			var div = (this.index % 2) ? this.divA : this.divB;
			var div2 = (this.index % 2) ? this.divB : this.divA;
			div.setStyles({zIndex: this.index});
			img.setStyles({height: 'auto', width: 'auto'});
			img.setProperty('src', this.loader.src);
			
			span = (this.index % 2) ? this.spanA : this.spanB;
			span.setHTML('#gallery ' + this.props.photos[this.atScreen].trim());
			
			//Center photo vertically
			//imgCoord = img.getCoordinates();
			img.setStyles({marginTop: (this.props.height - this.loader.height) / 2, height: this.loader.height, width: this.loader.width});

			/*
			//Show info if open
			if (this.infoVisible) {
				this._toggleInfo(true);
			}
			* /
			
			//Get photo menu
			this._loadMenu();
			
			//Get votes
			this._loadVote();
			
			//Get comments
			this.loadComments();
			
			//Get comments
			this.loadTags();
		
			//alert(div.style.opacity);
			this._toggleIndicator(false);
			
			switch(this.props.type) {
				case "fade":
					
					var fx = new Fx.Style(div, 'opacity', {duration: this.props.duration, transition: this.props.transition});
					var fx2 = new Fx.Style(div2, 'opacity', {duration: this.props.duration, transition: this.props.transition});
					fx2.start(0).chain(function() {
					fx.start(1);}.bind(this));
				
					//div2.fx.start(0).chain(function() {
					//div.fx.start(1);}.bind(this));
					
					break;
	
				case "scroll":
				
					div.setStyles({left: 'auto', right: 'auto'});
					div.setStyle(this.direction, this.props.width + 'px');
					div.setStyle('opacity', 1);
				
					arr = [div, div2];

					p0 = {};					
					p0[this.direction] = [this.props.width, 0];
					p1 = {};
					p1[this.direction] = [0, (this.props.width * -1)];

					// Navigation has changed direction
					// The image shifts when changing from right <> left so we need to correct the positioning
					if (arr[1].getStyle(this.direction) == 'auto') {
						x = this.props.width - arr[1].getStyle('width').toInt();
					
						arr[1].setStyle(this.direction, x + 'px');
						arr[1].setStyle(((this.direction == 'left') ? 'right' : 'left'), 'auto');
						 
						p1[this.direction] = [x, (this.props.width * -1)];
					}
					
					//$('div').setHTML('left' + arr[0].getStyle('left') + 'right' + arr[0].getStyle('right'));
					//$('div2').setHTML('left' + arr[1].getStyle('left') + 'right' + arr[1].getStyle('right'));
					
					var fx = new Fx.Elements(arr, {duration: this.props.duration, transition: this.props.transition});
					fx.start({'0': p0, '1': p1});
					
					this.fxTimer = (new Date).getTime() + this.props.duration;
					//this.fx.push(fx);		
					
					break;
			}
			
			//Update active thumb
			anchors = $ES('img', $('thumbnavcore'));
			anchors.each(function(a, i) {
				if (i == this.atScreen) { 
					a.addClass('active'); 
				} else { 
					a.removeClass('active'); 
				}
			}, this);
			
		} else { 
			this.timeout = this._animate.delay(100, this);
		}
	}
});

*/