function historyBack(){
   history.go(-1);
}

var Gallery = Class({
   init: function(){
      this.showPic = 0;
      this.dom = $('gallery');
      if (this.dom) {
         this.dom.style.overflow = 'hidden';
         this.getData();
         if (this.data.length > 0) {
            this.dom.innerHTML = '';
            this.grid = new GGrid(this, this.data);
            this.preview = new GPreview(this);
            
            this.maxPage = this.grid.maxPage;
            if (this.maxPage > 1) {
               var bar = $('galleryBar');
               bar.style.display = 'block';
               this.nextBtn = $('galleryBarNext');
               dc.Event.addListener(this.nextBtn, 'click', this.nextEv, this);
               this.prevBtn = $('galleryBarPrev');
               dc.Event.addListener(this.prevBtn, 'click', this.prevEv, this);
            }
         }
         //history
         if (history.back) {
            this.back = document.createElement('div');
            this.back.className = 'toUp';
            
            
            var b = document.createElement('h2');
            b.className = 'back';
            b.innerHTML = 'POWRÓT';
            this.back.appendChild(b);
            //dc.Event.addListener(b, 'click', function(){history.go(-1);});
            
            $('page').appendChild(this.back);
            FlashText.add(b);
         }
      }
   },
   nextEv: function(){
      if (!this.isPreview) 
         this.grid.showNext();
   },
   prevEv: function(){
      if (!this.isPreview) 
         this.grid.showPrev();
   },
   gridMoveComplete: function(){
      var m = this.grid.maxPage;
      var a = this.grid.actualPage;
      var o = this.grid.onPage;
      var l = this.data.length;
      
      if (a < m) {
         var d = 150 * 3;
      }
      else {
         var d = (parseInt((l - parseInt(l / o) * o) / 5) + 1) * 150;
      }
      this.grid.dom.style.height = this.dom.style.height = d + 'px';
   },
   showNextPreview: function(){
      this.showPic = 'next';
      this.grid.unselect(true);
      this.preview.hide();
   },
   showPrevPreview: function(){
      this.showPic = 'prev';
      this.grid.unselect(true);
      this.preview.hide();
   },
   
   getData: function(){
      this.data = [];
      var p = this.dom.getElementsByTagName('div');
      var label, img, box;
      for (var i = 0; i < p.length; i++) {
         if (p[i].className == 'pic') {
            box = p[i];
            img = p[i].getElementsByTagName('img')[0];
            var d = p[i].getElementsByTagName('div')
            for (var j = 0; j < d.length; j++) {
               if (d[j].className == 'label') {
                  label = d[j];
               }
            }
            this.data.push({
               //               'box': box,
               'img': img,
               'label': label
            });
         }
      }
   },
   select: function(i){
      this.back.style.display = 'none';
      if (!this.isPreview) {
         this.isPreview = true;
         this.actualPic = i;
         this.preview.show(this.data[i].img.src);
      }
   },
   hidePreview: function(){
      this.isPreview = false;
      this.back.style.display = 'block';
      this.grid.unselect();
   },
   hideGrid: function(){
      if (this.showPic == 'next') {
         if (this.actualPic < this.data.length - 1) {
            this.grid.select(++this.actualPic);
            this.preview.show(this.data[this.actualPic].img.src);
         }else{
            this.hidePreview();
            this.preview.hideMask();
            
         }
      }
      else 
         if (this.showPic == 'prev') {
            if (this.actualPic > 0) {
               this.grid.select(--this.actualPic);
               this.preview.show(this.data[this.actualPic].img.src);
            }else{
               this.hidePreview();
               this.preview.hideMask();
            }
         }
      this.showPic = 0;
   },
   getDom: function(){
      return this.dom;
   }
});

var GGrid = Class({
   init: function(parent, data){
      this.onPage = 15;
      
      this.maxPage = 0;
      this.actualPage = 1;
      this.isMove = false;
      this.isHide = false;
      this.prevPos = 0;
      
      this.parent = parent;
      this.data = data;
      
      this.tween = new dc.Tween({
         duration: 600,
         fps: 25
      });
      this.tween.addListener(this);
      
      this.tweenPic = new dc.Tween({
         duration: 500,
         fps: 25
      });
      var _self = this;
      this.tweenPic.addListener({
         onStep: function(pos){
            _self.movePic(pos);
         },
         onComplete: function(){
            _self.isMove = false;
            if (!_self.isHide) 
               _self.parent.hideGrid();
         }
      });
      
      this.tweenResize = new dc.Tween({
         duration: 500,
         fps: 25
      });
      this.tweenResize.addListener({
         onStep: function(pos){
            _self.parent.dom.style.height = _self.dom.style.height = parseInt(pos) + 'px';
         },
         onComplete: function(){
            if (_self.movePrev) {
               _self.movePrev = false;
               _self.move(_self.actualPage - 1);
            }
         }
      });
      
      
      this.create();
   },
   create: function(){
      this.dom = document.createElement('div');
      this.dom.className = 'gGrid';
      this.parent.getDom().appendChild(this.dom);
      
      this.container = document.createElement('div');
      this.container.className = 'gGContainer';
      this.dom.appendChild(this.container);
      var offset = this.dom.offsetWidth;
      var boxs = [];
      var width = 0;
      this.images = [];
      this.inLastBox = 0;
      for (var i = 0; i < this.data.length; i++) {
         if (i % this.onPage == 0) {
            this.inLastBox = 0;
            width += offset;
            this.container.style.width = width + 'px';
            this.maxPage++;
            var box = document.createElement('div');
            box.className = 'gGBox';
            this.container.appendChild(box);
         }
         this.inLastBox++;
         var img = new GGrid.Image(this, box, i, this.data[i]);
         this.images.push(img);
      }
      if (this.images.length < this.onPage) {
         var d = this.inLastBox % 5 == 0 ? 0 : 1;
         var dd = (parseInt(this.inLastBox / 5) + d) * 154;
         this.tweenResize.start(this.dom.offsetHeight, dd);
      }
      
   },
   onStep: function(pos){
      this.container.style.left = parseInt(pos) + 'px';
   },
   onComplete: function(){
      this.isMove = false;
      if (this.maxPage > 1) {
         if (this.maxPage == this.actualPage && this.inLastBox != this.onPage) {
            this.moveWithTween('next');
         }
      }
   },
   showNext: function(){
      if (this.maxPage > this.actualPage) {
         this.move(this.actualPage + 1);
      }
   },
   moveWithTween: function(side){
      if (side == 'next') {
         if (this.inLastBox != 0) {
            var d = this.inLastBox % 5 == 0 ? 0 : 1;
            var dd = (parseInt(this.inLastBox / 5) + d) * 154;
            this.tweenResize.start(this.dom.offsetHeight, dd);
         }
      }
      else 
         if (side == 'prev') {
            this.movePrev = true;
            this.tweenResize.start(this.dom.offsetHeight, 460);
         }
   },
   showPrev: function(){
      if (this.actualPage > 1) {
         if (this.actualPage == this.maxPage && this.inLastBox != this.onPage) {
            this.moveWithTween('prev');
         }
         else 
            this.move(this.actualPage - 1);
      }
   },
   move: function(i){
      if (!this.isMove) {
         this.actualPage = i;
         this.isMove = true;
         var act = -(i - 1) * this.dom.offsetWidth;
         this.tween.start(this.prevPos, act);
         this.prevPos = act;
      }
   },
   movePic: function(pos){
      this.images[this.actualShow].over.style.left = pos + 'px';
   },
   select: function(i){
      if (!this.isMove) {
         
         this.isMove = true;
         this.isHide = true;
         this.actualShow = i;
         var w = this.images[this.actualShow].over;
         this.tweenPic.start(0, w.offsetWidth);
         this.parent.select(i);
      }
   },
   unselect: function(isAnim){
      if(!isAnim){
         if (!this.isMove) {
            this.isMove = true;
            this.isHide = false;
            var w = this.images[this.actualShow].over;
            this.tweenPic.start(w.offsetWidth, 0);
         }
      }else{
         this.movePic(0);
         this.isMove = false;
         this.isHide = false;
      }
   }
});

GGrid.Image = Class({
   init: function(parent, cont, id, data){
      this.parent = parent;
      this.id = id;
      this.cont = cont;
      //this.data = data;
      this.create(data);
   },
   create: function(data){
   
      this.dom = document.createElement('div');
      this.dom.className = 'gGPic';
      this.cont.appendChild(this.dom);
      
      this.width = this.dom.offsetWidth;
      this.height = this.dom.offsetHeight;
      
      this.over = document.createElement('div');
      this.over.className = 'gGPicOver';
      
      this.dom.appendChild(this.over);
      
      this.img = data.img;
      this.img.className = 'gGPicImg';
      this.over.appendChild(this.img);
      
      var d = data.label.innerHTML;
      if (d.replace(/^\s|\s^/, '')) {
         this.label = data.label;
         this.label.className = 'gGPicLabel';
         this.over.appendChild(this.label)
      }
      
      this.mask = document.createElement('div');
      this.mask.className = 'gGPicMask';
      this.over.appendChild(this.mask);
      
      
      this.act = 0;
      this.tween = new dc.Tween({
         duration: 300,
         fps: 25
      });
      this.tween.addListener(this);
      
      var btn = document.createElement('div');
      btn.className = 'gGPicButton';
      this.over.appendChild(btn);
      
      dc.Event.addListener(btn, 'mouseover', this.overEv, this);
      dc.Event.addListener(btn, 'mouseout', this.outEv, this);
      dc.Event.addListener(btn, 'click', this.clickEv, this);
   },
   onStep: function(pos){
      var p = pos / 100;
      this.act = pos;
      this.mask.style.left = parseInt(p * this.width) + 'px';
      this.mask.style.bottom = parseInt(p * this.height) + 'px';
      if (this.label) 
         this.label.style.bottom = parseInt(-p * 36) + 'px';
   },
   overEv: function(){
      this.tween.start(this.act, 100);
   },
   outEv: function(){
      this.tween.start(this.act, 0);
   },
   clickEv: function(){
      this.parent.select(this.id);
   },
   getDom: function(){
      return this.dom;
   }
});
var GPBar = Class({
   init: function(parent, dom){
      this.parent = parent;
      this.dom = document.createElement('div');
      this.dom.className = 'gPBar';
      dom.appendChild(this.dom);
      
      this.next = document.createElement('a');
      this.next.className = 'next';
      this.next.setAttribute('href', '#a');
      this.next.innerHTML = 'Następne';
      this.dom.appendChild(this.next);
      dc.Event.addListener(this.next, 'click', this.nextEv, this);
      
      this.prev = document.createElement('a');
      this.prev.className = 'prev';
      this.prev.setAttribute('href', '#a');
      this.prev.innerHTML = 'Poprzednie';
      this.dom.appendChild(this.prev);
      dc.Event.addListener(this.prev, 'click', this.prevEv, this);
   },
   nextEv: function(){
      this.parent.showNext();
   },
   prevEv: function(){
      this.parent.showPrev();
   },
   show: function(){
      this.dom.style.display = 'block';
   },
   hide: function(){
      this.dom.style.display = 'none';
   }
   
});

var GPElement = Class({
   init: function(parent){
      this.parent = parent;
      this.isOpen = false;
      this.isMove = false;
      this.isRender = false;
      this.tween = new dc.Tween({
         duration: 400,
         fps: 25
      });
      this.tween.addListener(this);
      this.render();
   },
   render: function(){},
   onStep: function(pos){
      this.dom.style.left = parseInt(100 - pos) + '%';
   },
   onComplete: function(){
      this.isOpen = !this.isOpen;
      this.isMove = false;
      this.onCompleteAfter();
   },
   onCompleteAfter:function(){
      
   },
   show: function(){
      if (!this.isMove && !this.isOpen) {
         this.isMove = true;
         this.tween.start(0, 100);
      }
   },
   hide: function(){
      if (!this.isMove && this.isOpen) {
         this.tween.start(100, 0);
      }
   }
});

var GPMask = GPElement.extend({
   render: function(){
      if (!this.isRender) {
         this.isRender = true;
         this.dom = document.createElement('div');
         this.dom.className = 'gPMask';
         this.parent.dom.appendChild(this.dom);
         
         var d = document.createElement('div');
         d.className = 'gPLoader'
         var i = new Image();
         i.src  = URL + 'www/site/img/loader.gif';
         d.appendChild(i);
         this.dom.appendChild(d);
      }
   },
   onCompleteAfter:function(){
      if(!this.isOpen){
         this.parent.dom.style.display = 'none';
      }
   },
   hide: function(){
      var _self = this;
      setTimeout(function(){
         _self.base();
      },400);
   }
});

var GPBorder = GPElement.extend({
   render: function(){
      if (!this.isRender) {
         this.isRender = true;
         this.dom = document.createElement('div');
         this.dom.className = 'gPBorder';
         this.parent.dom.appendChild(this.dom);
      }
   },
   onCompleteAfter:function(){
      if(!this.isOpen){
         this.parent.hideBorderFinish();
      }else{
         this.parent.showBorderFinish();
      }
   },
   onStep: function(pos){
      this.dom.style.opacity = pos/100;
      this.dom.style.filter = 'alpha(opacity='+pos+')';;
   }
});


var GPreview = Class({
   init: function(parent){
      this.parent = parent;
      this.isOpen = false;
      this.isMove = false;
      this.isRender = false;
   },
   render: function(){
      if (!this.isRender) {
         this.isRender = true;
         this.dom = document.createElement('div');
         this.dom.className = 'gPreview';
         
         this.mask = new GPMask(this);
        
         this.border = new GPBorder(this);
         
         this.container = document.createElement('div');
         this.container.className = 'gPCont';
         this.border.dom.appendChild(this.container);
         
         this.img = document.createElement('div');
         this.img.setAttribute('title','Zamknij');
         this.img.className = 'gPImg';
         this.container.appendChild(this.img);
         
         
         this.bar = new GPBar(this, this.container);
         
         //this.parent.dom.appendChild(this.dom);
         
         document.body.appendChild(this.dom);
         
         this.width = this.img.offsetWidth;
         this.height = this.img.offsetHeight;
         dc.Event.addListener(this.img, 'click', this.hideEv, this);
      }
   },
   show: function(src){
      this.render();
      
      if ( ! this.mask.isOpen ) {
         this.mask.show();
      }
      if (!this.border.isMove && !this.border.isOpen) {
         this.isLoad = false;
         this.dom.style.display = 'block';
         this.img.innerHTML = '';
         var img = new Image();
         var _self = this;
         img.onload = function(){
            var cx = _self.width;
            var cy = _self.height;

            var x = this.width;
            var y = this.height;
            var my = parseInt(cy - y);
            var mx = parseInt((cx - x) / 2);
            
            _self.container.style.marginLeft = mx + 'px';
            _self.container.style.width = x + 'px';
            _self.border.show();
            
            _self.img.style.height = (y > cy) ? cy : y +'px';
            //_self.img.style.paddingTop = my + 'px';
            
            //_self.border.style.left = mx + 'px';
            //_self.border.style.top = my + 'px';
            //_self.border.style.height = y + 'px';
            _self.isLoad = true;
         }
         //setTimeout(function(){
            _self.src = src;
            _self.img.appendChild(img);
            img.src = src.replace(/\/mini\//, '/max/');
         //},1000);
      }
   },
   hideEv: function(){
      if(!this.border.isMove && this.isLoad){
         this.mask.hide();
         this.border.hide();
         this.parent.hidePreview();
      }
   },
   hide: function(){
      this.border.hide();
   },
   showNext: function(){
      this.border.hide();
      this.parent.showNextPreview();
   },
   showPrev: function(){
      this.border.hide();
      this.parent.showPrevPreview();
   },
   hideBorderFinish:function(){
      this.parent.hideGrid();
   },
   showBorderFinish:function(){
      
   },
   hideMask:function(){
      this.mask.hide();
   }
});

dc.Event.domReady(function(){
   new Gallery();
   
})