var PhotoScroll = {
	Load: function () {
		var siteName = document.getElementById('sps_sitename');
		var siteID = document.getElementById('sps_siteid');
		var topPics = document.getElementById('sps_content_top_pics');

		if (topPics != null && siteName != null && siteID != null && siteName.innerHTML != "" && siteID.innerHTML != "") {
			SPSTools.Call('Content.aspx', 'PhotoScroll', { site: siteName.innerHTML, siteID: siteID.innerHTML }, function (data) {
				topPics.innerHTML = data;
				PhotoScroll.Setup();
			});
		}
	},

	totalWidth: 0,
	viewWidth: 0,
	photoLeft: 0,
	photoList: null,
	prevLink: null,
	nextLink: null,

	Setup: function () {
		this.photoList = $('#photoScrollPhotos');

		this.prevLink = $('#photoScroll div.prev');
		this.nextLink = $('#photoScroll div.next');

		this.prevLink.click(function () { PhotoScroll.Click('prev'); });
		this.nextLink.click(function () { PhotoScroll.Click('next'); });

		//Get the total width of all the pictures with their margins (calculated on the server).
		this.totalWidth = parseInt(this.photoList.attr('totalWidth'));
		this.viewWidth = $('#sps_content_top_pics').width();

		if (this.totalWidth > this.viewWidth) {
			this.nextLink.show();
		}
	},

	Click: function (dir) {
		var delta = Math.floor(this.viewWidth * 0.66);

		if (dir == 'next')
			this.photoLeft -= delta;
		else
			this.photoLeft += delta;

		if (this.photoLeft >= 0) {
			this.photoLeft = 0;
			this.nextLink.show()
			this.prevLink.hide();
		}
		else {
			var maxLeft = -(this.totalWidth - this.viewWidth);

			if (this.photoLeft <= maxLeft) {
				this.photoLeft = maxLeft;
				this.nextLink.hide()
			}
			else {
				this.nextLink.show()
			}

			this.prevLink.show();
		}

		this.photoList.animate({ left: this.photoLeft }, 1000, 'easeInOutCubic');
	}
}