// JavaScript Document
function Scroller ()
{
	// Reference to the containing DIV.
	this.container;
	// Holds the nav.
	this.scroller;
	this.scrollStep; // Number of items to scroll.
	this.SCROLL_SPEED = 1.5; // Seconds.
	// Nav buttons.
	this.l_leftBtn;
	this.r_rightBtn;
	this.div_leftBtn;
	this.div_rightBtn;
	this.LEFT_BTN_DIV_CSS;
	this.RIGHT_BTN_DIV_CSS;
	this.LEFT_BTN_SRC;
	this.RIGHT_BTN_SRC;
	this.BTN_PADDING = 3;
	this.MAX_BTN_SIZE = 26;
	this.LEFT_BTN_WIDTH = 11;
	this.LEFT_BTN_HEIGHT = 13;
	this.RIGHT_BTN_WIDTH = 11;
	this.RIGHT_BTN_HEIGHT = 13;
	this.LEFT_BTN_PADDING_LEFT = 0;
    this.LEFT_BTN_PADDING_RIGHT = 0;
    this.RIGHT_BTN_PADDING_LEFT = 0;
    this.RIGHT_BTN_PADDING_RIGHT = 0;
    // Masks the content.
	this.mask;
	this.MASK_TOP = 0;
	// Holds the contents.
	this.content;
	this.CONTENT_LEFT = 0;
	this.CONTENT_TOP = 0;
	// Tween values.
	this.tween;
	
	this.SHOW_BTN_LEFT = false;
	this.SHOW_BTN_RIGHT = false;
		

	this.createScroller = function (brandID_, containerID_, l_, t_, w_, h_, st_, 
	    btl_src, btr_src, bt_w, bt_h, btl_padl, btl_padr, btr_padr, btr_padl, btl_css, btr_css, showBtnLeft, showBtnRight )
	{
		
		this.MASK_LEFT_SHAD_SRC = "/common/images/1x1t.gif"; //"images/scroller_left_shadow.png";
		this.MASK_RIGHT_SHAD_SRC = "/common/images/1x1t.gif"; //"images/scroller_right_shadow.png";
		
		var potBtnSize = h_*.8;
		this.LEFT_BTN_WIDTH = this.RIGHT_BTN_WIDTH = bt_w;
		this.LEFT_BTN_HEIGHT = this.RIGHT_BTN_HEIGHT = bt_h;
		this.LEFT_BTN_SRC = btl_src;
	    this.RIGHT_BTN_SRC = btr_src;
        this.LEFT_BTN_PADDING_LEFT = btl_padl;
        this.LEFT_BTN_PADDING_RIGHT = btl_padr;
        this.RIGHT_BTN_PADDING_LEFT = btr_padr;
        this.RIGHT_BTN_PADDING_RIGHT = btr_padl;
        this.LEFT_BTN_DIV_CSS = btl_css;
        this.RIGHT_BTN_DIV_CSS = btr_css;
        
		this.MASK_LEFT = this.LEFT_BTN_WIDTH + 2*this.BTN_PADDING;
		this.MASK_PADDING = this.LEFT_BTN_WIDTH + this.RIGHT_BTN_WIDTH + 4*this.BTN_PADDING;
        
		this.scrollStep = st_;
		// Container
		this.container = document.getElementById(containerID_);
		// Scroller
		this.scroller = document.createElement('div');
		this.scroller.id = brandID_ + "Scroller";
		this.scroller.style.position = 'relative';
		this.scroller.style.left = l_+'0px';
		this.scroller.style.top = t_+'px';
		this.scroller.style.width = w_+'px';
		this.scroller.style.height = h_+'px';
		// Mask
		
		this.mask = document.createElement('div');
		this.mask.id = brandID_ + "ScrollerMask";
		this.mask.style.position = 'absolute';
		this.mask.style.left = this.MASK_LEFT+'px';
		this.mask.style.top = this.MASK_TOP+'px';
		this.mask.style.width = (w_ - this.MASK_PADDING > 0 ? w_ - this.MASK_PADDING : w_)+'px';
		this.mask.style.height = h_+'px';
		this.mask.style.overflow = 'hidden';
		
		// Content
		this.content = document.createElement('div');
		this.content.id = brandID_ + "ScrollerContent";
		this.content.style.position = 'absolute';
		this.content.style.left = this.CONTENT_LEFT+'px';
		this.content.style.top = this.CONTENT_TOP+'px';
		this.content.style.height = h_+'px';
		this.content.scrollIndex = 0;
		// Gradient masks.
		this.scrollerLeftShadow = this.createImage(this.MASK_LEFT_SHAD_SRC, this.MASK_LEFT, this.MASK_TOP, 5, h_);
		this.scrollerLeftShadow.setAttribute('id','SOL_ScrollerLeftShadow');
		this.scrollerRightShadow = this.createImage(this.MASK_RIGHT_SHAD_SRC, (w_-this.RIGHT_BTN_WIDTH-2*this.BTN_PADDING-5), 0, 5, h_);
		this.scrollerRightShadow.setAttribute('id','SOL_ScrollerRightShadow');

		// Scroll Buttons
		var btnL = (this.MASK_LEFT - this.LEFT_BTN_WIDTH) / 2;
		var btnT = (h_ - this.LEFT_BTN_HEIGHT) / 2;
		// Left Left-Button
		this.l_leftBtn = this.createButton(btnL, btnT, this.LEFT_BTN_WIDTH, this.LEFT_BTN_HEIGHT, null, this.LEFT_BTN_SRC);
		this.l_leftBtn.setAttribute('id',brandID_ + '_ScrollerLeftBtn');
		if (this.LEFT_BTN_PADDING_LEFT) this.l_leftBtn.style.marginLeft = this.LEFT_BTN_PADDING_LEFT + "px";
        if (this.LEFT_BTN_PADDING_RIGHT) this.l_leftBtn.style.marginRight = this.LEFT_BTN_PADDING_RIGHT + "px";
        this.l_leftBtn.owner = this; // Reference the class instance in the buttons, we'll need it when the event is handled.
		this.l_leftBtn.onclick = this.leftBtnClicked;
		this.div_leftBtn = document.createElement('div');
		this.div_leftBtn.className = this.LEFT_BTN_DIV_CSS;
		this.div_leftBtn.style.width = (1*btnL + 1*this.LEFT_BTN_WIDTH + 1*this.LEFT_BTN_PADDING_LEFT + 1*this.LEFT_BTN_PADDING_RIGHT) + "px";
		this.div_leftBtn.style.height = h_+'px';
		this.div_leftBtn.style.position = 'absolute';
		
		// Right Right-Button
		this.r_rightBtn = this.createButton(btnL, btnT, this.RIGHT_BTN_WIDTH, this.RIGHT_BTN_HEIGHT, null, this.RIGHT_BTN_SRC);
		this.r_rightBtn.setAttribute('id',brandID_ + '_ScrollerRightBtn');
		if (this.RIGHT_BTN_PADDING_LEFT) this.r_rightBtn.style.marginLeft = this.RIGHT_BTN_PADDING_LEFT + "px";
		if (this.RIGHT_BTN_PADDING_RIGHT) this.r_rightBtn.style.marginRight = this.RIGHT_BTN_PADDING_RIGHT + "px";
		this.r_rightBtn.owner = this; // Reference the class instance in the buttons, we'll need it when the event is handled.
		this.r_rightBtn.onclick = this.rightBtnClicked;
		this.div_rightBtn = document.createElement('div');
		this.div_rightBtn.className = this.RIGHT_BTN_DIV_CSS;
		this.div_rightBtn.style.width = (1*btnL + 1*this.RIGHT_BTN_WIDTH + 1*this.RIGHT_BTN_PADDING_LEFT + 1*this.RIGHT_BTN_PADDING_RIGHT) + "px";
		this.div_rightBtn.style.height = h_+'px';
		this.div_rightBtn.style.left = w_-this.RIGHT_BTN_WIDTH-btnL;
		this.div_rightBtn.style.position = 'absolute';

		
		// Add to view
		
		this.SHOW_BTN_LEFT = showBtnLeft;
		if (!this.SHOW_BTN_LEFT)  this.hideLeftBtns();
		this.SHOW_BTN_RIGHT = showBtnRight;
		if (!this.SHOW_BTN_RIGHT) this.hideRightBtns();
		this.mask.appendChild(this.content);
		this.scroller.appendChild(this.scrollerLeftShadow);
		this.scroller.appendChild(this.scrollerRightShadow);
		this.scroller.appendChild(this.mask);
		this.div_leftBtn.appendChild(this.l_leftBtn);
		this.div_rightBtn.appendChild(this.r_rightBtn);
		this.scroller.appendChild(this.div_leftBtn);
		this.scroller.appendChild(this.div_rightBtn);
		this.container.appendChild(this.scroller);
	}
	
	this.createImage = function (src_, l_, t_, w_, h_)
	{
		var img;
		if (src_) {
			img = document.createElement('img');
			img.setAttribute('src', src_);
			img.setAttribute('id',src_);
			img.style.position = 'absolute';
			if(l_) img.style.left = l_+'px';
			if(t_) img.style.top = t_+'px';
			if(w_) img.style.width = w_+'px';
			if(h_) img.style.height = h_+'px';
		}
		return img;
	}
	
	this.createButton = function (l_, t_, w_, h_, dir_, src_)
	{
		var btn;
		if (src_) {
			btn = document.createElement('img');
			btn.setAttribute('src', src_);
			btn.style.cursor = 'pointer';
			btn.style.position = 'absolute';
			if(l_) btn.style.left = l_+'px';
			if(t_) btn.style.top = t_+'px';
			if(w_) btn.style.width = w_+'px';
			if(h_) btn.style.height = h_+'px';
		} else if (dir_) {
			btn = document.createElement('div');
			btn.setAttribute('src', src_);
			btn.style.cursor = 'pointer';
			btn.style.position = 'absolute';
			btn.style.display = 'block';
			btn.style.overflow = 'hidden';
			btn.style.backgroundColor = '#B3D035';
			btn.style.color = 'white';
			if(l_) btn.style.left = l_+'px';
			if(t_) btn.style.top = t_+'px';
			if(w_) btn.style.width = w_+'px';
			if(h_) btn.style.height = h_+'px';
			if(h_) btn.style.fontSize = h_*.8+'px';
			if(h_) btn.style.lineHeight = h_*.8+'px';
			if(h_) btn.style.paddingLeft = 4+'px';
			if(h_) btn.style.paddingRight = 4+'px';
			btn.appendChild(document.createTextNode(dir_));
		}
		return btn;
	}

	this.leftBtnClicked = function ()
	{
		this.owner.scrollLeft();
	}

	this.rightBtnClicked = function ()
	{
		this.owner.scrollRight();
	}
	
	this.END_SCROLL = 0;
	this.scrollLeft = function ()
	{
		var contentLeft = this.content.offsetLeft;
		var rightmostPos = this.CONTENT_LEFT;

		if (contentLeft < rightmostPos) {
			var content = this.content;
			var contentWidth = content.childNodes[content.childNodes.length-1].offsetLeft + content.childNodes[content.childNodes.length-1].offsetWidth;
			var maskWidth = this.mask.offsetWidth;
			var scrollStep = this.scrollStep;
			if (this.tween) this.tween.stop(); // Stop previous tweens.
			var start = contentLeft; // The start position of the content.
			var end; // The end position for the content.
			
			if(content.childNodes[content.scrollIndex-scrollStep]) { // If there IS an item at the next scroll index...
				if(content.scrollIndex-scrollStep > 0) { // If the next scroll index IS valid...
					content.scrollIndex -= scrollStep;
					if(content.scrollIndex < 0) content.scrollIndex = 0; // Revalidate the scroll index.
					//end = - + this.CONTENT_LEFT; // Set the end position to the value of the indexed item's left + the margin.
					// end = this.END_SCROLL + content.childNodes[content.scrollIndex].offsetLeft + this.CONTENT_LEFT; // Set the end position to the value of the indexed item's left + the margin.
					end = -content.childNodes[content.scrollIndex].offsetLeft + this.CONTENT_LEFT; // Set the end position to the value of the indexed item's left + the margin.
					if (end >= rightmostPos) { // If the end position excedes the rightmost position...
						content.scrollIndex = 0;
						end = rightmostPos;
						this.hideLeftBtns();
					}
				} else { // If the next scroll index is NOT valid...
					content.scrollIndex = 0;
					end = rightmostPos;
					this.hideLeftBtns();
				}
			} else { // If there is NO item at the next scroll index...
				content.scrollIndex = 0;
				end = rightmostPos;
				this.hideLeftBtns();
			}
			this.showRightBtns();
			// Start tweening.
			this.tween = new Tween(content.style,'left',Tween.backEaseOut,start,end,this.SCROLL_SPEED,'px');
			this.tween.start();
		}
	}
	
	this.scrollRight = function ()
	{
		if (this.mask.scrollWidth > this.mask.offsetWidth) {
			var content = this.content;
			var contentWidth = content.childNodes[content.childNodes.length-1].offsetLeft + content.childNodes[content.childNodes.length-1].offsetWidth;
			var maskWidth = this.mask.offsetWidth;
			var leftmostPos = maskWidth - contentWidth - this.CONTENT_LEFT;
			var scrollStep = this.scrollStep;
			if (this.tween) this.tween.stop(); // Stop any previous tween.
			var start = content.offsetLeft; // The start position of the content.
			var end; // The end position for the content.
			
			if(content.childNodes[content.scrollIndex+scrollStep]) { // If there IS an item at the next scroll index...
				if (content.scrollIndex+scrollStep < content.childNodes.length-1) { // If the next scroll index IS valid...
					content.scrollIndex += scrollStep;
					if (content.scrollIndex > content.childNodes.length-1) content.scrollIndex = content.childNodes.length-1; // Revalidate the scroll index.
					end = -content.childNodes[content.scrollIndex].offsetLeft + this.CONTENT_LEFT; // Set the end position to the value of the indexed item's left + the margin.
					if (end <= leftmostPos+50) { // If the end position fails the leftmost position, or is close enough, even if larger...
						content.scrollIndex = content.childNodes.length - scrollStep;
						end = leftmostPos;
						this.hideRightBtns();
					}
				} else { // If the next scroll index is NOT valid...
					content.scrollIndex = content.childNodes.length - scrollStep;
					end = leftmostPos;
					this.hideRightBtns();
				}
			} else { // If there is NO item at the next scroll index...
				content.scrollIndex = content.childNodes.length - scrollStep;
				end = leftmostPos;
				this.hideRightBtns();
			}
			this.END_SCROLL = end;
			this.showLeftBtns();
			// Start tweening.
			this.tween = new Tween(content.style,'left',Tween.backEaseOut,start,end,this.SCROLL_SPEED,'px');
			this.tween.start();
		}
	}

	this.hideLeftBtns = function () {
		if (!this.SHOW_BTN_LEFT)
			if (this.l_leftBtn.style.display != 'none') {
				this.l_leftBtn.style.display = 'none';
				if (this.r_leftBtn) this.r_leftBtn.style.display = 'none';
			}
	}
	this.showLeftBtns = function () {
		if (this.l_leftBtn.style.display != 'block') {
			this.l_leftBtn.style.display = 'block';
			if (this.r_leftBtn) this.r_leftBtn.style.display = 'block';
		}
	}
	this.hideRightBtns = function () {
		if (!this.SHOW_BTN_RIGHT)
			if (this.r_rightBtn.style.display != 'none') {
				this.r_rightBtn.style.display = 'none';
			}
	}
	this.showRightBtns = function () {
		if (this.r_rightBtn.style.display != 'block') {
			this.r_rightBtn.style.display = 'block';
		}
	}

	// itemsList_ is an array of html block elements.
	this.addContent = function (itemsList_)
	{
		for (var i=0; i<itemsList_.length; i++) {
			this.content.appendChild(itemsList_[i]);
		}
		var contentWidth = this.content.childNodes[this.content.childNodes.length-1].offsetLeft + this.content.childNodes[this.content.childNodes.length-1].offsetWidth;
		if (contentWidth > this.mask.offsetWidth) this.showRightBtns();
	}
	
	this.showDims = function (obj_)
	{
		alert('offsetWidth == '+obj_.offsetWidth+'\n'+
			'clientWidth == '+obj_.clientWidth+'\n'+
			'scrollWidth == '+obj_.scrollWidth+'\n'+
			'style.width == '+obj_.style.width+'\n');
	}
}