var ShareLink = Class.create({
	initialize : function(key, title, link, iconUrl) {
		this.key = key;
		this.title = title;
		this.link = link;
		this.iconUrl = iconUrl;
	}
});

var ShareBar = Class.create({
	initialize : function(shareLinks, colCount, rowCount, cellWidth) {
		this.shareLinks = shareLinks;
		if (colCount) {
			this.colCount = colCount;
		}
		if (rowCount) {
			this.rowCount = rowCount;
		}
		if (cellWidth) {
			this.cellWidth = cellWidth;
		} 
		if (this.colCount > shareLinks.length) {
			this.colCount = shareLinks.length;
		}
		this.view = new Element("div");
		this.view.style.position= "absolute";
		this.view.style.top = 0;
		this.view.style.left = 0;
		this.currPage = this.createPage(0);
		this.view.insert(this.currPage);
		this.vpwidth = this.cellWidth * this.colCount;
		},
	cellWidth : 37,
	index : 0,
	scrolling: false,
	vpwidth :0,
	colCount : 4,
	rowCount : 1, 
	trackLink : function(sl) {
		alert(sl.key);
	}, 
	createLink : function (sl) {
		if (!sl) {
			return;
		}
		var aTag = new Element("a", { target : sl.key, "class" : "share-link", href : sl.link, title : sl.title, id : "a_" + sl.key});
		aTag.insert(new Element("img", {"class" : "share-icon", "src" : sl.iconUrl}));
		aTag.onclick=function(event) {
			this.trackLink(sl);
		}.bind(this);
		return aTag;
	},
	createPage : function (index) {
		var aPage= new Element("div", {"class" : "sharePage"});
		aPage.style.position= "absolute";
		aPage.style.left= 0;
		aPage.style.top= 0;
		for (var row = 0; row < this.rowCount; row++) {
			var aRow= new Element("div", {"class" : "sharePageRow"});
			aPage.insert(aRow);
			for (var col = 0; col < this.colCount; col++) {
				aRow.insert(this.createLink(this.shareLinks[index % this.shareLinks.length]));
				index++;
			}
		}
		return aPage;
	},
	initViewport : function (elt) {
		elt.style.width = this.vpwidth + 'px';
		elt.insert(this.view);
	},
	scrollR : function () {
		if (!this.scrolling) {
			this.scrolling = true;
			var thisBar = this;
			var newIndex = this.index + (this.colCount * this.rowCount);
			if (newIndex >= this.shareLinks.length) {
				newIndex -= this.shareLinks.length;
			}
			var nPage = this.createPage(newIndex);
			nPage.style.left = this.vpwidth + 'px';
			this.view.insert(nPage);
			this.view.style.width = 2 * this.vpwidth + 'px';
			var effect = new Effect.Move(this.view, { x: -this.vpwidth, y: 0, queue: { position: 'end', scope: 'bar', limit: 1 },
					afterFinish: function() {
						thisBar.currPage.remove();
						thisBar.index = newIndex;
						thisBar.currPage = nPage;
						thisBar.currPage.style.left=0
						thisBar.view.style.left=0;
						thisBar.scrolling=false;
					}});
		}
	},
	scrollL : function () {
		if (!this.scrolling) {
			this.scrolling = true;
			var thisBar = this;
			var newIndex = this.index - (this.colCount * this.rowCount);
			if (newIndex < 0) {
				newIndex += this.shareLinks.length;
			}
			var nPage = this.createPage(newIndex);
			this.view.insert(nPage);
			this.currPage.style.left = this.vpwidth + 'px';
			nPage.style.left = 0;
			this.view.style.left = -this.vpwidth + 'px';
			this.view.style.width = 2 * this.vpwidth + 'px';
			var effect = new Effect.Move(this.view, { x: this.vpwidth, y: 0, queue: { position: 'end', scope: 'bar', limit: 1 },
					afterFinish: function() {
						thisBar.currPage.remove();
						thisBar.index = newIndex;
						thisBar.currPage = nPage;
						thisBar.scrolling=false;
					}});
		}
	}
});