var SlideBox = new Class({
	
	initialize: function (el, options) {
		
		el = this.element = $(el);
		var viewport = this.viewport = new Element('div').injectAfter(el);
		var container = this.container = new Element('div');
		
		this.currentPage = 0;
		
		//Options
		options = options || {};
		if (!options.width) {
			options.width = el.getStyle('width').toInt();
		}
		if (!options.itemWidth) {
			options.itemWidth = el.getFirst().getSize().x + el.getFirst().getStyle('margin-right').toInt() || 1;
		}
		if (!options.itemsPerPage) {
			options.itemsPerPage = Math.round(viewport.getSize().x / options.itemWidth);
			if (options.itemsPerPage < 1) {
			    options.itemsPerPage = 1;
			}
		}
		if (options.showArrows == null) {
		    options.showArrows = true;
		}
		if (options.showPageNumbers == null) {
		    options.showPageNumbers = true;
		}
		if (!options.color) {
		    options.color = '';
		}
		
		this.pages = Math.ceil(el.getChildren().length/options.itemsPerPage);
		
		
		width = this.width_ = options.width;
		this.itemsPerPage = options.itemsPerPage;
		
		
		viewport.setStyles({
			'display': 'block',
			'overflow': 'hidden',
			'width': width
		});
		
		container.setStyles({
			'width':width * (this.element.getChildren().length + 1)
		});
		el.setStyles({
			'display': 'block',
			'overflow': 'hidden',
			'margin': 0,
			'padding': 0,
			'float': 'left'
		});
		
		
		el.injectInside(container);
		container.injectInside(viewport);
		
		this.totalWidth_ = el.getSize()['x'];
		
		//Paginator
		var paginator = new Element('div').addClass('paging ' + options.color).setStyle('width', width);
		if (options.showArrows) {
			this.nextButton = new Element('a', {'href': 'javascript://'}).addClass('nextpreviousbutton').addClass('next').addClass(options.color).injectInside(paginator).addEvent('click', this.next.bind(this));
			this.prevButton = new Element('a', {'href': 'javascript://'}).addClass('nextpreviousbutton').addClass('previous').addClass(options.color).injectInside(paginator).addEvent('click', this.previous.bind(this));
		}
		var pages = new Element('ul').injectInside(paginator);
		if (!options.showPageNumbers) {
			pages.setStyle('display', 'none');
		}
		var page;
		var pageButtons = [];
		
		if (this.pages <= 1 && this.element.getChildren().length <= this.itemsPerPage + 1) {
			return;
		}
		
		this.paginator = paginator;
		this.pageButtons = pageButtons;
		
		for (var i=0; i<this.pages; i++) {
			page = new Element('li');
			anchor = new Element('a', {'href':'javascript://'});
			anchor.addEvent('click', 
				(function(box, page){
					box.jump(page);
				}).pass([this, i])
			);
			anchor.set('text', (i+1));
			anchor.injectInside(page);
			page.injectInside(pages);
			pageButtons.push(page);
		}
		
		paginator.injectAfter(viewport);
		var activeImageId = this.getParameter('image');
		if (activeImageId) {
		    var activeChild = document.getElementById(activeImageId);
		    if (activeChild) {
		        this.goTo((activeChild.getPosition(this.element)['x']/options.width).toInt(), false);
		    }
		} else {
		    this.jump(0);
		}
		
		//Center Paging
		var pagesWidth = pages.getSize().x;
		pages.setStyles({
			left: (width - pagesWidth) * .5
		});
	},
	
	jump: function (page) {
		this.goTo(page, true);
	},
	
	goTo: function (page, enableTween) {
	    children = this.element.getChildren();
		
		child = this.element.getChildren()[this.itemsPerPage*page];
		x = child.getPosition(this.element)['x'] - child.getStyle('margin-left').toInt();
		if (enableTween) {
		    this.element.tween('margin-left', -x);
		} else {
		    this.element.setStyle('margin-left', -x);
		}

		if (this.pageButtons[this.currentPage]) {
		    this.pageButtons[this.currentPage].removeClass('active');
		    this.currentPage = page;
		    this.pageButtons[page].addClass('active');
		}
		
		if (page < 1) {
			this.prevButton.addClass('hidden');
		} else {
			this.prevButton.removeClass('hidden');
		}
		
		if (page >= this.pages - 1) {
			this.nextButton.addClass('hidden');
		} else {
			this.nextButton.removeClass('hidden');
		}
	},
	
	expand: function () {
		this.container.setStyle('width', this.width_);
		this.paginator.setStyle('display', 'none');
	},
	
	next: function () {
		this.jump(Math.min(this.currentPage + 1, this.pages - 1));
	},
	
	previous: function () {
		this.jump(Math.max(this.currentPage - 1, 0));
	},
	
	getParameter: function (name) {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
		if ( results == null ) {
            return "";
		} else {
            return results[1];
    }
	}
});

SlideBox.init = function (element) {
	var data = fetchData(element);
	var thumbList = element.getElement('.thumbnailList');

	Overlay.assignImage(element.getElements('a.gallery_image_boxed'), {
		maxwidth: data.lightboxMaxWidth || null,
		maxheight: data.ligthboxMaxHeight || null
	});

	if (data.hasSlider) {
		new SlideBox(thumbList, {
			showArrows: data.showArrows, 
			showPageNumbers: data.showPageNumbers,
			width: data.sliderWidth,
			color: data.color
		});
	}
}