dojo.declare('abstractSlider', null,
{

	divName: 			'',
	div: 				null,
	contentDivArray: 	null,
	pageSize:			0,
	pageCount:			0,
	maxPosition:		0,
	
	clickable:			1,
	animation:			null,

	pageStatusDiv:		null,
	pageStatusItemsPerPage: 0,

	constructor: function(divName,previousButtonDivName,nextButtonDivName)
	{

		// Collect Div Information
		this.divName = divName;
		this.div = dojo.byId(this.divName);
		
		this.contentDivArray = dojo.query('.sliderpage', this.div);

		// Collect Paging Information		
		this.pageSize = this.getPageSize();
		this.pageCount = this.contentDivArray.length;
		this.maxPosition = -1 * this.pageSize * this.pageCount;

		// Set the Container Width/Height to Correct Size
		this.setDivSize(this.pageSize * (this.pageCount + 1));
		
		// Duplicate First Content <div> and append to End
		newDiv = this.contentDivArray[0].cloneNode(true);
		this.div.appendChild(newDiv);
		
		// Add Onclick Handler to Prev and Next Buttons
		dojo.byId(previousButtonDivName).onclick = dojo.hitch(this,this.movePrevious);
		dojo.byId(nextButtonDivName).onclick = dojo.hitch(this,this.moveNext);
		
	},

	showPageStatus: function(pageStatusDivName, itemsPerPage){
		this.pageStatusDiv = dojo.byId(pageStatusDivName);
		this.pageStatusItemsPerPage = itemsPerPage;
	},

	updatePageStatus: function(margin){
		if (this.pageStatusDiv){
			var currentPage = (-1 * margin / this.pageSize) % this.pageCount;
			var startItem = (currentPage * this.pageStatusItemsPerPage) + 1;
			var endItem = ((currentPage + 1) * this.pageStatusItemsPerPage);
			var totalItems = this.pageCount * this.pageStatusItemsPerPage;
			this.pageStatusDiv.innerHTML = startItem + '-' + endItem + ' of ' + totalItems;
		}	
	},

	setClickable: function(){ this.clickable = 1; },
	
	setUnclickable: function(){ this.clickable = 0; },
	
	isClickable: function(){ return this.clickable; },	

	movePrevious: function()
	{
		if (this.isClickable()){
        	var theMargin = this.getMargin();
        	if (theMargin >= 0){
        		this.setMargin(this.maxPosition);
        		theMargin = this.maxPosition;
        	}
        	this.scrollTo(theMargin + this.pageSize);
			this.updatePageStatus(theMargin + this.pageSize);
		}
	},

	moveNext: function()
	{
		if (this.isClickable()){
        	var theMargin = this.getMargin();
        	if (theMargin <= this.maxPosition){
				this.setMargin(0);
        		theMargin = 0;
        	}
        	this.scrollTo(theMargin - this.pageSize);
			this.updatePageStatus(theMargin - this.pageSize);
		}
	},
	
	getPageSize: function(){ alert('must be overridden'); },
	getMargin: function(){ alert('must be overridden'); },
	setMargin: function(){ alert('must be overridden'); },
	scrollTo: function(){ alert('must be overridden'); },
	setDivSize: function(){ alert('must be overridden'); }
	
});


dojo.declare('horizontalSlider', abstractSlider,
{

	setDivSize: function(amount)
	{
		this.div.style.width = amount + 'px';
	},

	getPageSize: function()
	{
		return parseInt(this.contentDivArray[0].style.width);
	},

	getMargin: function()
	{
		if (this.div.style.marginLeft == ''){
			this.div.style.marginLeft = '0px';
		}
    	return parseInt(this.div.style.marginLeft);
	},

	setMargin: function(position)
	{
		this.div.style.marginLeft = parseInt(position) + 'px';
	},

	scrollTo: function(value)
	{
		this.setUnclickable();
    	this.animation = dojo.animateProperty({
    	    node: this.div,
    	    properties: { marginLeft: value },
			onEnd: dojo.hitch(this,this.setClickable)
    	}).play();
   	}
});

dojo.declare('verticalSlider', abstractSlider,
{
	setDivSize: function(amount)
	{
		this.div.style.height = amount + 'px';
	},

	getPageSize: function()
	{
		return parseInt(this.contentDivArray[0].style.height);
	},

	getMargin: function()
	{
		if (this.div.style.marginTop == ''){
			this.div.style.marginTop = '0px';
		}
    	return parseInt(this.div.style.marginTop);
	},

	setMargin: function(position)
	{
		this.div.style.marginTop = parseInt(position) + 'px';
	},

	scrollTo: function(value)
	{
		this.setUnclickable();
    	this.animation = dojo.animateProperty({
    	    node: this.div,
    	    properties: { marginTop: value },
			onEnd: dojo.hitch(this,this.setClickable)
    	}).play();
   	}
});