if(typeof $ == 'undefined'){
	var $ = function (id) {
		 return "string" == typeof id ? document.getElementById(id) : id;
	};
};
if(typeof Class == 'undefined'){
	var Class = {
	   create: function() {
		 return function() {
		   this.initialize.apply(this, arguments);
		 }
	   }
	}
};
if(!Object.extend){
	Object.extend = function(destination, source) {
		for (var property in source) {
		   destination[property] = source[property];
		}
		return destination;
	}
};
if (!window.Event) {
  	var Event = new Object();
};
if(!Event.observe){
	Event.observe = function(element, name, observer, useCapture) {
		var element = $(element);
		useCapture = useCapture || false;
	
		if (name == 'keypress' && (navigator.appVersion.match(/Konqueror|Safari|KHTML/)	|| element.attachEvent))
		  name = 'keydown';
		
		if (element.addEventListener) {		
		  	element.addEventListener(name, observer, useCapture);
		} else if (element.attachEvent) {		
		  	element.attachEvent('on' + name, observer);
		}else{
			element['on' + name] = observer;
		}
  	}
};
var Scroller = Class.create();
Scroller.prototype = {
	initialize: function(pId, cId, options) {
		this.handle  = null;
		
			
		this.pPanel = $(pId);
		this.cPanel1 = $(cId);
		//this.cPanel2 = $(cId2);
		//	alert([this.cPanel1.offsetWidth , this.pPanel.offsetWidth]);
		this.setOptions(options);//alert(this.cPanel1.offsetWidth);
		
		
		
		var oDiv = this.cPanel1.cloneNode(false);
		oDiv.id = 'div' + Math.random().toString();
		oDiv.style.width = '100%';
		oDiv.style.height = 'auto';
	
		if(!this.options.side || this.options.side.toLowerCase() == 'left' || this.options.side.toLowerCase() == 'right'){

			var pWidth = this.pPanel.offsetWidth;
			var pStyle = this.pPanel.currentStyle?this.pPanel.currentStyle : document.defaultView.getComputedStyle(this.pPanel,null);
	
			if(pStyle.paddingLeft && parseInt(pStyle.paddingLeft)) pWidth -= parseInt(pStyle.paddingLeft);
			if(pStyle.paddingRight && parseInt(pStyle.paddingRight)) pWidth -= parseInt(pStyle.paddingRight);
			if(this.cPanel1.offsetWidth < pWidth) return false;
			
			//计算总宽度
			var childs = this.cPanel1.childNodes;
			var childWidth = 0;
			var oStyle = null;
			//var s = '';
			for(var i = 0; i < childs.length; i++){
				if(childs[i] && childs[i].offsetWidth){
					childWidth += childs[i].offsetWidth;//alert(childs[i].currentStyle.marginLeft);
					//总宽度要加上对象margin的左和右值
					oStyle = childs[i].currentStyle?childs[i].currentStyle : document.defaultView.getComputedStyle(childs[i],null);
					if(oStyle.marginLeft && parseInt(oStyle.marginLeft)) childWidth += parseInt(oStyle.marginLeft);
					if(oStyle.marginRight && parseInt(oStyle.marginRight)) childWidth += parseInt(oStyle.marginRight);
					//s += childs[i].offsetWidth + ":" + childs[i].outerHTML + '\n\n';
				};
			};
			if(childWidth <  pWidth) return false;
			//childWidth += 100;
			//alert([childWidth , this.cPanel1.offsetWidth])
			//if(childWidth > this.cPanel1.offsetWidth){
				this.cPanel1.style.width = childWidth + 'px';
				//this.cPanel2.style.width = childWidth + 'px';
			//};
			
			oDiv.style.width = (childWidth * 2) + 'px';
			oDiv.style.height = this.cPanel1.offsetHeight + 'px';
			
		}
		//alert(this.cPanel1.outerHTML)
		this.cPanel2 = this.cPanel1.cloneNode(true);
		this.cPanel2.id = 'div2' + Math.random().toString();
		
		oDiv.appendChild(this.cPanel1);
		oDiv.appendChild(this.cPanel2);
		this.pPanel.appendChild(oDiv);
		
		//this.cPanel2.innerHTML = this.cPanel1.innerHTML;
		var _this = this;
		this.pPanel.onmouseover = function(){_this.over();};
		this.pPanel.onmouseout = function(){_this.out();};
	
		this.start();
	},
	//设置默认属性
   	setOptions: function(options) {
     	this.options = {//默认值
			step:   1,//每次变化的px量
			speed:  300,//速度(越大越慢)
			side:   "left"//滚动方向:"up"是上，"down"是下，"left"是左，"right"是右
     	};
     	Object.extend(this.options, options || {});
   }, 
   marquee : function(){
	  
	   	switch (this.options.side.toLowerCase()) {
  			case "up" :
			if(!this.ii) this.ii=1;
			this.ii++;
			//window.status = this.ii;
				if(this.cPanel2.offsetHeight-this.pPanel.scrollTop<=0)
					this.pPanel.scrollTop -= this.cPanel1.offsetHeight;
				else{
					this.pPanel.scrollTop += this.options.step;					
				};
				break;
			case "down" :
			
				if(this.pPanel.scrollTop <= 0)
					this.pPanel.scrollTop += this.cPanel1.offsetHeight;
				else
					this.pPanel.scrollTop -= this.options.step;
				break;
			case "right" : //window.status = this.pPanel.scrollLeft;
				if(this.pPanel.scrollLeft <= 0)
					this.pPanel.scrollLeft += this.cPanel1.offsetWidth;
				else{
					this.pPanel.scrollLeft -= this.options.step;
				};
				break;
			default : 	
			   if(this.cPanel2.offsetWidth-this.pPanel.scrollLeft<=0){				    
					this.pPanel.scrollLeft -= this.cPanel1.offsetWidth;					
			   }else{
					this.pPanel.scrollLeft += this.options.step;			
				};
		};
   },
   start : function(){
	  var _this = this;	  
	  this.handle = setInterval(function(){_this.marquee()},this.options.step);
   },
   over : function(){
		clearInterval(this.handle);   
   },
   out : function(){
	   var _this = this;//alert(this.pPanel)
	   this.handle = setInterval(function(){_this.marquee()},this.options.step);
   }
};