if (typeof Effect == 'undefined')
  throw("You must have the script.aculo.us library to use this accordion");

var Gallery = Class.create({

    initialize: function(id, settings) {
        if(!$(id)) throw("Attempted to initalize gallery with id: "+ id + " which was not found.");
		this.settings=Object.extend({
			itemsPerPage : 2,
			animationSpeed : 'normal', /* fast/normal/slow */
			navigation : 'top',  /* top/bottom/both */
			of_label: '', /* The content in the page "1 of 2" */
			previous_title_label: 'Previous page', /* The title of the previous link */
			next_title_label: 'Next page', /* The title of the next link */
			previous_label: 'Previous', /* The content of the previous link */
			next_label: 'Next' /* The content of the next link */
		}, settings);
		
		this.currentPage = 1;
		this.itemWidth = 0;
		this.itemHeight = 0;
		this.galleryWidth = 0;
		this.pageCount = 0;
		this.animated = false;
		this.gallery = $(id);
		// Check if we need the gallery
		//alert();
		if(this.gallery.immediateDescendants().length > this.settings.itemsPerPage) {		
			// Set the number of pages
			
			this.pageCount = Math.ceil(this.gallery.immediateDescendants().length / this.settings.itemsPerPage);
			
			// Format the gallery properly
			this._formatGallery();
			
			// Build and display the nav
			this._applyNav();
			
			// Display the proper paging
			this._displayPaging();
			this.currentPage = 1;
			
			/**/
		};
	},
		
	_formatGallery: function() {
		var it=this.gallery.down("li:first");
		this.itemWidth = it.getWidth();

		this.itemMargin = parseFloat(it.getStyle('margin-right')) + parseFloat(it.getStyle('margin-left')) + parseFloat(it.getStyle('padding-left')) + parseFloat(it.getStyle('padding-right')) ;
		this.itemHeight = it.getHeight() + parseFloat(it.getStyle('margin-top')) + parseFloat(it.getStyle('margin-bottom')) + parseFloat(it.getStyle('padding-top')) + parseFloat(it.getStyle('padding-bottom'));
		this.galleryWidth = (this.itemWidth + this.itemMargin) * this.settings.itemsPerPage - parseFloat(it.getStyle('margin-right')); 

		// We don't want the margin of the last item, that's why we remove it.
		this.gallery.setStyle({
			'width': this.galleryWidth+'px',
			'height': this.itemHeight+'px',
			'overflow': 'hidden',
			'position': 'relative',
			'clear': 'left', 
			'background-color':'#EE00EE'	
		});
		
		var x=this;
		this.gallery.getElementsBySelector('li').each(function(name, index){
			var lft=(index * (x.itemWidth + x.itemMargin));

			name.setStyle({
				'position':'absolute',
				'top':'0px',
				'left':lft+'px'
			
			});
			
		});	
		this.gallery.wrap('div', { 'class': 'prettyGallery', 'id': 'wrapper-div' })
		this.gallery.addClassName('prettyGallery');
		/**/
	}

	
	,
	
	prettyGalleryPrevious: function(caller) {
		var x=this;
		// Make sure not to double animate, and not animate of the button is disabled
		if(this.animated || (caller).hasClassName('disabled')) return;
		this.animated = true;

		this.gallery.getElementsBySelector('li:lt('+(this.currentPage * this.settings.itemsPerPage)+')').each(function(name, index){
			new Effect.Move(name, {x: (x.galleryWidth+x.itemMargin), mode: 'relative',afterFinish:function(){x.animated=false;}});
		
		});

		this.gallery.getElementsBySelector('li:gt('+ ((this.currentPage * this.settings.itemsPerPage) - 1) +')').each(function(name, index){
			new Effect.Move(name, {x: (x.galleryWidth+x.itemMargin), mode: 'relative'});
		});
		x.currentPage--;
		x._displayPaging();
	},
	
	prettyGalleryNext: function(caller) {
		var x=this;
		// Make sure not to double animate, and not animate of the button is disabled
		if(this.animated || (caller).hasClassName('disabled')) return;
		this.animated = true;

		this.gallery.getElementsBySelector('li:lt('+(this.currentPage * this.settings.itemsPerPage)+')').each(function(name, index){
			new Effect.Move(name, {x: -(x.galleryWidth+x.itemMargin), mode: 'relative',afterFinish:function(){x.animated=false;}});
		
		});

		this.gallery.getElementsBySelector('li:gt('+ ((this.currentPage * this.settings.itemsPerPage) - 1) +')').each(function(name, index){
			new Effect.Move(name, {x: -(x.galleryWidth+x.itemMargin), mode: 'relative'});
		});
		x.currentPage++;
		x._displayPaging();
	},
	
	_applyNav: function() {
		
		var template = '';
		template +='<ul class="prettyNavigation">';
		template += '<li class="prv"><a href="#" id="prev-link" title="'+this.settings.previous_title_label+'">'+this.settings.previous_label+'</a></li>';
		template += '<li><span class="current"></span>'+this.settings.of_label+'<span class="total"></span></li>';
		template += '<li class="nxt"><a href="#" id="next-link" title="'+this.settings.next_title_label+'">'+this.settings.next_label+'</a></li>';
		template += '</ul>';



		if(this.settings.navigation=='top'){
				this.gallery.insert({before: template});
		}else if(this.settings.navigation=='bottom'){
				this.gallery.insert({after: template});
		}else{
				this.gallery.insert({before: template});
				this.gallery.insert({after: template});
		};
	
		// Adjust the nav to the gallery width
		var theNav = this.gallery.up('div.prettyGallery:first').down('ul.prettyNavigation');
		this.galleryBorderWidth = parseFloat(theNav.getStyle('border-left-width')) + parseFloat(theNav.getStyle('border-right-width'));
		theNav.setStyle({'width': (this.galleryWidth - this.galleryBorderWidth)+'px'});
		var x=this;
		var w=x.galleryWidth - x.galleryBorderWidth - parseFloat(theNav.down('li').getWidth()) - parseFloat(theNav.down('li').next().next().getWidth());		
		theNav.down('li').next().setStyle({'width': w+'px'});

		// Apply the functions to the buttons
		theNav.down('li.prv a').observe('click',function(e){
			e.stop();											 
			x.prettyGalleryPrevious(this);
			return false;
		});

		theNav.down('li.nxt a').observe('click',function(e){
			e.stop();
			x.prettyGalleryNext(this);
			return false;
		});	
	},
	
	_displayPaging: function(x) {
		var cg = this.gallery.up('div.prettyGallery:first');
		//alert(this.gallery.up().down('ul.prettyNavigation span.current'))
		//cg.down('ul.prettyNavigation span.current').replace("");
		//cg.down('ul.prettyNavigation span.total').replace("");
		//alert('')	
		// Make sur all the links are enabled
		cg.down('ul.prettyNavigation li.nxt a').removeClassName('disabled');
		cg.down('ul.prettyNavigation li.prv a').removeClassName('disabled');
		// Display the proper nav
		if(this.currentPage == 1){
			// Hide the previous button
			cg.down('ul.prettyNavigation li.prv a').addClassName('disabled');
		} else if(this.currentPage == this.pageCount) {
			// Hide the next button
			cg.down('ul.prettyNavigation li.nxt a').addClassName('disabled');
		};
	}
/**/	
});