Ext.ns("app");

app.Scroller = function(config)
{
	this.addEvents(
		"scrolled",
		"beforescroll"
	);
	
	Ext.apply(this, config);
	
	this.initComponent();
	
	this.el = this.renderTo || Ext.getBody();
	this.lftEl = this.el.createChild({tag: "a", href: "#", "onclick": "return false", "class": this.id + "-btn-left"});
	this.dvEl = this.el.createChild({tag: "div", id: this.id + "-dataview-wrap"});
	this.rgtEl = this.el.createChild({tag: "a", href: "#", "onclick": "return false", "class": this.id + "-btn-right"});
	this.dv.render(this.dvEl);
	this.dv.el.setHeight(this.dv.height || this.el.getHeight());
	this.dv.el.setWidth(this.dv.width || this.el.getWidth());
		
	this.initNavButtons();
}

Ext.extend(app.Scroller, Ext.util.Observable,
	{
		/**
		 * @cfg {Boolean} anim Animate slide or not (Default is true)
		 */
		anim: true,
		
		/**
		 *	@cfg {Object} baseParams The params send with server request
		 */
		baseParams: {},
		
		/**
		 * @cfg {String} id Unique ID
		 */
		id: "scroller",
		
		/**
		 * @cfg {Number} height The height of the scroller view
		 */
		height: 215,
		
		/**
		 * @cfg {Number} width The width of the scroller view
		 */
		width: 600,		
		
		/**
		 * @cfg {Number} viewLimit The number of products to display
		 */
		viewLimit: 3,
		
		/**
		 * @cfg {Mixed} The id of the node, a DOM node or an existing Element that will be the container to render this component into. Using this config, a call to render() is not required
		 */
		renderTo: "",
		
		/**
		 * @cfg {String} url
		 */
		url: "",
		
		/**
		 * @cfg {Boolean} autoScroll AutoScroll or not
		 */
		autoScroll: false,
		
		/**
		 * @cfg {Boolean} autoScrollDelay Delay before scroll
		 */
		autoScrollDelay: 12000,		
		
		//private
		initComponent: function()
			{
				this.mainStore.on("load", this.onStoreLoad, this);
				this.mainStore.load();
				this.on(
					{
						"beforescroll":
						{
							fn: this.onBeforeScroll, 
							scope: this
						},
						"scrolled":
						{
							fn: this.onScrolled,
							scope: this
						}
					}
				);
				
				if (this.dv)
				{
					this.dv.on("click", this.onItemClick, this);
				}
					
				
				if (this.autoScroll)
				{
					this.scrollTask = {
						run: this.scrollRgt,
						interval: this.autoScrollDelay,
						scope: this
					}
					
					this.scrollRunner = new Ext.util.TaskRunner();
					this.scrollRunner.start(this.scrollTask);
				}
			},
		
		//private
		initNavButtons: function()
			{
				this.lftEl.on("click", this.scrollLft, this);
				this.lftEl.addClassOnOver(this.id + "-btn-left-hover");
				this.rgtEl.on("click", this.scrollRgt, this);
				this.rgtEl.addClassOnOver(this.id + "-btn-right-hover");
				
				if (this.autoScroll)
				{
					this.lftEl.on("click", this.scrollRunner.stop.createDelegate(this, [this.scrollTask]), this, {single: true});
					this.rgtEl.on("click", this.scrollRunner.stop.createDelegate(this, [this.scrollTask]), this, {single: true});
				}
				
				this.hideButtons();
			},
		
		//private
		onStoreLoad: function()
			{
				this.startIndex = 0,
				this.endIndex = this.viewLimit - 1;
				
				if (this.mainStore.getTotalCount() > this.viewLimit)
				{
					this.showButtons(app.Scroller.RIGHT);
					this.hideButtons(app.Scroller.LEFT);
				}
				else
				{
					this.hideButtons();	
				}					
					
				this.displayItems(this.startIndex, this.endIndex, app.Scroller.RIGHT, false);
			},
		
		/**
		 *
		 */
		scrollLft: function()
			{
				this.scroll(app.Scroller.LEFT);
			},
		
		/**
		 *
		 */
		scrollRgt: function()
			{
				this.scroll(app.Scroller.RIGHT);
			},
		
		//private
		scroll: function(dir)
			{
				if (!dir) return;
				
				if (this.fireEvent("beforescroll", this, dir) !== false)
				{
					if (dir == app.Scroller.LEFT)
					{
						this.startIndex = this.startIndex - (this.viewLimit - 1);
						this.endIndex = this.endIndex - (this.viewLimit - 1);
					}
					else
					{
						this.startIndex = this.startIndex + (this.viewLimit - 1);
						this.endIndex = this.endIndex + (this.viewLimit - 1);
					}
	
					if (this.startIndex < 0)
						this.startIndex = 0;

					if (this.startIndex > this.mainStore.getTotalCount() - 1)
						this.startIndex = this.mainStore.getTotalCount() - 1;
									
					if (this.endIndex < this.viewLimit)
						this.endIndex = this.viewLimit - 1;
					
					//if (this.endIndex > this.mainStore.getTotalCount() - 1)
						//this.endIndex = this.mainStore.getTotalCount() - 1;
					
					
					if (this.endIndex - this.startIndex < this.viewLimit - 1)
						this.startIndex = this.endIndex - this.viewLimit;
														
					return this.displayItems(this.startIndex, this.endIndex, dir);					
				}
				
				return false;
			},
		
		//private
		displayItems: function(start, end, dir, anim)
			{
				if (anim !== false && this.anim !== false)
				{
					var inDir, outDir;
					if (dir == app.Scroller.LEFT)
					{
						inDir = "r";
						outDir = "l";
					}
					else
					{
						inDir = "l";
						outDir = "r";	
					}
					
					this.dv.el.slideOut(outDir,
						{ 
							scope: this, 
							//easing: "backBoth",
							easing: "easeBothStrong",
							callback: function()
								{
									this.viewStore.removeAll();
									//console.log("display: ", start, end);
									this.viewStore.add(this.mainStore.getRange(start, end));
									this.dv.el.slideIn(inDir);
									return this.fireEvent("scrolled", this, dir);
								}
						}
					);
				}
				else
				{
					this.viewStore.removeAll();
					this.viewStore.add(this.mainStore.getRange(start, end));
					return this.fireEvent("scrolled", this, dir);
				}
				
			},
		
		//private
		onScrolled: function(scroller, dir)
			{
				if (this.startIndex < 1) { if (this.mainStore.getTotalCount() > this.viewLimit) { this.showButtons(app.Scroller.RIGHT); } }
				else if (this.endIndex > this.mainStore.getTotalCount() - 2) { this.showButtons(app.Scroller.LEFT); }
				else { this.showButtons(); }
			},
		
		//private
		onBeforeScroll: function(scroller, dir)
			{
				this.hideButtons();
			},
	
		//private
		hideButtons: function(dir)
			{
				var btn = (dir === app.Scroller.LEFT) ? this.lftEl : ((dir !== app.Scroller.LEFT && dir !== app.Scroller.RIGHT) ? false : this.rgtEl);
				
				if (btn)
				{
					btn.hide();	
				}
				else
				{
					this.lftEl.hide();
					this.rgtEl.hide();
				}
			},
		
		//private
		showButtons: function(dir)
			{
				var btn = (dir === app.Scroller.LEFT) ? this.lftEl : ((dir !== app.Scroller.LEFT && dir !== app.Scroller.RIGHT) ? false : this.rgtEl);
				
				if (btn)
				{
					btn.show();	
				}
				else
				{
					this.lftEl.fadeIn();
					this.rgtEl.fadeIn();
				}
			},
		
		//public
		onItemClick: Ext.emptyFn	
	}
);

app.Scroller.LEFT = "0";
app.Scroller.RIGHT = "1";