var _EpgPanel = $("#message_widget");
var MessageDataPanelVScroll = {
		container : null,
		scroller : null,
		scrollUp : null,
		scrollDown : null,
		fnScroll : null,
		lastActiveCatagory : 1,
		fnScrollSpd : 0,
		isIPhone : function(){ return (null != (navigator.userAgent.match(/iPhone/i)) || null != (navigator.userAgent.match(/iPod/i)) || null != (navigator.userAgent.match(/iPad/i))) },
		isIE : function(){ return null != (navigator.userAgent.match(/MSIE/i)) },
		init : function(){
			
			var _self = this;
			
			try {
			
			this.scroller = $("#epg-data-v-scrollbar .scroller");
			scrollUp = $("div.scroll-up", _self.scroller.closest("[scrollcontainer]"));
			scrollDown = scrollUp.next("div.scroll-down");
			this.container = $("#epg-data-wrapper");
			
			
			// let's resize this scroll bar
			targetHeight = (this.container.height() - scrollUp.height() - scrollDown.height()) - 50;
			this.scroller.closest("[scrollcontainer]").height(140);
			
			// resize the scroll control
			viewportPercent = 185 / this.container.get(0).scrollHeight;
			// console.info(viewportPercent);
			scrollBarHeight = viewportPercent * targetHeight;
			
			//console.info($("div#epg-data-wrapper", _EpgPanel).height(), this.container.get(0).scrollHeight);
			
			//console.info(viewportPercent,targetHeight);
			this.scroller.height(scrollBarHeight);
			
			} catch(e) {}
			
			this.container.scroll(function(){
				
				maxScroll = _self.container.get(0).scrollHeight;
				// scrollPercent = $(this).scrollTop() / (maxScroll - 609); // _self.container.height());
				scrollPercent = $(this).scrollTop() / (maxScroll - (_self.container.height()));
				
				// Now move the scroll bar position according
				movableRange = _self.scroller.closest("[scrollcontainer]").height() - _self.scroller.height();
				offset = movableRange * scrollPercent;
				_self.scroller.css("top", offset);
				
			});
						
			_self.scroller.draggable("destroy").draggable({
				containment: 'parent',
				axis : 'y',
				drag : function(evt, ui){
					movableRange = $(evt.target).closest("[scrollcontainer]").height() - $(evt.target).height();
					draggedPercent = ui.position.top / movableRange;
					shouldScroll = draggedPercent * (_self.container.get(0).scrollHeight - (_self.container.height() - 20)); // _self.container.height());
					_self.container.scrollTop(shouldScroll);
					
					
					if (true){ // (APP.isIE()){
									_limit = _self.scroller.closest("[scrollcontainer]").height() - _self.scroller.height();
									//_limit = 105;
									if (ui.position.top > _limit) return false;
						}
					
					
				}
			});
			
			
			_self.scroller.closest("[scrollcontainer]").click(function(evt){
				// console.info(evt.layerY);
				return true;
				shouldScroll = (evt.layerY / $(this).height()) * (_self.container.get(0).scrollHeight - (_self.container.height() - 20)); // _self.container.height());
				// _self.container.scrollTop(shouldScroll);
				_self.container.stop(true, false).animate({
					scrollTop : shouldScroll
				}, {
					easing : "easeOutElastic",
					duration : 800
				});
			});
			
			clearInterval(this.fnScroll);
			this.fnScroll = null;
			this.fnScrollSpd = 1;
			
			
						
			scrollUp.mousedown(function(){
				_self.fnScrollSpd = 1.01;
				clearInterval(_self.fnScroll);
				_self.fnScroll = null;
				_self.fnScroll = setInterval(function(){
					_self.fnScrollSpd = Math.min(_self.fnScrollSpd * 1.05, 10);
					_self.container.scrollTop(_self.container.scrollTop() - _self.fnScrollSpd);
				}, 10);
			}).mouseup(function(){
				clearInterval(_self.fnScroll);
				_self.fnScroll = null;
			}).mouseout(function(){
				clearInterval(_self.fnScroll);
				_self.fnScroll = null;
			}).click(function(){ return false });
			
			
			scrollDown.mousedown(function(){
										  //console.warn('down');
				_self.fnScrollSpd = 1.01;
				clearInterval(_self.fnScroll);
				_self.fnScroll = null;
				_self.fnScroll = setInterval(function(){
					_self.fnScrollSpd = Math.min(_self.fnScrollSpd * 1.05, 10);
					_self.container.scrollTop(_self.container.scrollTop() + _self.fnScrollSpd);
					//console.info(_self.fnScrollSpd, _self.container.scrollTop());	
				}, 10);
			}).mouseup(function(){
					//console.warn('up');
				clearInterval(_self.fnScroll);
				_self.fnScroll = null;
			}).mouseout(function(){
				clearInterval(_self.fnScroll);
				_self.fnScroll = null;
			}).click(function(){ return false });
			
			
			if(MessageDataPanelVScroll.isIPhone()){
			scrollUp.get(0).addEventListener("touchstart", function(e){
			_self.fnScrollSpd = 1.01;
			clearInterval(_self.fnScroll);
			_self.fnScroll = null;
			_self.fnScroll = setInterval(function(){
			_self.fnScrollSpd = Math.min(_self.fnScrollSpd * 1.05, 10);
			_self.container.scrollTop(_self.container.scrollTop() - _self.fnScrollSpd);
			}, 10);

			this.addEventListener("touchend", function(e){
			this.removeEventListener("touchend");
			clearInterval(_self.fnScroll);
			_self.fnScroll = null;
			}, false);
			}, false);

			scrollDown.get(0).addEventListener("touchstart", function(e){
			_self.fnScrollSpd = 1.01;
			clearInterval(_self.fnScroll);
			_self.fnScroll = null;
			_self.fnScroll = setInterval(function(){
			_self.fnScrollSpd = Math.min(_self.fnScrollSpd * 1.05, 10);
			_self.container.scrollTop(_self.container.scrollTop()+_self.fnScrollSpd);
			}, 10);

			this.addEventListener("touchend", function(e){
			this.removeEventListener("touchend");
			clearInterval(_self.fnScroll);
			_self.fnScroll = null;
			}, false);
			}, false); 
														  }
			
			

		}
	};// JavaScript Document