if (Garmin == undefined) var Garmin = {};
if (Garmin.Foto == undefined) Garmin.Foto = {};

/** Extends GControl to create a paging control for scrolling 
 * through large photo sets.
 */
Garmin.Foto.PageControl = Class.create();
Garmin.Foto.PageControl.prototype = Object.extend(new GControl(), {

	/** Creates the DIVs representing this paging scroller.
	 * initialize is called twice in different contexts:
	 * 1) by the prototype constructor method (map should be null)
	 * 2) by Google Maps when map renders (map will not be null)
	 */
	initialize: function(map, totalPages, pageChangeCallback, labelText) {
		if (map) {
			var container = document.createElement("div");
			container.style.float = "left"; 
			//container.style.width = "538px";
			container.style.clear = "both";
			var closure_ = this;
			this.label = document.createElement("span");
			this._setWidgetStyle(this.label, "default", true);
			container.appendChild(this.label);
			this.label.innerHTML = this.labelText;
			this.prevButton = document.createElement("span");
			container.appendChild(this.prevButton);
			this.prevButton.innerHTML = "«"; //» left angle quote
			GEvent.addDomListener(this.prevButton, "click", function() {
				closure_.setPage(closure_.currentPage-1);
			});
			this.firstButton = document.createElement("span");
			container.appendChild(this.firstButton);
			this.firstButton.innerHTML = "1";
			GEvent.addDomListener(this.firstButton, "click", function() {
				closure_.setPage(0);
			});
			this.leftEllipsis = document.createElement("span");
			this._setWidgetStyle(this.leftEllipsis, "default", true);
			container.appendChild(this.leftEllipsis);
			this.leftEllipsis.innerHTML = "…";
			for(var i=0;i<5;i++) {
				var btn_ = document.createElement("span");
				//this._setButtonStyle(btn_, true);
				container.appendChild(btn_);
				this.middleButtons[i] = btn_;
				btn_.appendChild(document.createTextNode(""+(i+2)));
				btn_.currentButtonPage = i+1;
				GEvent.addDomListener(btn_, "click", function() {
			    	closure_.setPage(this.currentButtonPage);
				});
			}
			this.rightEllipsis = document.createElement("span");
			this._setWidgetStyle(this.rightEllipsis, "default", true);
			container.appendChild(this.rightEllipsis);
			this.rightEllipsis.innerHTML = "&#8230;";
			this.lastButton = document.createElement("span");
			container.appendChild(this.lastButton);
			this.lastButton.innerHTML = "10";
			GEvent.addDomListener(this.lastButton, "click", function() {
				closure_.setPage(closure_.totalPages-1);
			});
			this.nextButton = document.createElement("span");
			container.appendChild(this.nextButton);
			this.nextButton.innerHTML = "&raquo;"; //&raquo; right angle quote
			GEvent.addDomListener(this.nextButton, "click", function() {
				closure_.setPage([closure_.currentPage+1, closure_.totalPages-1].min());
			});
			this.reset(0,this.totalPages);
			map.getContainer().appendChild(container);
			return container;
		} else {
			this.totalPages = totalPages;
			this.pageChangeCallback = pageChangeCallback;
			this.labelText = labelText != null ? labelText : bundle_photos.photos;
			this.currentPage = 0;
			this.label = null;
			this.prevButton = null;
			this.firstButton = null;
			this.leftEllipsis = null;
			this.middleButtons = new Array();
			this.rightEllipsis = null;
			this.lastButton = null;
			this.nextButton = null;
		}
	},

	setPageChangeCallback: function(pageChangeCallback) {
		this.pageChangeCallback = pageChangeCallback;
	},
	
	/** set current page and execute setPageCallback to alert app of page change */
	setPage: function(page) {
		if (page<0) page = 0;
		if (page>this.totalPages-1) page = this.totalPages-1;
		if (this.currentPage != page) {
			this.currentPage = page;
			this.reset(page, this.totalPages);
			log("setPage("+page+")");
			this.pageChangeCallback(page);
		}
	},

	/** Sets the proper CSS for the given button element. */
	reset: function(current, total) {
		this.prevButton.style.display = total<8 ? "none" : "";
		this._setButtonStyle(this.prevButton, false, current==0);
		this.firstButton.style.display = total<1 ? "none" : "";
		this._setButtonStyle(this.firstButton, current==0);
		this.leftEllipsis.style.display = (total<8 || current<4) ? "none" : "";
		var minButtonPageNumber = current-2;
		if (minButtonPageNumber>total-6)
			minButtonPageNumber = total-6;
		if (minButtonPageNumber<1)
			minButtonPageNumber = 1;
		for(var i=0;i<5;i++) {
			var dsply = (i+3)>total ? "none" : "";
			this.middleButtons[i].currentButtonPage = minButtonPageNumber+i;
	  		this._setButtonStyle(this.middleButtons[i], minButtonPageNumber+i==current);
			this.middleButtons[i].innerHTML = ""+(minButtonPageNumber+i+1);
			this.middleButtons[i].style.display = dsply;
		}
		this.rightEllipsis.style.display = (total<8 || current+5>total) ? "none" : ""; 
		this.lastButton.style.display = total<2 ? "none" : ""; 
		this.lastButton.innerHTML = ""+total;
		this._setButtonStyle(this.lastButton, current+1==total);
		this._setButtonStyle(this.nextButton, false, current+1==total);
		this.nextButton.style.display = total<8 ? "none" : "";
		this.currentPage = current;
		this.totalPages = total;
	},

	/** Sets the proper CSS for the given button element. */
	_setButtonStyle: function(button, current, grayed) {
		this._setWidgetStyle(button, (current || grayed) ? "not-allowed" : "pointer", false, current, grayed);
	},
	
	/** Sets the proper CSS for the given button element. */
	_setWidgetStyle: function(widget, cursor, noBorder, reverse, grayed) {
		widget.style.border = noBorder ? "" : "1px solid #000000";  //#005296
		widget.style.backgroundColor = reverse ? "#000000" : "white"; 
		widget.style.margin = "0 1px"; 
		widget.style.padding = "2px 2px"; 
		widget.style.textDecoration = "none"; 
		widget.style.lineHeight = "200%";
		widget.style.color = grayed ? "#999999" : (reverse ? "white" : "#000000");
		widget.style.textAlign = "center";
		widget.style.cursor = cursor ? cursor : "default"; //"not-allowed", "pointer", "default";
	},
	
	/** By default, the control will appear just to the left of the Pan/Zoom control in the top left corner of the map. */
	getDefaultPosition: function() {
	  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(90, 5));
	}

});