var ImageScroller = new Class({
	useCSSAnim: null,
	baseElement: null,
	currentPage: null,
	options: {
		
	},
	
	/* super classes */
	Implements:  [ Options ],
	
	initialize: function(element, prevButton, nextButton, options) {
		this.setOptions(options);
		
		this.baseElement = element;
		this.verifyCapabilities();
		
		this.currentPage = 0;
		
		// set up CSS for 
		if (this.useCSSAnim) {
			var scrollpane = this.baseElement.getElements(".scrollpane")[0];
			scrollpane.setStyle(this.useCSSAnim.stylePrefix + "transition-properties", this.useCSSAnim.stylePrefix + "transform");
			scrollpane.setStyle(this.useCSSAnim.stylePrefix + "transition-duration", "0.5s");
			scrollpane.setStyle(this.useCSSAnim.stylePrefix + "backface-visibility", "hidden");
		}
		
		
		this.updatePager();
	},
	
	verifyCapabilities: function() {
		if ((Browser.safari || Browser.chrome) && document.body.getStyle("-webkit-transform") != null && document.body.getStyle("-webkit-transition") != null ) {
			this.useCSSAnim = {stylePrefix: "-webkit-"};
		} else if ((Browser.firefox) && document.body.getStyle("-moz-transform") != "" && document.body.getStyle("-moz-transition-property") != ""){
			this.useCSSAnim = {stylePrefix: "-moz-"};
		} 
	},
	
	nextPage: function() {
		var newPage = this.currentPage + 1;
		if (newPage >= this.getTotalPages()) {
			return false;
		}
		this.setCurrentPage(newPage);
	},
	
	prevPage: function() {
		var newPage = this.currentPage - 1;
		if (newPage < 0) {
			return false;
		}
		this.setCurrentPage(newPage);
	},
	
	updatePager: function() {
		var pageSize = $("lightboxScrollerPane").getSize().y;
		var totalPages = $$("#lightboxScrollerPane img").length;
		var currentPage = Math.round(this.getScrollPosition() / -pageSize) + 1;
		
		if (totalPages > 1) {
			$("lightboxPager").set("html", currentPage + "/" + totalPages)
		} else if ($("lightboxPager").getStyle("display") != "none") {
			$("lightboxPager").setStyle("display", "none");
		}
	},
	
	getTotalPages: function() {
		return this.baseElement.getChildren(".scrollpane")[0].getChildren("div").length;
	},
	
	getCurrentPage: function() {
		return this.currentPage;
		/*
		var closestPage = null;
		var distance = null;
		var divs = this.baseElement.getChildren(".scrollpane")[0].getChildren("div");
		for (var i = 0; i < divs.length; i++) {
			if (closestPage === null) {
				closestPage = i;
				distance = Math.abs(this.getPosition(divs[i]).x - this.getScrollPosition());
				//distance = Math.abs(divs[i].getPosition(this.baseElement).x);
				console.log(distance);
			} else {
				var dist = Math.abs(this.getPosition(divs[i]).x - this.getScrollPosition());
				//var dist = Math.abs(divs[i].getPosition(this.baseElement).x);
				console.log(dist);
				if (dist < distance) {
					distance = dist;
					closestPage = i;
				}
			}
		}
		return closestPage;
		*/
	},
	updatePager: function() {
		this.baseElement.getElements(".controls .page").set("html", (this.currentPage + 1) + "/" + this.getTotalPages());
	},
	
	setCurrentPage: function(page) {
		this.currentPage = page;  
		//var newPos = this.getPosition(this.baseElement.getChildren(".scrollpane > div")[page], this.baseElement.getChildren(".scrollpane")[0]).x;
		var newPos = this.baseElement.getChildren(".scrollpane > div")[page].getPosition(this.baseElement.getChildren(".scrollpane")[0]);
		this.setScrollPosition(newPos);
		
		// update the pager display
		console.log(this.baseElement.getElement(".control .page"));
		this.updatePager();
		
	},
	
	setScrollPosition: function(pos) {
		if (this.useCSSAnim) { 
			var matrix = "matrix(1, 0, 0, 1, -" + pos.x + ", -" + pos.y + ")";
			this.baseElement.getChildren(".scrollpane")[0].setStyle(this.useCSSAnim.stylePrefix + "transform", matrix);
			if (this.useCSSAnim.trackPositionManually) {
				this.useCSSAnim.scrollPosition = pos;
			}
		} else {
			this.baseElement.getChildren(".scrollpane")[0].setStyle("left", -pos.x);
			this.baseElement.getChildren(".scrollpane")[0].setStyle("top", -pos.y);
		} 
	},
	
	getScrollPosition: function() {
		if (this.useCSSAnim) {
			if (this.useCSSAnim.trackPositionManually) {
				return this.useCSSAnim.scrollPosition;
			}
			
		} 
		return this.getPosition(this.baseElement.getChildren(".scrollpane")[0], this.baseElement).x;
	}, 
	

	

	getPosition: function(element, relative) {
		// for use with Mootools 1.3.1, fixes issue with iOS
		// use instead of Element.getPosition() for this.origin
		if (element == document.body) return {x: 0, y: 0};
		var offset = getOffsets(element),
			scroll = element.getScrolls();
		var position = {
			x: offset.x - scroll.x,
			y: offset.y - scroll.y
		};

		if (relative && (relative = document.id(relative))){
			var relativePosition = relative.getPosition();
			
			var leftBorder = relative.getStyle("border-left-width").toInt();
			var topBorder = relative.getStyle("border-top-width").toInt();
			return {x: position.x - relativePosition.x - leftBorder, y: position.y - relativePosition.y - topBorder};
		}
		return position;
		
		function getOffsets(element) {
			var bound = element.getBoundingClientRect(),
				html = document.id(element.getDocument().documentElement),
				htmlScroll = html.getScroll(),
				elemScrolls = element.getScrolls(),
				isFixed = (Element.getComputedStyle(element, 'position') == 'fixed');

			return {
				x: bound.left.toInt() + elemScrolls.x + ((isFixed) ? 0 : htmlScroll.x) - html.clientLeft,
				y: bound.top.toInt()  + elemScrolls.y + ((isFixed) ? 0 : htmlScroll.y) - html.clientTop
			};
		}
	
	}
});