var Interface = { };

Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
	initialize: function(element) {
		this.element = $(element);
		var options = Object.extend({x:0,y:0,mode: 'absolute'}, arguments[1] || {});
		this.start(options);
	},
	
	setup: function() {
		if (this.options.continuous && !this.element._ext ) {
			this.element.cleanWhitespace();
			this.element._ext=true;
			this.element.appendChild(this.element.firstChild);
		}
	
		this.originalLeft=this.element.scrollLeft;
		this.originalTop=this.element.scrollTop;
	
		if(this.options.mode == 'absolute') {
			this.options.x -= this.originalLeft;
			this.options.y -= this.originalTop;
		} 		
	},
	
	update: function(position) {
		this.element.scrollLeft = this.options.x * position + this.originalLeft;
		this.element.scrollTop  = this.options.y * position + this.originalTop;
	}
});

Interface.Glider = Class.create({
	initialize: function(wrapper,element,prev,next,options) {
		this.wrapper = $(wrapper);
		this.element = $(element);
		this.items = new Array();
		this.prev_button = $(prev);
		this.next_button = $(next);
		this.index = 0;
		this.distance = 
		this.options = options || { };
		this.options.itemclass = this.options.itemclass || 'item_slider';
		
		var tmp = this.element.getElementsByTagName('div');
		for(var i=0;i<tmp.length;i++){
			if(tmp[i].className==this.options.itemclass){
				this.items.push(tmp[i]);
			}
		}

		this.prev_button.hide();

		var MAX_ITEMS_PER_ROW = 8;
		if (this.items.length <= MAX_ITEMS_PER_ROW) {
			this.next_button.hide();
		}

		this.prev_button.up().style.height = this.wrapper.getHeight()+'px';
		this.next_button.up().style.height = this.wrapper.getHeight()+'px';
		
		Event.observe(this.prev_button, 'click', this.prev.bindAsEventListener(this));
		Event.observe(this.next_button, 'click', this.next.bindAsEventListener(this));
	},
	
	move: function(nextIndex) {
		this.index = nextIndex;

		Position.prepare();
		container_offset = Position.cumulativeOffset(this.element),
		element_offset = Position.cumulativeOffset(this.items[this.index]);

		this.scrolling = new Effect.SmoothScroll(this.wrapper, { duration: 0.5, x:element_offset[0]-container_offset[0], y:element_offset[1]-container_offset[1] });
		
		if(this.index>0){
			this.prev_button.show();
		}else{
			this.prev_button.hide();
		}
		
		if(this.index<this.items.length-1){
			this.next_button.show();
		}else{
			this.next_button.hide();
		}
	},
	
	prev: function(event) {
		this.move(this.index-1);
		this.prev_button.blur();
		Event.stop(event);
	},
	
	next: function(event) {
		this.move(this.index+1);
		this.next_button.blur();
		Event.stop(event);
	}
	
});


Interface.Lightbox = Class.create({
	initialize: function() {
		me = this;
		
		me.lightbox = $('lightbox');
		me.canvas = $('canvas');
		me.content = $('lightbox_content');
		me.lightboxImgBox = $('lightbox_image_box');
		me.lightboxImg = $('lightbox_image');
		me.lightboxTxt = $('lightbox_text');
		me.lightboxDeepLink = $('deep-link');
		me.lightboxGalleryLink = $('gallery-link');
		me.lightboxDL = $('download-link');
		
		me.buttonPrev = $('lightbox_prev');
		me.buttonNext = $('lightbox_next');

		me.galleryitems = $$('.gallerylist .item');
		me.closeItems = $$('#lightbox .close, #canvas');
		
		me.galleryitems.each(function(item) {
			item.style.cursor = 'pointer';
			item.observe('click', me.open.bind(item));
		});
		
		me.closeItems.each(function(item) {
			item.style.cursor = 'pointer';
			item.observe('click', me.hide.bind(item));
		});
		
		me.buttonPrev.observe('click', me.prev.bind(me.buttonPrev));
		me.buttonNext.observe('click', me.next.bind(me.buttonNext));
		
		me.autoopen();
	},

	autoopen: function() {

		var data = document.location.hash.replace('#','');
		var delimiter = data.indexOf('_');

		var galid = parseInt(data.substring(0, delimiter));
		var imageid = parseInt(data.substr(delimiter + 1));
		
		if(typeof(galid)=='number' && galid > 0 && typeof(imageid)=='number' && imageid > 0) {

			//get image tag and ids of next/previous image
			new Ajax.Request('/html/ajax_lightbox.php', {
				  method: 'post',
				  parameters: { galleryid: galid, imageid: imageid },
				  onSuccess: function(transport){
					  var json = transport.responseText.evalJSON();

					  if (json.isValid == true) {

						  me.show(json);
	
						  Effect.Appear(me.lightbox, { from: 0.0, to: 1, duration: 0 });
						  Effect.Appear(me.canvas, { from: 0.0, to: 0.7, duration: 0.5 });
						  Effect.BlindDown(me.content, { duration: 0.5 });
					  }
				  },
				  onException: function(){ alert('Exception: Something went wrong...') },
				  onFailure: function(){ alert('Failure: Something went wrong...') }
			});
		}
	},

	
	open: function(event) {
		Event.stop(event);

		//read gallery id and image id out of rel tag
		var data = this.readAttribute('rel');
		var delimiter = data.indexOf('_');

		var galid = parseInt(data.substring(0, delimiter));
		var imageid = parseInt(data.substr(delimiter + 1));

		//get image tag and ids of next/previous image
		new Ajax.Request('/html/ajax_lightbox.php', {
			  method: 'post',
			  parameters: { galleryid: galid, imageid: imageid },
			  onSuccess: function(transport){

				  var json = transport.responseText.evalJSON();

				  me.show(json);

				  Effect.Appear(me.lightbox, { from: 0.0, to: 1, duration: 0 });
				  Effect.Appear(me.canvas, { from: 0.0, to: 0.7, duration: 0.5 });
				  Effect.BlindDown(me.content, { duration: 0.5 });		     
			  },
			  onException: function(){ alert('Exception: Something went wrong...') },
			  onFailure: function(){ alert('Failure: Something went wrong...') }
		});
	},

	show: function(json) {

		//update image
		me.lightboxImg.writeAttribute('src', json.image.webpath);
		me.lightboxImg.writeAttribute('alt', json.alttext);

		me.lightboxGalleryLink.writeAttribute('href', json.gallerypath);
		me.lightboxDeepLink.update(json.actuallink);
		me.lightboxDL.writeAttribute('href', json.download);

		me.lightboxTxt.update(json.alttext);

		//set proper dimensions
		var p_dimensions_array = $$('body'); 
		var p_height = p_dimensions_array[0].getHeight()+30;	//Hoehe der Seite (inkl. Fix für FF)
		var p_width = p_dimensions_array[0].getWidth();			//Breite der Seite
		var v_height = document.viewport.getHeight();			//sichtbare Hoehe
		var v_width = document.viewport.getWidth();				//sichtbare Breite
		var i_height = json.image.height;						//Hoehe des Bildes
		var i_width = json.image.width;							//Breite des Bildes

		me.lightbox.style.height = (v_height > p_height ? v_height : p_height) + 'px';
		me.canvas.style.height = (v_height > p_height ? v_height : p_height) + 'px';

		me.lightbox.style.width = v_width + 'px';
		me.canvas.style.width = v_width + 'px';
		me.lightboxImgBox.style.width = i_width + 'px';
		me.content.style.width = i_width + 'px';

		me.content.style.top = ((v_height/2) - (i_height/2) - 35) + 'px';
		me.content.style.left = ((v_width/2) - (i_width/2)) + 'px';

		//update navigation link
		me.buttonPrev.writeAttribute('rel', json.galleryid + "_" + json.prev);
		me.buttonNext.writeAttribute('rel', json.galleryid + "_" + json.next);

		if (json.showNext) {
			me.buttonNext.show();
		} else {
			me.buttonNext.hide();
		}

		if (json.showPrevious) {
			me.buttonPrev.show();
		} else {
			me.buttonPrev.hide();
		}

		return true;
	},

	hide: function(event) {
		Event.stop(event);
		
		Effect.BlindUp(me.content, { duration: 0.3 });
		Effect.Fade(me.canvas, {
			from: 0.8,
			to: 0,
			duration: 0.8,
			afterFinish: (function () {
				me.lightbox.style.height = '1px';
			})
		});
	},
	
	prev: function(event) {
		Event.stop(event);

		//read gallery id and image id out of rel tag
		var data = this.readAttribute('rel');
		var delimiter = data.indexOf('_');

		var galid = parseInt(data.substring(0, delimiter));
		var imageid = parseInt(data.substr(delimiter + 1));

		//get image tag and ids of next/previous image
		new Ajax.Request('/html/ajax_lightbox.php', {
			  method: 'post',
			  parameters: { galleryid: galid, imageid: imageid },
			  onSuccess: function(transport){
				  var json = transport.responseText.evalJSON();

				  me.show(json);	     
			  },
			  onException: function(){ alert('Exception: Something went wrong...') },
			  onFailure: function(){ alert('Failure: Something went wrong...') }
		});

	},
	
	next: function(event) {
		Event.stop(event);

		//read gallery id and image id out of rel tag
		var data = this.readAttribute('rel');
		var delimiter = data.indexOf('_');

		var galid = parseInt(data.substring(0, delimiter));
		var imageid = parseInt(data.substr(delimiter + 1));

		//get image tag and ids of next/previous image
		new Ajax.Request('/html/ajax_lightbox.php', {
			  method: 'post',
			  parameters: { galleryid: galid, imageid: imageid },
			  onSuccess: function(transport){
				  var json = transport.responseText.evalJSON();

				  me.show(json);	     
			  },
			  onException: function(){ alert('Exception: Something went wrong...') },
			  onFailure: function(){ alert('Failure: Something went wrong...') }
		});
		
	}
});







/*
Interface.Lightbox = Class.create({
	initialize: function() {
		me = this;
		
		me.lightbox = $('lightbox');
		me.canvas = $('canvas');
		me.content = $('lightbox_content');
		me.lightboxImgBox = $('lightbox_image_box');
		me.lightboxImg = $('lightbox_image');
		me.lightboxTxt = $('lightbox_text');
		me.lightboxDeepLink = $('deep-link');
		me.lightboxGalleryLink = $('gallery-link');
		me.lightboxDL = $('download-link');
		
		me.buttonPrev = $('lightbox_prev');
		me.buttonNext = $('lightbox_next');

		me.galleryitems = $$('.gallerylist .item');
		me.closeItems = $$('#lightbox .close, #canvas');
		
		me.galleryitems.each(function(item) {
			item.style.cursor = 'pointer';
			item.observe('click', me.open.bind(item));
		});
		
		me.closeItems.each(function(item) {
			item.style.cursor = 'pointer';
			item.observe('click', me.hide.bind(item));
		});
		
		me.buttonPrev.observe('click', me.prev.bind(me.buttonPrev));
		me.buttonNext.observe('click', me.next.bind(me.buttonNext));
		
		me.autoopen();
	},
	
	autoopen: function() {
		id = parseInt(document.location.hash.replace('#',''));
		
		if($('img'+id)) {
			rel = parseInt($('img'+id).readAttribute('rel'));
		}
		
		if(typeof(rel)=='number' && rel > 0) {
			if(me.show(rel)) {
				Effect.Appear(me.lightbox, { from: 0.0, to: 1, duration: 0 });
				Effect.Appear(me.canvas, { from: 0.0, to: 0.7, duration: 0.5 });
				Effect.BlindDown(me.content, { duration: 0.5 });
			}
		}
	},
	
	open: function(event) {
		Event.stop(event);
		var rel = parseInt(this.readAttribute('rel'));
		
		me.show(rel);
		
		Effect.Appear(me.lightbox, { from: 0.0, to: 1, duration: 0 });
		Effect.Appear(me.canvas, { from: 0.0, to: 0.7, duration: 0.5 });
		Effect.BlindDown(me.content, { duration: 0.5 });
	},
	
	show: function(rel) {
		if(typeof(me.galleryitems[rel-1])=='undefined') {
			return false;
		} else {
			actualItem = me.galleryitems[rel-1];
			
			var src='#';
			var alt='';
			var download = '#';
			
			var v_height = document.viewport.getHeight();		//sichtbare Höhe
			var v_width = document.viewport.getWidth();			//sichtbare Breite
			var p_dimensions_array = $$('body'); 
			var p_height = p_dimensions_array[0].getHeight()+30;//Höhe der Seite (inkl. Fix für FF)
			var p_width = p_dimensions_array[0].getWidth();		//Breite der Seite
			var i_height = 0;									//Höhe des Bildes
			var i_width = 0;									//Breite des Bildes
			var gallerypath = '';								//url der galerie
			var galleryid = 0;									//id der galerie

			actualItem.childElements().each(function(item) {
				if(item.nodeName=='IMG' && item.hasClassName('large')) {
					src = item.readAttribute('src');
					alt = item.readAttribute('alt');
					download = item.readAttribute('rel');
					i_height = item.getHeight();
					i_width = item.getWidth();
					
					
					gallerypath = item.readAttribute('name');
					
					var pos = gallerypath.indexOf('|')
					galleryid = gallerypath.substr(pos+1);
					gallerypath = gallerypath.substring(0, pos);
				}
			});

			me.lightboxImg.writeAttribute('src', src);
			me.lightboxImg.writeAttribute('alt', alt);
			me.lightboxTxt.update(alt);
			me.lightboxDL.writeAttribute('href', download);
			
			var actualLink = String(document.location);
			var actualLinkHash = String(document.location.hash);
			if(actualLinkHash.length>0) {
				actualLink = actualLink.replace(actualLinkHash,'');
			}

			var image_id = actualItem.readAttribute('id');
			image_id = image_id.replace("img", "");
			image_id = parseInt(image_id);

			me.lightboxDeepLink.update(actualLink+'#'+image_id);
			me.lightboxGalleryLink.writeAttribute('href', gallerypath);

			me.buttonPrev.writeAttribute('rel', ( (rel-1>=1) ? rel-1 : 1));
			me.buttonNext.writeAttribute('rel', ( (rel+1<=me.galleryitems.length) ? rel+1 : me.galleryitems.length));
			
			
			var previousId = galleryid;
			var previousItem = me.galleryitems[rel-2];
			if (typeof(previousItem) != 'undefined') {
				previousItem.childElements().each(function(item) {
					if(item.nodeName=='IMG' && item.hasClassName('large')) {
						var previousgallerypath = item.readAttribute('name');
						var previouspos = previousgallerypath.indexOf('|')
						previousId = previousgallerypath.substr(previouspos+1);
					}
				});
			}


			var nextId = galleryid;
			var nextItem = me.galleryitems[rel];
			if (typeof(nextItem) != 'undefined') {
				nextItem.childElements().each(function(item) {
					if(item.nodeName=='IMG' && item.hasClassName('large')) {
						var nextgallerypath = item.readAttribute('name');
						var nextpos = nextgallerypath.indexOf('|')
						nextId = nextgallerypath.substr(nextpos+1);
					}
				});
			}
			
			
			
			if(previousId != galleryid || rel-1<1) {
				me.buttonPrev.hide();
			} else {
				me.buttonPrev.show();
			}

			if(nextId != galleryid || rel+1>me.galleryitems.length) {
				me.buttonNext.hide();
			} else {
				me.buttonNext.show();
			}
			
			me.lightbox.style.height = (v_height>p_height ? v_height : p_height)+'px';
			me.canvas.style.height = (v_height>p_height ? v_height : p_height)+'px';
			
			me.lightbox.style.width = v_width+'px';
			me.canvas.style.width = v_width+'px';
			me.lightboxImgBox.style.width = i_width+'px';
			me.content.style.width = i_width+'px';
			
			me.content.style.top	= ((v_height/2)-(i_height/2)-35)+'px';
			me.content.style.left	= ((v_width/2)-(i_width/2))+'px';
			
			return true;
		}
	},
	
	hide: function(event) {
		Event.stop(event);
		
		Effect.BlindUp(me.content, { duration: 0.3 });
		Effect.Fade(me.canvas, {
			from: 0.8,
			to: 0,
			duration: 0.8,
			afterFinish: (function () {
				me.lightbox.style.height = '1px';
			})
		});
	},
	
	prev: function(event) {
		Event.stop(event);
		
		var rel = parseInt(this.readAttribute('rel'));
		me.show(rel);
	},
	
	next: function(event) {
		Event.stop(event);
		
		var rel = parseInt(this.readAttribute('rel'));
		me.show(rel);
	}
});
*/