function d(){
   console.debug(arguments);
}

var Gallery = Class({
   init: function(){
      this.showPic = 0;

      this.getData();
   },
   getData: function(){
      this.data = [];
      var p = document.getElementsByTagName('div');
      var label, img, box;
      for (var i = 0; i < p.length; i++) {
         if (p[i].className == 'gpic') {
            box = p[i];
            var a = [];
            var imgs = p[i].getElementsByTagName('img');
            for (var j = 0, l = imgs.length; j < l;j++) {
               a.push(imgs[j]);
            }
            var label = p[i].getElementsByTagName('span')[0];
            new GPic(box,a,label);
         }
      }
   }
});

var GPic = Class({
   init:function(box,imgs,label){
      this.dom = box;
      this.imgs = imgs;
      this.label = label;

      this.length = imgs.length;
      this.offset = box.offsetWidth;
      this.bWidth = box.offsetWidth / imgs.length;
      if(imgs.length > 0)
         this.create();

   },
   onStep: function(pos){
      this.cont.style.left = parseInt(pos) + 'px';
   },
   onComplete: function(){
      this.isMove = false;
   },
   create:function(){
      this.dom.style.cursor = 'pointer';
      this.dom.style.overflow = 'hidden';

      this.cont = document.createElement('div');
      this.cont.className = 'cont';
      this.dom.appendChild(this.cont);

      this.bar = document.createElement('div');
      this.bar.className = 'bar';
      this.bar.style.width = this.bWidth +'px';
      this.dom.appendChild(this.bar);

      var href = this.dom.getElementsByTagName('a')[0];
      this.link = href.getAttribute('href');
      var img;
      for(var i = 0,l = this.imgs.length; i < l; i++){
         this.cont.appendChild(this.imgs[i]);
      }
      this.imgs[0].style.display = 'block';
      this.act = 0;

      this.dom.appendChild(this.label);
      this.dom.removeChild(href);

      this.btn = document.createElement('div');
      this.btn.className = 'button';
      this.dom.appendChild(this.btn);

      this.pos = this.getPosition();
      dc.Event.addListener(this.btn, 'mouseover', this.over, this);
      dc.Event.addListener(this.btn, 'click', this.click, this);

   },
   show:function(){
      var c = parseInt((this.actPos)/(this.offset/this.length));
      if (c != this.act && c >= 0 && c < this.length) {
         this.bar.style.left = c * this.bWidth + 'px';
         this.imgs[c].style.display = 'block';
         this.imgs[this.act].style.display = 'none';
         this.act = c;
      }
   },
   click:function(){
      window.location = this.link;
   },
   over:function(e){
      this.actPos = e.event.clientX - this.pos;
      this.bar.style.display = 'block';
      this.label.style.display = 'none';
      dc.Event.addListener(this.btn, 'mouseout', this.out, this);
      dc.Event.addListener(this.btn, 'mousemove', this.move, this);
      this.show();
   },
   out:function(){
      this.bar.style.display = 'none';
      this.label.style.display = 'block';
      dc.Event.removeListener(this.btn, 'mouseout', this.out);
      dc.Event.removeListener(this.btn, 'mousemove', this.move);
   },
   move:function(e){
      this.actPos = e.event.clientX - this.pos;
      this.show();
   },

   getPosition:function(){
      var x = 0,el = this.dom;
      do{
         x+= el.offsetLeft;
         el = el.offsetParent;
      }while(el);
      return x;
   }
});

//dc.Event.domReady(function(){
dc.Event.addListener(window,'load',function(){
   new Gallery();

});