﻿  function amazing(o,param){
	  var w3c = document.getElementById && document.createElement && document.createDocumentFragment;
	  if(!w3c) return;
	  this.obj = document.getElementById(o);
	  this.rows = param.rows;
	  this.cols = param.cols;
	  this.interval = param.interval;
	  this.action = param.action || 'random' ;
	  this.imgs = this.obj.getElementsByTagName("img");
	  this.imgsLength = this.imgs.length;
	  if(this.imgsLength == 1) return;
	  this.obj.className += ' amazing';
	  this.ID = this.obj.id + '_amazing';
	  this.init = function (){
		  this.createList();
		  for ( var i=0,j=this.imgsLength ; i<j ; i++ ) {
			   this.initImg(this.imgs[i],i);
			   this.imgs[i].style.display = 'none';
		  }
		  this.animation();
	  };
	  this.init();
  }
  amazing.prototype = {
	  createList : function (){
		  var ul = document.createElement("ul");
		  var oFragment = document.createDocumentFragment();
		  for ( var i=0,j=this.imgsLength ; i<j ; i++ ) {
			   var temp = this.cloneElement.li.cloneNode(true);
			   //temp.appendChild(document.createTextNode(i+1));
			   oFragment.appendChild(temp)
		  }
		  ul.appendChild(oFragment);
		  this.obj.appendChild(ul);

	  },
	  initImg : function (obj,i){
		  this.bgImg = obj.src;
		  this.sboxW = parseInt(obj.width) / this.rows;
		  this.sboxH = parseInt(obj.height) / this.cols;
		  this.creatElements(obj,i);
	  },
	  creatElements: function (obj,i){
		  var t = this.rows * this.cols;
		  var maskWrapper = this.cloneElement.div.cloneNode(true);
			  maskWrapper.id = (this.ID + i);
			  maskWrapper.style.zIndex = this.imgsLength - i;
		  var maskfix = this.cloneElement.div.cloneNode(true);
			  maskfix.id = maskWrapper.id + '_1';
		  var oFragment = document.createDocumentFragment();
		  for ( var m=0 ; m<t ; m++ ) {
			  var temp = this.cloneElement.div.cloneNode(true);
			  temp.appendChild(this.cloneElement.span.cloneNode(true));
			  oFragment.appendChild(temp); 
		  }
		  maskfix.appendChild(oFragment);
		  maskWrapper.appendChild(maskfix);
		  if(obj.parentNode.tagName == 'A'){
			 var link = this.cloneElement.a.cloneNode(true);
				 link.href = obj.parentNode.href;
				 link.style.cursor = 'pointer';
				 link.title = obj.parentNode.title;
			 link.appendChild(maskWrapper);
			 this.obj.appendChild(link);
		  }
		  else { this.obj.appendChild(maskWrapper); }
		  var boxs = maskfix.getElementsByTagName("div");
		  for ( var j=0 ; j<t ; j++ ) {
			  var box = boxs[j];
			  switch (this.action){
				 case 'regular': var startPoint = this.startPoint(i); break;
				 default : var startPoint = this.startPoint();
			  }
			  box.style.width  = box.firstChild.style.width = this.sboxW + 'px';
			  box.style.height = box.firstChild.style.height =  this.sboxH + 'px';
			  box.firstChild.style.background = this.positionBackground(box,j);
			  startPoint(box.firstChild);
		  };
	  },
	  animation : function (){
		  var _this = this, index = 1, current = document.getElementById( _this.ID + 0 + '_1' ),
			  ul = _this.obj.getElementsByTagName("ul")[0],
			  li = _this.obj.getElementsByTagName("li");
		  li[0].className = 'current';
		  if(_this.interval) { var t = setTimeout(go, 4000)};
		  for ( var m = 0 ; m < _this.imgsLength ; m++ ){
			   li[m].onclick = (function (m){
				  return function (){
					 if(this.className == 'current') return;
					 index = m; 
					 if(_this.interval) clearTimeout(t); 
					 go();
				  }})(m);
		  };
		  function init_current(){
			 for ( var m = 0 ; m < _this.imgsLength ; m++ ) {
				li[m].className = '';
				document.getElementById( _this.ID + m).style.zIndex = 0;
			 }
		  };
		  function go(){
			 init_current();
			 li[index].className = 'current';
			 current.parentNode.style.zIndex = _this.imgsLength;
			 var obj = document.getElementById( _this.ID + index + '_1' );
				 obj.parentNode.style.zIndex = _this.imgsLength + 1;
			 var div = obj.getElementsByTagName("div"), len = div.length ;
			 for ( var i=0 ; i<len ; i++ ) {
				  _this.show( div[i].firstChild );
			 }
			 current = obj; index += 1;
			 if(index > (_this.imgsLength - 1) ){ index = 0 };
			 if(_this.interval) { t = setTimeout(go, 4000)};
		  };
	  },
	  show : function (o){
		  var _this = this,
			  w = 0, c = parseInt(o.parentNode.style.width),d = 30, t = 0,
			  h = 0, j = parseInt(o.parentNode.style.height),k = 30, l = 0;
		  (function (){
			 o.style.width = Math.ceil(_this.tween(t,w,c,d)) + 'px';
			 if (t<d){t++; setTimeout(arguments.callee, 30)}             
		  })();
		  (function (){
			  o.style.height = Math.ceil(_this.tween(l,h,j,k)) + 'px';
			  if (l<k){l++; setTimeout(arguments.callee, 30)}             
		   })();
	  },
	  positionBackground : function (obj,index){
		  return 'url(' + this.bgImg + ') ' +  '-' + (obj.offsetLeft + 'px' ) + ' -' + (obj.offsetTop + 'px' );
	  },
	  startPoint : function (i){
		  if(arguments.length == 1) { var i = (i>3) ? (this.imgsLength % i) : i}
		  else { var i = Math.round((Math.random()*3))};
		  return function (o){
			 var postition = [['top','left'],['top','right'],['bottom','left'],['bottom','right']];
			 o.style['left'] = 'auto';
			 o.style['right'] = 'auto';
			 o.style['top'] = 'auto';
			 o.style['bottom'] = 'auto';
			 o.style[postition[i][0]] = '0'; 
			 o.style[postition[i][1]] = '0'; 
		  }
	  },
	  cloneElement : {
		  a : document.createElement("a"),
		  div : document.createElement("div"),
		  span : document.createElement("span"),
		  li : document.createElement("li")
	  },
	  tween : function(t,b,c,d,a,p){
		  if ((t/=d/2) < 1) return c/2*t*t*t + b;
		  return c/2*((t-=2)*t*t + 2) + b;
	  }
  }
