/*!
 * author: liuqiqi
 * date: 2010/09/07
 */
var Class = {
	create: function() {
		return function() {
			this.init.apply(this, arguments);
		}
	}
}

var DragUnit=Class.create();
DragUnit.z=1;
DragUnit.prototype={

	init:function(node){
		this.node=typeof node == 'string'? this.$(node):node;
		this.node.style.position = "relative";
		this.node.onmousedown=this.bind(this.start,this);
		this.node.onmouseup=this.bind(this.end,this);
		this.draging = false;
	},

	start:function(e){
		this.node.style.cursor = "move";
		document.onmousemove=this.bind(this.move,this);
		this.stopPrevent(e);
		this.node.style.zIndex = DragUnit.z++;
		this.draging = true;
		this.mouseXY = this.getMousePoint(e);
	},
	
	move:function(e){
		this.stopPrevent(e);
		if(this.draging){
			var mouseXY = this.getMousePoint(e);
			this.node.style.left = (parseInt(this.getStyle(this.node,'left'))||0) + mouseXY.x - this.mouseXY.x + "px";
			this.node.style.top =  (parseInt(this.getStyle(this.node,'top'))||0) + mouseXY.y - this.mouseXY.y + "px";
			this.mouseXY = this.getMousePoint(e);
		}
	},
	
	end:function(e){
		document.onmousemove=null;
		this.stopPrevent(e);
		this.draging = false;
		this.node.style.cursor = "auto";
	},
	
	$:function(id){
		return document.getElementById(id);
	},
	
	stopPrevent: function(e) {
        if (window.event) {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
            return;
        }
        if (e.preventDefault && e.stopPropagation) {
            e.preventDefault();
            e.stopPropagation();
        }
    },
	
	getStyle:function(element,property) {
		var value = element.style[property];
		if (!value) {
			if (document.defaultView && document.defaultView.getComputedStyle) {
				var css = document.defaultView.getComputedStyle(element, null);
				value = css ? css.getPropertyValue(property) : null;
			} else if (element.currentStyle) {
				value = element.currentStyle[property];
			}
		}
		return value == 'auto' ? '' : value;
	},
	
	getMousePoint:function(ev){
		var x=y=0;
		if (typeof window.pageYoffset!= 'undefined') {
			x = window.pageXOffset;
			y = window.pageYOffset
		}
		else 
			if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
				x = document.documentElement.scrollLeft;
				y = document.documentElement.scrollTop
			}
			else 
				if (typeof document.body != 'undefined') {
					x = document.body.scrollLeft;
					y = document.body.scrollTop
				}
		if(!ev) ev=window.event;
		x += ev.clientX;
		y += ev.clientY;
		return {'x':x,'y':y};
	},
	
	windowXY:function(){
		return {'x':window.innerWidth || document.documentElement.clientWidth,'y':window.innerHeight || document.documentElement.clientHeight};
	},
	
	bind:function(f,o){
		return function(){
			return f.apply(o,arguments);
		}
	}
}

var lis=document.getElementById('picShow').getElementsByTagName('li');
for(var i=0;i<lis.length;i++)
	new DragUnit(lis[i]);

new DragUnit('picShow');