var Imagegal = new Class({

	createBrowser: function(){
		buttonsList = new Element('ul');
		prevButton = new Element('li', {
			'class': 'prev',
			'html': '<img src="fileadmin/templates/smmp/images/image_gal_left.gif" />',
			'events': {
				'click': function(){
						this.prevPage();
				}.bind(this)
			}
		});
		prevButton.inject(buttonsList);
		divider = new Element('li', {
			'html': '<img src="fileadmin/templates/smmp/images/image_gal_trenner_vert.png" />'
		});
		divider.inject(buttonsList);
		nextButton = new Element('li', {
			'class': 'next',
			'html': '<img src="fileadmin/templates/smmp/images/image_gal_right.gif" />',
			'events': {
				'click': function(){
						this.nextPage();
				}.bind(this)
			}
		});
		nextButton.inject(buttonsList);
		
		buttonsList.inject($(this.rootelement).getElement('.imagegal-browser'));
	
	
		pageList = new Element('ol');
		var i=0;
		for(i = 0; i < this.images.length; i++){
			page = new Element('li', {
				'html': (i+1),
				'rel': i,
				'events': {
					'click': function(event){
						this.toPage(event.target.getProperty('rel'));
					}.bindWithEvent(this)
				}
			});
			page.inject(pageList);
		
		}
		pageList.inject($(this.rootelement).getElement('.imagegal-browser'));
	
	},
	
	nextPage: function(){
		if((this.currentPage+1) >= this.images.length){
			this.toPage(0);
		} else {
			this.toPage(this.currentPage+1);
		}
	},
	
	prevPage: function(){
		if(this.currentPage < 1){
			this.toPage((this.images.length-1));
		} else{
			this.toPage(this.currentPage-1);
		}
	},
	
	toPage: function(pageNumber){
		if(this.images[pageNumber].getElement('div.imagegal-image-content').get('text') != ''){
			$('content').set('html', this.images[pageNumber].getElement('div.imagegal-image-content').get('html'));
		} else {
			$('content').set('html', this.rootelement.retrieve('origcontent'));
		}
		
		this.images.setStyle('display','none');
		this.images[pageNumber].setStyle('display','block');
		this.currentPage = parseInt(pageNumber);
		browserPages = $(this.rootelement).getElements('.imagegal-browser ol li');
		browserPages.removeClass('act');
		browserPages[pageNumber].addClass('act');
	},
	
	initialize: function(rootelement){
		this.rootelement = rootelement;
		this.rootelement.store('origcontent', $('content').get('html'));
		this.images = this.rootelement.getElements('.imagegal-image');
		if(this.images.length < 1){
			return false;
		} else{
			this.currentPage = 0;
			this.rootelement.getElements('.imagegal-hotspot').addEvents({
				    'mouseover': function(){
						position = this.getPosition(this.getParent().getParent());
						tip = new Element('div', {
							'class': 'tip-wrap',
							'id': 'image-gal-tip',
							'styles': {
								left: position.x,
								top: position.y
							}
						});
						tipText = new Element('div', {
							'class': 'tip-text',
							'html': this.getProperty('rel')							
						});
						tipTitle = new Element('div', {
							'class': 'tip-title',
							'html': this.getProperty('title')						
						});
						
						tip.adopt([tipTitle, tipText]);
						tip.inject(this, 'after');	
						
				    },
				    'mouseout': function(){
				        $('image-gal-tip').destroy();
				    }
			});
			
			if(this.images.length > 1){
				this.createBrowser();
			}
			this.toPage(0);
			return true;
			
			
		}
	
	}

});