/**
 * jo.js is primitive javascript recipes by Jimbo, 
 * when who developing his work promoted by its company.
 * If you don't know how to use it, f*cking code like me do, please.
 * jo.js is intermitted update handily, on and off.
 * Today, when I add commit here jo.js can make DOM element tobe scrollable,
 * and some drager tools, class tools function,
 * and a simple selector function that can't acts as sizzle engine JQ use.
 * The most of cute is animate function, wish you prefer
 * Please attantion: Here no compatibilities and responsibilities guarantee 
 *                  -- Jimbo 
 *                  2011/3/16 16:04:24
 *
 */

//*****************************************************************************
//Browser assistant

/**javascript:document.body.innerHTML = navigator.userAgent;
 *Internet Explorer 6:  Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)
 *Mozilla Firefox 3:    Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
 *Safari 3:             Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/525.28.3 (KHTML, like Gecko) Version/3.2.3 Safari/525.29
 *Opera 10:             Opera/10.00 (Windows NT 5.1; U; zh-cn) Presto/2.2.2
 *Netscape Navigator 9: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080219 Firefox/2.0.0.12 Navigator/9.0.0.6
 *Chrome:               Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.55 Safari/533.4
 *Maxthon:              Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/533.9 (KHTML, like Gecko) Maxthon/3.0 Safari/533.9
 *TT:                   Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; Trident/4.0; TencentTraveler 4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1))
 *360:                  Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; Trident/4.0; TencentTraveler 4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; 360SE)
 **/
var UA = window.navigator.userAgent;
var isIE = UA.indexOf("MSIE")!=-1;
var isMF = UA.indexOf("Firefox")!=-1&&UA.indexOf("Navigator")==-1;
var isBadMaxThon = UA.indexOf("Maxthon")!=-1;
var isBadChrome = UA.indexOf("Chrome")!=-1;
var isSF = UA.indexOf("Safari")!=-1 && isBadMaxThon==false && isBadChrome==false;
var isNN = UA.indexOf("Navigator")!=-1;
var isOP = UA.indexOf("Opera")!=-1;


//*****************************************************************************
//auxility
var dbg = (function(i){
  return function (s,b){
    if(typeof dbg_suppress!="undefined"&&dbg_suppress==true) return "debuger suspressed";
    if(!document.getElementById('debuger')){
      d  = document.createElement("div");
      d.id = 'debuger';
      d.style.position="absolute";
      document.body.appendChild(d);
    }
    document.getElementById('debuger').innerHTML += "<span title='"+s+"'>"+(++i)+" "+s+ "</span>"+ (b?"":"<br>");
  };
})(0);

function describe(t,v){
  var s = "";
  for(var p in t) s += "<br />["+p+"]"+(v?"="+t[p]:"");
  dbg(s);
}

var dbg_suppress = 1;

function each(array, fun, context){
  var i=0
  if(array instanceof Array){
    for(i=0; i<array.length; i++){
      var cx = context || (typeof array[i] == "object"? array[i]:array);
      if(fun.call(cx,i,null,"array")) return;
    }
  }else if(array instanceof Object){
    for(var p in array){
      var cx = (context || array[p] instanceof Object? array[p]:array);
      if(fun.call(cx,i,p,"object")) return;
      i++
    }
  }
}

//*****************************************************************************
//event assistant
//a promoved version of proxy
//a closure to fix currentTarget and this in IE
function proxy(tag,fun){ 
  //dbg("proxy("+tag.id+","+(fun+"").substr(0,(fun+"").indexOf("{"))+")");
  return function handler(e){
    e = e || window.event || {};
    if(!e.currentTarget) e.currentTarget = tag;
    fun.call(tag,e);
  }
}


//the bind method will attach context object by default, so event can not be remove, or use the remove prameter 
//please NOTE is removeable set, and the proxy will never use, so do what you know.
function bind(tag,event,handler,capture,removable){
  if(typeof(handler)!="function")throw new Error("handler must a function");
  if(typeof(tag)!="object") throw new Error("tag must an DOM element");
  capture = capture?true:false;
  removable = removable?true:false;
  if(event=="onmousewheel"&&!isIE) event = "DOMMouseScroll";
  if(event=="DOMMouseScroll"&&isIE) event = "onmousewheel";
  if(!removable) handler = proxy(tag,handler);
  if (tag.addEventListener){
    tag.addEventListener(event.replace(/^on/,""),handler,capture);
    if(event=="DOMMouseScroll") //Opera/Chrome/Safari that has addEventListener and onmousewheel
      tag.onmousewheel=handler;
      //tag.addEventListener("onmousewheel", handler, capture);
  }else if(tag.attachEvent){
    tag.attachEvent(event,handler);
  }else{
    tag[event] = handler;
  }
}

function loose(tag,event,handler,capture){
  if(typeof(handler)!="function")throw new Error("handler must a function");
  if(typeof(tag)!="object") throw new Error("tag must an DOM element");
  capture = capture?true:false;
  if(event=="onmousewheel"&&!isIE) event = "DOMMouseScroll";
  if(event=="DOMMouseScroll"&&isIE) event = "onmousewheel";
  if (tag.addEventListener){
    tag.removeEventListener(event.replace(/^on/,""),handler,capture);
  }else if(tag.detachEvent){
    tag.detachEvent(event,handler);
  }else{
    tag[event] = null; //arbitary set null
  }
}

//*****************************************************************************
//jQuery.ready比window.onload更快！有修改。用法:ready(function);
//requires event assistant
function ready(go){
  var sentinal_ready = false;
	// Mozilla,Chrome,Maxthon,Opera (see further below for it) and webkit nightlies currently support this event
	if ( document.addEventListener && !isOP){
		// Use the handy event callback
		document.addEventListener( "DOMContentLoaded", go, false );
    return "attach by document.DOMContentLoadded";
  }
	// If IE is used and is not in a frame
	// Continually check to see if the document is ready
	if (isIE && window == top){
    (function(){
      if (sentinal_ready) return;
      try {
        // If IE is used, use the trick by Diego Perini
        // http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
      } catch( error ) {
        setTimeout( arguments.callee, 0 );
        return;
      }
      // and execute any waiting functions
      go();
      sentinal_ready = true;
    })();
    return "Use the trick by Diego Perini";
  }

	if ( isOP ){
		document.addEventListener( "DOMContentLoaded", function () {
			if (sentinal_ready) return;
			for (var i = 0; i < document.styleSheets.length; i++)
				if (document.styleSheets[i].disabled) {
					setTimeout( arguments.callee, 0 );
					return;
				}
			// and execute any waiting functions
			go();
      sentinal_ready = true;
		}, false);
    return "attach by document.DOMContentLoadded in Opera";
  }

	if ( isSF ) {
		var numStyles;
		(function(){
			if (sentinal_ready) return;
			if ( document.readyState != "loaded" && document.readyState != "complete" ) {
				setTimeout( arguments.callee, 0 );
				return;
			}
			if ( numStyles === undefined ){
				//numStyles = jQuery("style, link[rel=stylesheet]").length;
        numStyles = document.getElementsByTagName("style").length;
        var lks = document.getElementsByTagName("link");
        for(var i=0; i<lks.length; i++) if(lks[i].rel=="stylesheet") numStyles++;
      }
			if ( document.styleSheets.length != numStyles ) {
				setTimeout( arguments.callee, 0 );
				return;
			}
			// and execute any waiting functions
			go();
      sentinal_ready = true;
		})();
    return "attach by document.readyState in Safari";
  }
	// A fallback to window.onload, that will always work
	bind(window,"onload",go,false);
  return "fallback to window.onload";
}
//*****************************************************************************
//$get JavaScript kit by jimbo 2010/8/1
var $get = function(s){
  var tag = typeof s=="object"? s:document.getElementById(s);
  if(!s) tag = document;
  if(tag==null) return ;
  tag.$get = function(s){return document.getElementById(s);};
  tag.$hent = function(s){return tag.getElementsByTagName(s);};
  tag.$coll = function(s){
    var a = new Array();
    var es = tag.getElementsByTagName("*");
    var r = new RegExp("\\b"+s+"\\b","i");
    for(var i=0; i<es.length; i++){
      //if(es[i].className.indexOf(s)!=-1){
      if(r.test(es[i].className)){
        a.push(es[i]);
      }
    }
    return a;
  };
  return tag;
};

//*****************************************************************************
//Class process JavaScript Kit by Jimbo 2010/8/1
function toggleClass(el,s){
  var rx = new RegExp(s+" | "+s+"|^"+s+"$");
  if(rx.test(el.className)){
    el.className = el.className.replace(s,"").replace("  ","");
  }else{
    el.className = el.className + " " + s;
  }
}
function betweenClass(el,a,b){
  var rxa = new RegExp(a+" | "+a+"|^"+a+"$");
  var rxb = new RegExp(b+" | "+b+"|^"+b+"$");
  dbg("betweenClass:"+el.className);
  if(rxa.test(el.className)){
    el.className = el.className.replace(a,b).replace("  ","");
  }else if(rxb.test(el.className)){
    el.className = el.className.replace(b,a).replace("  ","");
  }else{
    el.className = el.className + " " + a;
  }
}
function hasClass(el,c){
  var rxa = new RegExp(c+" | "+c+"|^"+c+"$");
  return rxa.test(el.className);
}
function getWith(els,classname){
  var r = new RegExp(classname+" | "+classname+"|^"+classname+"$","i");
  for(var i=0;i<els.length;i++){
    if(r.test(els[i].className)) return els[i];
  }
}
function removeClass(tag,classname){
  var cs = classname.split(" ");
  var nc = tag.className;
  for(var i=0; i<cs.length; i++){
    if(cs[i]==" ") cs[i]="";
    nc = nc.replace(cs[i],"");
  }
  tag.className = nc;
}
function addClass(tag,classname){
  var nc = tag.className+" "+classname;
  nc = nc.replace("  "," ");
  var cs = nc.split(" ");
  var pc = {};
  for(var i=0; i<cs.length; i++){
    if(cs[i]!=""){
      pc[cs[i]]=(cs[i]);
    }
  }
  nc = "";
  for(var c in pc) nc += " "+c;
  tag.className = nc.substr(1);
}
function swapClass(a, b){
  if(!a || !b) return;
  var t = a.className;
  a.className = b.className;
  b.className = t;
}


//*****************************************************************************
//animation tool
function fade(s,e,o,t,callback,speed){
  var v = s, speed = speed||10;
  setTimeout(function(){
    v+=o;
    v = v>e&&o>0||v<e&&o<0?e:v;
    t.opacity = v;
    t.filter = "alpha(opacity="+(v*100)+")";
    if(v!=e) setTimeout(arguments.callee,speed);
    else if(callback) callback();
  },speed);
}

function animate(s,e,o,tag,css,u,callback,clear,speed,steper){
  //if(tag.getAttribute("animating-"+css=="true")) return; //just return for a copy of animation
  if(!clear && tag["animating-"+css]==true) return false; //more efficiency by tag property
  if(tag["animating-"+css]==true){
    clearTimeout(tag["animating-"+css+"-id"]);
  }
  e = isNaN(e)? 0:parseInt(e, 10);
  s = isNaN(s)? 0:parseInt(s, 10);
  var v = s, speed = speed||10;
  var style = tag.style;
  var isCurve = o=="curve";
  var dir = s<e? 1:-1;
  if(!isCurve&&(e>s&&o<0 || e<s&&o>0 || o==0)) throw "Condition will never complete in animate."
  //tag.setAttribute("animating-"+css,"true");
  tag["animating-"+css]=true;
  tag["animating-"+css+"-id"] = setTimeout(function(){
    v+=isCurve? (e-s)/10+dir:o;
    v = v>e&&dir>0||v<e&&dir<0?e:v;
    //document.title = "V="+parseInt(v)+", s="+s+", e="+e+", "+new Date().getTime();
    style[css] = v+u;
    if(css=="opacity"&&isIE){
      style.filter = "alpha(opacity="+(v*100)+")";
    }
    if(v!=e){
      tag["animating-"+css+"-id"] = setTimeout(arguments.callee,speed);
      if(steper) steper();
    }else{
      if(callback) callback();
      //tag.setAttribute("animating-"+css,"false");
      tag["animating-"+css]=false;
    }
  },speed);
  return true;
}

function scroll(id,callback,pn){ //initializer
  //set parentnode
  if(pn==null || pn==document || pn==document.body){
    pn = document; 
    var wrap = document.documentElement;
    var wraptop = 0;
    var wrapleft = 0;
    var showheight = wrap.clientHeight;
  }else{
    pn = (typeof pn == "string")?document.getElementById(pn):pn;
    var wrap = pn;
    var wraptop = wrap.getBoundingClientRect().top;
    var wrapleft = wrap.getBoundingClientRect().left;
    var showheight = pn.offsetHeight;
  }
  //if(typeof bind == "function") bind(window,"onscroll",noticer,false,true);
  if(typeof bind == "function") bind(document,"onmousewheel",noticer,false,true);
  function noticer(){
    disturbing = true;
    loose(document,"onmousewheel",noticer);
    //loose(window,"onscroll",noticer);
  }
  var disturbing = false;
  var t = (typeof id=="string")? document.getElementById(id):id;
  var r = t.getBoundingClientRect();
  dbg(t+","+pn);
  //var ch = document.documentElement.clientHeight;
  var speed = 20, o = 10;

  var cy = wrap.scrollTop;
  var vy = cy, ey = r.top-wraptop+cy;
  var dy = cy>ey? -1:1;
  setTimeout(function(){//timeout routine for y
    if(disturbing) return false;
    vy+=(ey-vy)/o+dy;
    vy = vy>ey&&dy>0||vy<ey&&dy<0? ey:vy;
    wrap.scrollTop = vy;
    //document.title = " o:"+o+" e:"+e+ " v:"+v+" "+new Date();
    if(vy!=ey) setTimeout(arguments.callee,speed);
    else if(callback) callback();
  },speed);

  var cx = wrap.scrollLeft;
  var vx = cx, ex = r.left-wrapleft+cx;
  var dx = cx>ex? -1:1;
  setTimeout(function(){//timeout routine for x
    if(disturbing) return false;
    vx+=(ex-vx)/o+dx;
    vx = vx>ex&&dx>0||vx<ex&&dx<0? ex:vx;
    wrap.scrollLeft = vx;
    //document.title = "wrapleft:"+wrapleft+"r.left:"+r.left+" o:"+o+" cx:"+cx+ " vx:"+vx+ " ex:"+ex+" "+new Date();
    if(vx!=ex) setTimeout(arguments.callee,speed);
    else if(callback) callback();
  },speed);
}

function follow(a,b){
  var p = a;
  while(p!=document.body){
    p = p.parentNode;
    if(p.scrollHeight>p.offsetHeight) break;
  }
  scroll(a,null,p);

}

//*****************************************************************************
//capture tool
//all handler will recive parameter Event processed as e = e || event;
function capture(cap,tag){
  //a cap is an JSON object content event handle like this one
  //{onmousedown:begin,onmousemove:going,onmouseup:end}, now lets get it.
  //some event diverge, Opera/Chrome/Safari/IE use onmousewheel unlike Firefox use DOMMouseScroll
  //so I will translate it in the match.
  var e=[],t={DOMMouseScroll:"onmousewheel"};
  for(i in cap) e.push(i);
  var begin=e[0], going=e[1], end=e[2];
  //dbg("&nbsp;&nbsp;event list:"+e);

  //at first the begin function will be bind to tag
  //dbg("::bind(tag,begin,_capture);")
  bind(tag,begin,_capture);

  //initialize the proxy function for user method.
  //dbg("::goingfun = proxy(tag,cap[going]);")
  var goingfun = proxy(tag,cap[going]);
  //dbg("::endfun = proxy(tag,cap[end]);")
  var endfun = proxy(tag,cap[end]);
  
  //translate event name if necessary
  e = [];
  for(i in cap){
    if(i=="onmousewheel"&&!isIE) i="DOMMouseScroll";
    if(i=="DOMMouseScroll"&&isIE) i="onmousewheel";
    e.push(i);
  }
  var begin=e[0], going=e[1], end=e[2];

  function _capture(e){
    e = e||event; //this e will spread to handler
    if (document.addEventListener) {  // DOM Level 2 event model
      //document.addEventListener("onmousewheel", goingfun, true);
      //Opera/Chrome/Safari/ use onmousewheel and addEventListener
      tag.onmousewheel=goingfun;
      document.addEventListener(going.replace(/^on/,""), goingfun, true);
      document.addEventListener(end.replace(/^on/,""), _release, true);
      //bind(document,going,goingfun,true);
      //bind(document,end,release,true);
    } else if (document.attachEvent) {  // IE 5+ Event Model
      tag.setCapture( );
      if(cap[going]) tag.attachEvent(going, goingfun);
      tag.attachEvent(end, _release);
      // Treat loss of mouse capture as a mouseup event.
      tag.attachEvent("onlosecapture", _release);
      //bind(tag,going,goingfun);
      //bind(tag,end,release);
      //bind(tag,"onlosecapture",release);
    } else {  // IE 4 Event Model
      // In IE 4 we can't use attachEvent( ) or setCapture( ), so we set
      document[going] = goingfun;
      document[end]= endfun;
    }

    // We've handled this event. Don't let anybody else see it.
    if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
    else e.cancelBubble = true;                      // IE

    // Now prevent any default action.
    if (e.preventDefault) e.preventDefault( );   // DOM Level 2

    //now lets call the user function
    //if(cap[begin]) return cap[begin].call(tag,e);
    return proxy(tag,cap[begin])(e);
  }

  function _release(e){
    e = e||event;  //this e will spread to handler
    if (document.removeEventListener) {  // DOM event model
      document.removeEventListener(going.replace(/^on/,""), goingfun, true);
      document.removeEventListener(end.replace(/^on/,""), _release, true);
      if(going=="DOMMouseScroll") //Opera/Chrome/Safari
        tag.onmousewheel=goingfun;
        //document.removeEventListener("onmousewheel", goingfun, true);
      //looe(document,going, goingfun, true);
      //looe(document,end, release, true);
    }else if (document.detachEvent) {  // IE 5+ Event Model
      tag.detachEvent(going, goingfun);
      tag.detachEvent(end, _release);
      tag.detachEvent("onlosecapture", _release);
      //loose(tag,going,goingfun);
      //loose(tag,end,release);
      //loose(tag,"onlosecapture", release);
      tag.releaseCapture( );
    }else {  // IE 4 Event Model
      document[going] = null;
      document[end] = null;
    }
    if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
    else e.cancelBubble = true; // IE

    //now lets call the user function
    return endfun(e);
  }
}

//*****************************************************************************
//moving tool
  //use hasMoved in you click event handler like this:
  //if(this.hasMoved==false) alert('onclick acturally');
  //use iclick event instead of onclick
function mover(o,direction,position,step,min,max){
  capture(
    {onmousedown:_move,
    onmousemove:_moving,
    onmouseup:_moved},
    o
  );
  min = isNaN(min)? false:min;
  max = isNaN(max)? false:max;
  var isX = (direction=="x");
  var isY = (direction=="y");
  var isF = direction!="x"&&direction!="y";
  var isS = step>0;

  var rp = o.parentNode.getBoundingClientRect();
  var rs = o.getBoundingClientRect();

  var cp = isIE? o.currentStyle.position:document.defaultView.getComputedStyle(o,null).position;
  if(cp!="absolute") o.style.position = "relative"; //a little modify of style

  o.moveBy = _moveBy; //a method extends
  o.moveTo = _moveTo; //a method extends

  //keep position
  if (position!=null&&!isNaN(position)&&!(position<min || position>max)){
    if(direction=="x"){
      o.style.left = position+"px";
    }else if(direction=="y"){
      o.style.top = position+"px";
    }else{
      o.style.top = position+"px";
      o.style.left = position+"px";
    }
  }
  o.left = parseInt(("0"+o.style.left).replace("0-","-0"),10);
  o.top = parseInt(("0"+o.style.top).replace("0-","-0"),10);
  var coor = {};
  coor.ol = coor.nl = o.left;
  coor.ot = coor.nt = o.top;

  function _moveBy(dx,dy){
    //dbg("_moveBo("+dx+","+dy+"), between "+min+" and "+max);
    var e = {}; //construct an event for moved and moving
    e.clientX = 0;
    e.clientY = 0;
    _move.call(o,e);//call with context
    e.clientX = parseInt(dx);
    e.clientY = parseInt(dy);
    _moving.call(o, e); //call with context
    if(o.onmoved) return o.onmoved(e);
  }
  function _moveTo(dx,dy){
    dbg("_moveTo("+dx+","+dy+"), between "+min+" and "+max+" from:"+o.style.left+","+o.style.top);
    if(o.isMoving) return;
    var e = {};
    e.coor = coor;
    var isX = (direction=="x"||direction!="y");
    var isY = (direction=="y"||direction!="x");
    dx = dx>max? max:dx<min? min:dx;
    dy = dy>max? max:dy<min? min:dy;
    var vx = isNaN(parseInt(o.style.left))? 0:parseInt(o.style.left,10);
    var vy = isNaN(parseInt(o.style.top))? 0:parseInt(o.style.top,10);
    dbg("vx:"+vx+" dx:"+dx+" vy:"+vy+" dy:"+dy+" LT:"+o.style.left+","+o.style.top);
    coor.ot = vx;
    coor.ol = vy;
    coor.startX = vx;
    coor.startY = vy; 
    coor.left = vx;
    coor.top = vy;
    coor.oxc = vx/2;
    coor.oyc = vy/2;
    if(!isX&&!isF) vx = dx;
    if(!isY&&!isF) vy = dy;
    var dirx = dx>vx? 1:-1, diry = dy>vy? 1:-1;
    o.isMoving = true;
    (function(){
      if(isX||isF){
        vx += (dx-vx)/20+dirx;
        vx = vx>dx&&dirx>0||vx<dx&&dirx<0? dx:vx;
        o.style.left = vx+"px";
      }
      if(isY||isF){
        vy += (dy-vy)/20+diry;
        vy = vy>dy&&diry>0||vy<dy&&diry<0? dy:vy;
        o.style.top = vy+"px";
      }
      coor.nt = vx;
      coor.nl = vy;
      if(o.onmoving && !o.onmoving(e)) return e;
      if(vx!=dx || vy!=dy) setTimeout(arguments.callee,10);
      else{
        o.left = isNaN(o.style.left)? 0:parseInt(o.style.left,10);
        o.top = isNaN(o.style.top)? 0:parseInt(o.style.top,10);
        o.isMoving = false;
        if(o.onmoved) return o.onmoved(e);
      }
    })();
  }
  function _move(e){
    e.coor = coor;
    //keep client area coordinates
    o.hasMoved = false;
    coor.startX = e.clientX;
    coor.startY = e.clientY; 
    //coor.top = isNaN(parseInt(this.style.top))? 0:parseInt(this.style.top);
    //coor.left = isNaN(parseInt(this.style.left))? 0:parseInt(this.style.left);
    coor.left = parseInt(("0"+o.style.left).replace("0-","-0"),10);
    coor.top = parseInt(("0"+o.style.top).replace("0-","-0"),10);
    var rc = this.getBoundingClientRect();
    coor.oxc = e.clientX-(rc.left+rc.right)/2;
    coor.oyc = e.clientY-(rc.top+rc.bottom)/2;
    dbg("left,top=("+coor.left+","+coor.top+") "+
      "oxc,oyc=("+coor.oxc+","+coor.oyc+")"+
      "clientX,Y=("+e.clientX+","+e.clientY+") "+
      "coor.ol,ot=("+coor.ol+","+coor.ot+") ");/**/
    //why ok it is o.onmove(coor), and var ret = o.onmove(coor) will cause error
    //this appears in my drager tool, a wonderful solution is change the name onmove to another
    //if(o.onmove) return o.onmove(coor);
    if(o.ontransfer) return o.ontransfer(e);
  }
  function _moving(e){
    e.coor = coor;
    coor.ol = e.clientX-coor.startX;
    coor.ot = e.clientY-coor.startY;
    //make a opportunity for event to change value, this will be useful for a scrollbar
    coor.nt = coor.top+coor.ot;
    coor.nl = coor.left+coor.ol;
    dbg("nl:"+coor.nl+
      " ol:"+coor.ol+
      " left:"+coor.left+
      " oxc:"+coor.oxc +
      " (nl+oc)%step:("+(coor.nl+coor.oxc)%step +
      " cX:"+e.clientX);/**/
    if(o.onmoving && !o.onmoving(e)) return e;
    o.hasMoved=true;
    var nt = coor.nt;
    var nl = coor.nl;
    var isYMM = (min===false||nt>=min)&&(max===false||nt<=max);
    var isXMM = (min===false||nl>=min)&&(max===false||nl<=max);
    if(isY&&isYMM&&isS || isF&&isYMM&&isS) {
      var jump = (nt+coor.oyc)%step;
      nt = nt+coor.oyc-jump;
      nt += jump>(step/2)?step:0;
      //nt += (nt+jump>=max)?0:(nt+jump<min)? 0:jump;
    }
    if(isX&&isXMM&&isS || isF&&isXMM&&isS){
      var jump = (nl+coor.oxc)%step;
      nl = nl+coor.oxc-jump;
      nl += jump>step/2? step:0;
      //nl += (nl+jump>=max-step)?0:(nl+jump<min)?0:jump;
    }
      dbg(" min:"+min +
      " max:"+max +
      " xmm:"+isXMM +
      " nt:"+coor.nt +
      " ot:"+coor.ot +
      " top:"+coor.top +
      " oyc:"+coor.oyc +
      " (nt+ocy)%step:"+(coor.nt+coor.oyc)%step +
      " cY:"+e.clientY);

    coor.nt = nt;
    coor.nl = nl;
    var left = parseInt(("0"+o.style.left).replace("0-","-0"),10);
    var top = parseInt(("0"+o.style.top).replace("0-","-0"),10);
    if(isY&&isYMM&&!isS || isF&&isYMM&&!isS) this.style.top = coor.nt+"px";
    if(isX&&isXMM&&!isS || isF&&isXMM&&!isS) this.style.left = coor.nl+"px";
    if(isX&&isXMM&&isS || isF&&isXMM&&isS) animate(left,nl,"curve",this,"left","px");
    if(isY&&isYMM&&isS || isF&&isYMM&&isS) animate(top,nt,"curve",this,"top","px");
    return e;
  }
  //TODO: a choice of click and move use iclick instead of
  function _moved(e){
    //o.left = parseInt("0"+o.style.left,10);
    //o.top = parseInt("0"+o.style.top,10);
    e.coor = coor;
    if(o.iclick && this.hasMoved==false){
      o.iclick(e);
    }
    if(o.onmoved) return o.onmoved(e);
  }
  /*function chose(event){
    if(hasMoved){
      //alert("has move");
      //if(event.preventDefault) event.preventDefault();
      //event.returnValue = false;
      //if(event.stopPropagation) event.stopPropagation();
      //event.cancelBubble = true;
    }
  }*/
}

//*****************************************************************************
//draging tool
  //use hasMoved in you click event handler like this:
  //if(this.hasMoved==false) alert('onclick acturally');
  //use iclick event instead of onclick
  //here I need a drager manager for which closure fits with.
var drager = (function(){
  var topIndex = 0;
  var oIndices = []
  var instances = [];//story dragers here, that should refreshed.
  return function drager(board,handle,position,step,min,max){
    handle.ontransfer = _drag;
    handle.onmoving = _draging;
    handle.onmoved = _draged;
    var local = {};
    var oldZIndex = isNaN(parseInt(board.style.zIndex))? 0:parseInt(board.style.zIndex);
    oIndices.push(oldZIndex);
    instances.push(board);
    topIndex = oldZIndex>=topIndex? +oldZIndex+1:topIndex;
    var oldPosition = isIE? board.currentStyle.position:document.defaultView.getComputedStyle(board,null).position;
    var byleft = parseInt(("0"+board.style.left).replace("0-","-0"),10);
    var bytop = parseInt(("0"+board.style.top).replace("0-","-0"),10);
    board.style.left = (isNaN(position)? byleft:position)+"px";
    board.style.top = (isNaN(position)? bytop:position)+"px";
    //var rp = board.parentNode.getBoundingClientRect();
    //var rc = board.getBoundingClientRect();
    //local.ox = oldPosition=="absolute"? (rc.left-rp.left):parseInt(board.style.left,10);
    //local.oy = oldPosition=="absolute"? (rc.top-rp.top):parseInt(board.style.top,10);
    local.ox = byleft;
    local.oy = bytop;
    //mover(handle,"xy",0,step,min,max);
    mover(handle,"xy",0,step,min,max);
    dbg(local.ox+"|"+local.oy);
    function _drag (e){
      var coor = e.coor;
      //handle.hasMoved = false;
      var ins = [], ois = [];
      for(var i=0; i<instances.length; i++){
        try{
          instances[i].style.zIndex=oIndices[i];
          ins.push(instances[i]);
          ois.push(oIndices[i]);
          //dbg("restory index:"+oIndices[i]);
        }catch(ex){
          alert(ex);
        }
      }
      instances = ins;
      oIndices = ois;
      board.style.zIndex = topIndex;
      dbg("_drag:"+local.ox+"|"+coor.nl+", "+local.oy+"|"+coor.nt);
      //local.
      if(handle.ondrag) return handle.ondrag(e);
      return e;
    };
    function _draging(e){
      var coor = e.coor;
      if(handle.ondraging&&!handle.ondraging(e)) return false;
      handle.hasMoved=true;
      dbg("_draging:"+local.ox+"|"+coor.nl+", "+local.oy+"|"+coor.nt);
      board.style.left = (local.ox+coor.nl)+"px";
      board.style.top = (local.oy+coor.nt)+"px";
      return false; //return false cause moving omitted in mover
    };
    function _draged(e){
      var coor = e.coor;
      var rp = board.parentNode.getBoundingClientRect();
      var rc = board.getBoundingClientRect();
      local.ox = oldPosition=="absolute"? (rc.left-rp.left):parseInt(board.style.left,10);
      local.oy = oldPosition=="absolute"? (rc.top-rp.top):parseInt(board.style.top,10);
      if(handle.ondraged) return handle.ondraged(coor);
      return e;
    };
  }
})();
//*****************************************************************************
//tuner tool
//requires capture tool, use:Tuner(element)
//element's event ontune, ontuned, ontuning will occurs if they exist.
//and ontuning event a false return will cause action omitted
function tuner(o,value,step,min,max){
  if(!o) return;
  if(!step) step = 1;
  if(!value) value = 0;
  capture(
    {onmouseover:_tune,
    onmousewheel:_tuning,
    onmouseout:_tuned},
    o
  );
  o.title = "use you mouse wheel tuning me";
  o.style.cursor = "pointer";
  _setValue(value);

  function _setValue(value){
    var tagName = o.tagName.toLowerCase();
    if(tagName=="input"){
      o.value = value;
    }else if(tagName=="textarea"){
      o.value = value;
    }else if(tagName=="select"){
      var opts = o.options;
      for(var i=0; i<opts.length; i++){
        if(opts[i].value==value||opts[i].innerHTML==value){
          //o.selectIndex = opts[i].index;
          o.options[i].selected = true;
          break;
        }
      }
    }else{
      o.innerHTML = value;
    }
  }
  function _tune(e){
    if(o.ontune) o.ontune(value);
    return value;
  }
  function _tuning(e){
    //firefox got minus value from details for scroll top
    //for IE which is positive wheelDelta.
    if(o.ontuning && !o.ontuning(value)) return value;
    var delta = -e.detail || e.wheelDelta;
    delta = delta>0?step:-step;

    if(!(value + delta>max || value + delta<min)){
      value += delta;
      _setValue(value);
    }

    // here lets hold the position by prevent any default action.
    if (e.preventDefault) e.preventDefault( );   // DOM Level 2
    return value;
  }
  function _tuned(e){
    if(o.ontuned)
      return o.ontuned(value);
    return value;
  }
}

//*****************************************************************************
//cookie tool - a sweet cookie
//method get/set a cookie.
//get: Cookie("cookiename");
//set: Cookie("cookiename",cookievalue,livehours);
//     Cookie({'name':value...},livehours);
//return cookie object: [{name:cookiename,value:cookievalue}...];
function Cookie(){
  var expires = new Date(), milliseconds = 0;
  if(!isNaN(arguments[1])) milliseconds = parseFloat(arguments[1]*3600000);
  if(!isNaN(arguments[2])) milliseconds = parseFloat(arguments[2]*3600000);
  //alert("milliseconds="+milliseconds+">"+arguments.length+"|"+arguments[1]+"|"+arguments[2]);
  expires.setTime(expires.getTime()+milliseconds);
  if(arguments.length==1 && typeof(arguments[0])=="string"){//get a cookie
    var cookies = document.cookie.split(";");
    for(var cookie in cookies){
      var dish = cookies[cookie].split("=");
      if(dish.length!=2) break;
    //alert("get a cookie "+dish[0]);
    //alert("get a cookie |"+dish[0].replace(/^\s|\s$/g,"")+'|'+arguments[0]+"|");
      var name = dish[0].replace(/^\s|\s$/g,"");
      var value = dish[1].replace(/^\s|\s$/g,"");
      if(name==arguments[0]){
        //return [{name:dish[0],value:dish[1]}];
        return [{'name':name,'value':value}];
      }
    }
    //alert("get a empty cookie");
    return [{'name':'','value':''}];
  }else if(arguments.length==2 && typeof(arguments[0])=="object"){// set cookies
    var cookies=[];
    for(var cookie in arguments[0]){
      //alert("set cookies");
      //alert("set cookies "+cookie+"="+dish[cookie]+"|"+expires);
      var dish = arguments[0];
      cookies[cookies.length]={name:cookie,value:dish[cookie]};
      document.cookie=cookie+"="+dish[cookie]+";expires="+expires.toGMTString();
    }
    return cookies;
  }else if(arguments.length==3){//Set a cookie
    //alert("Set a cookie"+arguments.length);
    var name = arguments[0], value=arguments[1]
    document.cookie = name+"="+value+";expires=" + expires.toGMTString();
    return [{'name':name,'value':value}];
  }
  throw {message:"Cookie receive a irregular argument list"};
}


//*****************************************************************************
//scrollbar tool
//an ease scrollbar inmplemetation
function scrollbar(knob,axis,value,step,min,max,board,track,prev,next){
  if(axis!="x" && axis!="y") throw "scrollbar can't understand axis "+axis;
  mover(knob,axis,value,step,min,max);
  var coor = {};
  coor.range = max-min;
  coor.maxValue = max;
  coor.minValue = min;
  coor.value = parseInt(("0"+value).replace("0-","-0"),10)-parseInt(("0"+min).replace("0-","-0"),10);
  var speed = 20;
  step =  isNaN(parseInt(step))||parseInt(step,10)==0? 5:parseInt(step,10);
  knob.onmoving = function(e){
    //describe(e.coor); //this coor not the other for mover
    e.coor.nl = (e.coor.nl>max)? max:(e.coor.nl<min)? min:e.coor.nl;
    e.coor.nt = (e.coor.nt>max)? max:(e.coor.nt<min)? min:e.coor.nt;
    coor.value = (axis=="x"? e.coor.nl:e.coor.nt)-min;
    dbg("default scrollbar <"+coor.value+","+coor.range+">");
    if(knob.scrolling && !knob.scrolling(coor)) return true;
    if(board){
      var sh = board.scrollHeight;
      var r = (sh-board.offsetHeight)/(coor.range);
      board.scrollTop = coor.value*r;
    }
    return true; //this cause _moving omitted if false returned
  }
  if(track){
    //track.onclick
    var tid = 0;
    track.onmousedown = function(e){
      e = e || event;
      //describe(e,true);
      //dbg("track mousedown.");
      //var r = this.getBoundingClientRect();
      var k = knob.getBoundingClientRect();
      var mh = (k.right+k.left)/2;
      var mv = (k.top+k.bottom)/2;
      var d = (e.clientX>mh&&axis=="x" || e.clientY>mv&&axis=="y")? 1:-1;
      var ep = coor.value+(axis=="x"? e.clientX-mh:e.clientY-mv);
      //e = e>coor.range? coor.range:e<0? 0: e;
      //document.title = "<"+ep+","+d+","+e.clientX+","+e.clientY+">";   
      (function(){
        if(coor.value>e&&d>0||coor.value<e&&d<0){
          knob.moveTo(ep+min,ep+min);
        }else{
          knob.moveTo(coor.value+min+step*d,coor.value+min+step*d);
          //knob.moveBy(d*speed/3,d*speed/3);
          tid = setTimeout(arguments.callee,speed);
        }/**/
      })();
    }
    track.onmouseup = track.onmouseout = function(e){
      clearTimeout(tid);
    }
  }
  if(prev){
    var pid = 0;
    prev.onmousedown = function(e){
      e = e || event;
      (function(){
        pid = setTimeout(arguments.callee,speed);
        //knob.moveTo(coor.value+min-step,coor.value+min-step);
        knob.moveBy(-speed/5,-speed/5);
      })();
      if(e.stopPropagation) e.stopPropagation();
      e.cancelBubble = true;
    }
    prev.onmouseup = prev.onmouseout = function(e){
      clearTimeout(pid);
    }
  }
  if(next){
    var nid = 0;
    next.onmousedown = function(e){
      e = e || event;
      (function(){
        nid = setTimeout(arguments.callee,speed);
        //knob.moveTo(coor.value+min+step,coor.value+min+step);
        knob.moveBy(speed/5,speed/5);
      })();
      if(e.stopPropagation) e.stopPropagation();
      e.cancelBubble = true;
    }
    next.onmouseup = next.onmouseout = function(e){
      clearTimeout(nid);
    }
  }
}


//*****************************************************************************
//appendix for CoolMax
  //FixRect Useage:
  //s send object img
  //h height and w width for a board keep s
  //f fullscape set true to keep all
  function FixRect(s,h,w,f){ //加入全景支持参数f
    var img = new Image();
      img.onload = function(){
        var r1 = w/h, r2 = img.width/img.height; //注意,C#中w/h总是返回忽略小数,因为是整数算法.
        s.style.position = "relative";
        s.style.left = "0px";
      s.style.top = "0px";
      if(f){
        if(r1>r2){
          s.height = h;
          //s.width = "auto"; //don't work
          s.width = parseInt(h*r2);
          s.style.left = parseInt((w-r2*h)/2) +"px";
        }else{
          //s.height = "auto"; //don't work
          s.height = parseInt(w/r2);
          s.width = w;
          s.style.top = parseInt((h-w/r2)/2) +"px";
        }
        return ;
      }
      if(r1>r2 || r1==r2){
        s.style.width = w + "px";
        s.style.height = w/r2 + "px";
        s.style.top = -parseInt((w/r2 - h)/2) + "px";
      }
      if(r1<r2){
        s.style.height = h + "px";
        s.style.width = h*r2 + "px";
        s.style.left = -parseInt((h*r2-w)/2) + "px";
      }
    };  
    img.src = s.getAttribute("rel") || s.src;
  }

function centerClient(e,c){
  if(!e || !e.getBoundingClientRect) return;
  //Jimbo Modifier
  var oRect = e.getBoundingClientRect();
  var w=oRect.right - oRect.left;
  var h=oRect.bottom - oRect.top;
  if(c){
    var r = c.getBoundingClientRect();
    var ch = r.bottom-r.top;
    var cw = r.right-r.left;
    //var sv = parseInt(e.style.top);
    //var ev = (ch-h)/2;
    //animate(sv,ev,"curve",e,"top","px");
    //var sv = parseInt(e.style.left);
    //var ev = (cw-w)/2;
    //animate(sv,ev,"curve",e,"left","px");
    e.style.top = (ch-h)/2+"px";
    e.style.left = (cw-w)/2+"px";
  }else{
    //var sh = document.documentElement.scrollHeight;
    var ch = document.documentElement.clientHeight;
    var st = document.documentElement.scrollTop;
    //var sw = document.documentElement.scrollWidth;
    var cw = document.documentElement.clientWidth;
    var sl = document.documentElement.scrollLeft;
    e.style.top = (st+(ch-h)/2)+"px";
    e.style.left = (sl+(cw-w)/2)+"px";
  }
}

var bodymask = {show:null,hide:null,zIndex:3,onclick:function(){this.hide();}};
ready(function(){
  var sw = document.documentElement.scrollWidth;
  var sh = document.documentElement.scrollHeight;
  var mask = document.createElement("div");
  mask.className = "hidden";
  mask.style.filter = "alpha(opacity=50)";
  mask.style.opacity = 0.5;
  mask.style.position = "absolute";
  mask.style.left = "0px";
  mask.style.top = "0px";
  mask.style.backgroundColor = "black";
  mask.style.width = sw+"px";
  mask.style.height = sh+"px";
  mask.style.zIndex = bodymask.zIndex;
  document.body.appendChild(mask);
  mask.onclick = function(){if(bodymask.onclick) bodymask.onclick.call(bodymask);};
  bodymask.show = function(){
    var sw = document.documentElement.scrollWidth;
    var sh = document.documentElement.scrollHeight;
    mask.style.width = sw+"px";
    mask.style.height = sh+"px";
    this.width = sw;
    this.height = sh;
    removeClass(mask,'hidden');
  };
  bodymask.hide = function(){
    addClass(mask,'hidden');
  };
  //mymovie('http://player.youku.com/player.php/sid/XMjE2NTM4MTQ4/v.swf');
});

function setMask(id){
  var t=$get(id);
  if(!t) return;
  var r = t.parentNode.getBoundingClientRect();
  t.style.width = (r.right-r.left)+"px";
  t.style.height = (r.bottom-r.top)+"px";
  addClass(t,"alpha5");
  addClass(t,"bgblack");
  addClass(t,"abs");
  removeClass(t, "hidden");
}
function hideMask(id){
  var t=$get(id);
  if(!t) return;
  addClass(t, "hidden");
}

function initTablet(){
  var elements = $get().$coll("tablet");
  for(var i=0; i<elements.length; i++){
    var e = elements[i];
    (function(e){
      e.style.cursor = "pointer";
      e.onmouseover = function(){
        if(this.canHover)
          this.src = e.src.replace("tab.","tab-hover.");
      };
      e.onmouseout = function(){
        if(this.canHover)
          this.src = this.src.replace("tab-hover.","tab.");
      };
      if(e.src.indexOf("tab-hover")!=-1) return;
      var hover = new Image();
      hover.onload = function(){
        e.canHover = true;
      };
      hover.src = e.src.replace("tab.","tab-hover.");
    })(e);
  }
}
function initAjax(){
  var tabs = $get().$coll("mytab");
  var btns = $get().$coll("tablet");
  if(tabs.length==0) return;
  var req = null;
  var trycount = 0;
  for(var i=0; i<tabs.length; i++){
    tabs[i].onclick = function(){
      if(this.href!=""){
        req = $get(this).$coll("tablet")[0];
        aj.get(this.href,{onsuccess:processor,onfailure:failed});
      }
      return false;;
    }
  }
  var def = (typeof default_tab_index=="number")? default_tab_index:1;
  tabs[def].onclick(); //ajax default
  function failed(){
    //dbg("ajax request failure.");
    if(location.protocol.indexOf("http")==-1){
      aj.get("../htmls/404-part.html",{onsuccess:processor,onfailure:function(){}});
    }else{
      //alert(req.parentNode.href);
      trycount ++;
      if(trycount>9){
        var tag = $get("ajaxcontent")
        tag.innerHTML = '<img onclick="history.go(-1);" class="pointer mt16" style="margin-bottom:240px;" src="../images/tobe.jpg" width="293" height="49" alt="" />';
      }else{
        aj.get(req.parentNode.href,{onsuccess:processor,onfailure:failed});
      }
    }
  }
  function processor(o){
    var raw = o.responseText;
    for(var i=0; i<tabs.length; i++){
      btns[i].canHover = true;
      btns[i].src = btns[i].src.replace("tab-hover.","tab.");
    }
    req.src = req.src.replace("tab.","tab-hover.");
    req.canHover = false;
    var tag = $get("ajaxcontent")
    //fade(1,0,-0.05,tag.style,function(){
      tag.innerHTML = raw;
    //  fade(0,1,0.1,tag.style);
      scriptEval(raw,true);
      initDynamic();
    //});
  }
}

function makeSizeOk(){
  var ch = document.documentElement.clientHeight;
  var cw = document.documentElement.clientWidth;
  var minWidth = 1001;
  var minHeight = 530;
  document.title = ch+','+cw;
  if(ch<minHeight||cw<minWidth){
    document.body.style.overflow="auto";
  }else{
    document.body.style.overflow="hidden";
  }
}

function initSlider(id,p,n,psg){
  var wrap = $get(id);
  var prev = $get(p);
  var next = $get(n);
  var psg = $get(psg);
  if(!wrap||!prev||!next||!psg) return false;
  var can = $get("mydrag");
  var wr = wrap.getBoundingClientRect();
  var cx = (wr.right-wr.left)/2;
  var imgs = wrap.$hent("img");
  var lr = 0;
  var spacer = 12;
  var c = 0;
  var len = imgs.length;
  var min_height = 86, max_height = 110;

  var prev2 = $get("prev2");
  var next2 = $get("next2");
  var psg2 = can? can.$coll("text")[0]:null;
  if(prev2) prev2.onclick = function(){
    prev.onclick({});
    var src = imgs[c].getAttribute("rel");
    if(psg2){
      psg2.innerHTML = imgs[c].alt;
      if(imgs[c].alt==""){
        addClass(psg2,"cc");
      }else{
        removeClass(psg2,"cc");
      }
    }
    return doFlip(src);
  };
  if(next2) next2.onclick = function(){
    next.onclick({});
    var src = imgs[c].getAttribute("rel");
    if(psg2){
      psg2.innerHTML = imgs[c].alt;
      if(imgs[c].alt==""){
        addClass(psg2,"cc");
      }else{
        removeClass(psg2,"cc");
      }
    }
    return doFlip(src);
  };
  for(var i=0;i<len;i++){
    var img = imgs[i];
    var load = new Image();
    load.onload = loading;
    load.src = img.src;
    img.index = i;
    var css = img.style;
    css.height = 96+"px";
    css.width = "auto";
    css.position = "absolute";
    css.left = lr+"px";
    lr += img.width+spacer;
    css.bottom = "0px";
    img.onclick = function (){
      if(this.index == c){
        var src = this.getAttribute("rel")
        try{
          if(psg2) psg2.innerHTML = imgs[c].alt;
        }catch(ex){}
        return doFlip(src);;
      }else{
        return moveTo(c=this.index);
      }
    }
  }
  //moveTo(c=1); move after loaded
  prev.onclick = function(e){
    e = e||event;
    c = (c-1+len)%len;
    moveTo(c);
    e.returnValue = false;
    return false;
  }
  next.onclick = function(e){
    e = e||event;
    c = (c+1)%len;
    moveTo(c);
    e.returnValue = false;
    return false;
  }
  var loadcount = 0;
  function loading(){
    loadcount ++;
    for(var i=0; i<len; i++){
      var img = imgs[i];
      if(img.src==this.src){
        img.ow = this.width;
        img.oh = this.height;
        img.or = this.width/this.height;
        //delete this;
      }
    }
    if(loadcount==len){
      c = 0;
      moveTo(c);
    }
  }
  function moveTo(index){
    if(index>len||index<0) return;
    var tag = imgs[index];
    var width = parseInt(max_height*tag.or);
    var ev = cx - width/2 - spacer/2;
    var cev = ev;
    var sv = parseInt(tag.style.left);
    animate(sv,ev,"curve",tag,"left","px");
    sv = parseInt(tag.style.height);
    animate(sv,max_height,"curve",tag,"height","px");
    psg.innerHTML = tag.alt;

    ev += width + spacer;
    for(var i=index+1;i<len;i++){
      tag = imgs[i];
      sv = parseInt(tag.style.left);
      animate(sv,ev,"curve",tag,"left","px");
      sv = parseInt(tag.style.height);
      animate(sv,min_height,"curve",tag,"height","px");
      width = parseInt(min_height*tag.or);
      ev += width + spacer;
    }

    ev = cev;
    for(var i=index-1;i>=0;i--){
      tag = imgs[i];
      sv = parseInt(tag.style.left);
      width = min_height*tag.or
      ev -= (width + spacer);
      animate(sv,ev,"curve",tag,"left","px");
      sv = parseInt(tag.style.height);
      animate(sv,min_height,"curve",tag,"height","px");
    }
  }
}

function startMydrag(idb,idh){
  var handle = $get(idh);
  var board = $get(idb);
  var mytip = $get("mytip");
  if(!handle||!board) return;
  if(!mytip){
    mytip = document.createElement("div");
    //document.body.appendChild(mytip);
    mytip.className = "psg bor";
  }
  drager(board,handle);
  handle.ondraging = function(e){
  //handle.onmoving = function(e){
  //board.ontransfer = function(e){
    //ontransfer
    mytip.innerHTML = "left:"+board.style.left+";top:"+board.style.top+"";
    return true;
  };
}
function jumppage(p,m,u){
  if(p>0&p<=m) location.href = u+p;
  return false;
}

function showlarge(index){
  bodymask.show();
  bodymask.onclick = null;
  var imgs = $get("content").$hent("img");
  if(imgs.length==0) return;
  var c = index||0;
  var as = $get("paper").$hent("a");
  var len = as.length;
  var cw = document.documentElement.clientWidth;
  var ch = document.documentElement.clientHeight;
  var prev = document.createElement("a");
  addClass(prev,'bullet6 bgarr1 tobgarr1a abs pon');
  prev.style.top = (ch/2-64)+"px";
  prev.style.left = (64)+"px";
  var next = document.createElement("a");
  addClass(next,'bullet6 bgarr2 tobgarr2a abs pon');
  next.style.top = (ch/2-64)+"px";
  next.style.left = (cw-96)+"px";
  var close = document.createElement("a");
  addClass(close,"bullet bgclose abs pon");
  close.style.top = "-22px";
  close.style.left = (cw-64)+"px";
  prev.style.zIndex = next.style.zIndex = close.style.zIndex = bodymask.zIndex;
  var iv = document.createElement("div");
  iv.style.height = (ch-64)+"px";
  iv.style.width = cw+"px";
  addClass(iv,"oh rel");

  var dv = document.createElement("div");
  dv.style.width = cw+"px";
  dv.style.height = (ch-64)+"px";
  dv.style.zIndex = bodymask.zIndex;
  //addClass(dv,"bor");
  document.body.appendChild(dv);
  dv.appendChild(iv);
  dv.appendChild(close);
  dv.appendChild(prev);
  dv.appendChild(next);
  centerClient(dv);

  close.onclick = function(){document.body.removeChild(dv);bodymask.hide();};
  prev.onclick = function(){
    c = (c-1+len)%len;
    loadimg();
  };
  next.onclick = function(){
    c = (c+1)%len;
    loadimg();
  };

  var lge;
  function loadimg(){
    if(lge)iv.removeChild(lge);
    lge = new Image();
    lge.style.zIndex = bodymask.zIndex;
    iv.appendChild(lge);

    var cw = document.documentElement.clientWidth;
    var ch = document.documentElement.clientHeight;
    addClass(dv,"abs loading");
    addClass(lge,"abs cc crzoom");
    //lge.className = "abs cc crzoom";
    removeClass(lge,"crmove");
    lge.onload = function(){
      FixRect(lge,ch-64,cw,true);
      //centerClient(lge,lge.parentNode);
      removeClass(lge,"cc");
      removeClass(dv,"loading");
    }
    lge.src = as[c].href;
    lge.iclick = null;
    lge.onclick = loadfull;
  }
  function loadfull(){
    var cw = document.documentElement.clientWidth;
    var ch = document.documentElement.clientHeight;
    addClass(dv,"abs loading");
    addClass(lge,"cc");
    lge.onload = function(){
      FixRect(lge,ch-128,cw,false);
      //centerClient(lge,lge.parentNode);
      addClass(lge,"crmove");
      removeClass(lge,"crzoom");
      removeClass(lge,"cc");
      removeClass(dv,"loading");
    }
    lge.iclick = function(){document.body.removeChild(dv);bodymask.hide();};
    lge.onclick = function(){};
    lge.src = as[c].getAttribute("full");
    mover(lge,"xy");
  }
  loadimg();
}

function initFlip(s){
  var as = $get().$coll(s);
  var c = 0;
  var len = as.length;
  for(var i=0; i<len; i++){
    var t = as[i];
    t.index = i;
    t.onclick = function(){
      c = this.index;
      return doFlip(as[c].href);
    }
  }
  var prev2 = $get("prev2");
  var next2 = $get("next2");
  if(prev2) prev2.onclick = function(){
    c = (c-1+len)%len;
    return doFlip(as[c].href);
  };
  if(next2) next2.onclick = function(){
    c = (c+1)%len;
    return doFlip(as[c].href);
  };
}

function doFlip(src){
  var wrap = $get('mydrag');
  if(!wrap) return false;
  var p = wrap.$hent('img')[0];
  addClass(p, "cc");
  addClass(p.parentNode, "loading");
  addClass(p,'rel');
  var img = new Image();
  img.onload = function(){
    removeClass(p.parentNode, "loading");
    removeClass(p, "cc");
  };
  img.src = p.src = src;
  FixRect(p,338,560,true);
  removeClass(wrap,'hidden');
  return false;
}

function initRect(c){
  var rs = $get().$coll(c);
  for(var i=0;i<rs.length;i++){
    var p = rs[i];
    //var img = new Image();
    //img.onload = function(){
      //removeClass(p.parentNode, "loading");
      //removeClass(p, "cc");
      //alert(img.src);
    //};
    //img.src = p.src;
    //addClass(p.parentNode, "loading");
    FixRect(p,128,180,true);
  }
}

function initDownloadable(s){
  var as = $get().$coll(s);
  for(var i=0;i<as.length;i++){
    var a = as[i];
    a.onclick = function(){
      location.href = "/CoolMax/download.php?url="+this.href;
      return false;
    }
  }
}
function initPaper(s){
  var paper = $get("paper")
  if(!paper) return;
  var as = paper.$hent("a");
  var prev = $get("aprev");
  var next = $get("anext");
  if(as.length<2||!prev||!next) return;
  var len = as.length;
  FixRect(as[0].getElementsByTagName("img")[0],375,504,true);

  removeClass(prev,"hidden");
  removeClass(next,"hidden");
  var c = 0;
  prev.onclick = doprev;
  next.onclick = donext;
  function doprev(){
    var t1 = as[c];
    c = (c-1+len)%len;
    var t2 = as[c];
    var s = 0, e = 32, e2 = -32;
    animate(s,e,"curve",t1,"top","px");
    animate(s,e2,"curve",t1,"left","px");
    fade(1,0,-0.1,t1.style,function(){addClass(t1,'hidden');})
    animate(e,s,"curve",t2,"top","px");
    animate(e2,s,"curve",t2,"left","px");
    fade(0,1,0.1,t2.style);
    removeClass(t2,'hidden');
  }
  function donext(){
    var t1 = as[c];
    c = (c+1)%len;
    var t2 = as[c];
    var s = 0, e = 32, e2 = -32;
    animate(s,e,"curve",t1,"top","px");
    animate(s,e2,"curve",t1,"left","px");
    fade(1,0,-0.1,t1.style,function(){addClass(t1,'hidden');})
    animate(e,s,"curve",t2,"top","px");
    animate(e2,s,"curve",t2,"left","px");
    fade(0,1,0.1,t2.style);
    removeClass(t2,'hidden');
  }
}

function initMyfresh(s){
  var aw = $get().$coll(s)[0];
  if(!aw) return;
  var as = $get(aw).$hent("a");
  if(as.length==0) return;

  var len = as.length;
  for(var i=0;i<len;i++){
    var a = as[i];
    a.index = i;
    addClass(a,"hidden");
  }
  removeClass(as[0],"hidden");
  var c = 0, speed = 6000;
  setTimeout(next,speed);
  function next(){
    var t1 = as[c];
    c = (c+1)%len;
    var t2 = as[c];
    var s = 0, e = 12, e2 = -12;
    var d = Math.round(Math.random());
    //if(d){
      //animate(s,e,"curve",t1,"top","px");
      //animate(e,s,"curve",t2,"top","px");
    //}else{
      //animate(s,e2,"curve",t1,"left","px");
      //animate(e2,s,"curve",t2,"left","px");
    //}
    fade(1,0,-0.05,t1.style,function(){addClass(t1,'hidden');})
    fade(0,1,0.05,t2.style,function(){setTimeout(next,speed);});
    removeClass(t2,'hidden');
  }
}
// ready to go....
ready(function(){
  initFlip("fliper");
  initRect("rect");
  initPaper("paper");
  initDownloadable("download");
  initMyfresh("myfresh");
  initSlider("slider","prev","next","mytext");
  startMydrag("mydrag","myhandle");
  //if(isIE) document.execCommand("BackgroundImageCache", false, true);
  //bind(document,"onmousewheel",function(e){dbg_suppress=false;describe(e,true);});
});