Gallery  = JAK.ClassMaker.makeClass({NAME: "Gallery",VERSION: "1.0"});

Gallery.prototype.$constructor = function( imgPath, thumbPath){

  this.photo = new Array();
  this.title = new Array();
  this.orientation = new Array();
  this.reverseNames = {};
  this.imgPath = imgPath;
  this.thumbPath = thumbPath;
  this.perimeter= 2; // obrazky okolo vybraneho
  this.first = 0;
  this.last = this.first + 2 * this.perimeter;
  this.actual = 0;
  this.offOpacity = 40;

}

Gallery.prototype.setOpacity = function (obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;
  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}


Gallery.prototype.disappearThumbCb = function (el) {
  JAK.gel("thumbs").removeChild(el);
}

Gallery.prototype.appearThumbCb = function (el){
  this.setOpacity(el,this.offOpacity);

}

Gallery.prototype.disappearThumb = function (el,id){
  var start = 150;
  if (this.orientation[id] == 'l') start = 100;
  var i = new JAK.CSSInterpolator(el, 300, {interpolation:JAK.Interpolator.LINEAR, endCallback:this.disappearThumbCb.bind(this,el)} );
  i.addProperty('height', start, 0, 'px');
  this.setOpacity(el,0);
  i.start();

}

Gallery.prototype.appearThumb = function (el,id){
  var stop = 150;
  if (this.orientation[id] == 'l') stop = 100;
  var i = new JAK.CSSInterpolator(el, 300, {interpolation:JAK.Interpolator.LINEAR, endCallback:this.appearThumbCb.bind(this,el)} );
  i.addProperty('height',0 , stop, 'px');
  this.setOpacity(el,0);
  i.start();
}

Gallery.prototype.removeThumb = function (id, a){
  var el = JAK.gel("tid_"+id.toString());
  if (a != 0){
    this.disappearThumb(el,id);
  }else{
    JAK.gel("thumbs").removeChild(el);
  }
}

Gallery.prototype.createThumb = function (id){
  var iel = JAK.mel('img', { src:this.thumbPath+this.photo[id]}, {});
  var el = JAK.mel('div',{id:'tid_'+id.toString(),className: 'thumb'},{});
  el.appendChild(iel);
  if (id != this.actual){
    this.setOpacity(el,this.offOpacity);
  }
  if (this.orientation[id] == 'l'){
    el.style.height = "100px";
  }

  return el;
}

Gallery.prototype.appearImage = function(){
  var imgFrame = JAK.gel("imageFrame");
  var img = JAK.gel("image");
  img.style.visibility = "hidden";
  this.setOpacity(img,0);
  imgFrame.style.backgroundImage = "url('img/loading.gif')";

  img.src = this.imgPath + this.photo[this.actual];
  
  //set permalink
  var permalink = JAK.gel("permalink")
  //location.hash = "photo=" + this.photo[this.actual].split("/").pop();
  permalink.href=window.location.pathname + "#photo=" + this.photo[this.actual].split("/").pop();

  var pos = JAK.gel("pos");
  pos.innerHTML = (this.actual + 1).toString() + "/" + this.photo.length;
  var name = "";
  if(this.title[this.actual] != ""){
      name = " - " + this.title[this.actual];
  }

  JAK.gel("name").innerHTML = name;

}

Gallery.prototype.imageReady = function(e,elm){

  var imgFrame = JAK.gel("imageFrame");
  var margin = "0px";
  if (this.orientation[this.actual] == 'l'){ 
    //margin = "100px";
  }
  elm.style.paddingTop = margin;

  //animation start
  imgFrame.style.backgroundImage = 'none';
  elm.style.visibility = "visible";
  var i = new JAK.CSSInterpolator(elm, 15000, {interpolation:JAK.Interpolator.LINEAR} );
  i.addProperty('opacity',0 , 100, '');
  i.start();
}


Gallery.prototype.show = function(){
  //clear all 
  tdiv =  JAK.gel("thumbs");
  while(tdiv.childNodes.length >  0 ){
    tdiv.removeChild(tdiv.firstChild, 0);
  }
  for (i = this.first; i < this.last+1; i++){

    tdiv.appendChild(this.createThumb(i));

  }
  this.appearImage();
  this.fixNav();
}



Gallery.prototype.change = function (id){
  if (id == this.actual){
    return;
  }
  //how much we can move up ?
  //new from 
  var nfirst = id - this.perimeter;

  //correction
  if (nfirst < 0 ){
    nfirst = 0;
  }
  //new to 
  var nlast = nfirst + 2 * this.perimeter ;
  //correction
  if (nlast >= this.photo.length){
    nlast  = this.photo.length - 1;
    nfirst = nlast - (2 * this.perimeter );
    if (nfirst < 0 ){
      nfirst = 0;
    }
  }
  tdiv =  JAK.gel("thumbs");

  //off hilite
  this.setOpacity(JAK.gel("tid_"+this.actual.toString()),this.offOpacity);
  //is same
  if (nfirst == this.first && nlast == this.last){
    this.actual = id;
    //overlap ?
  }else if(nlast < this.first || nfirst > this.last){
    //no !!
    //clear all 
    tdiv =  JAK.gel("thumbs");
    while(tdiv.childNodes.length >  0 ){
      tdiv.removeChild(tdiv.firstChild, 0);
    }
    //show new
    this.first = nfirst;
    this.last = nlast;
    this.actual = id;
    this.show();
    return;

  }else if  (nfirst > this.first){
    for (i = this.first; i < nfirst; i++){
      this.removeThumb(i,1);
    }
    this.actual = id;
    for (i = this.last + 1; i <= nlast; i++){
      tdiv.appendChild(this.createThumb(i));
    }
    this.first = nfirst;
    this.last = nlast;
  }else{
    for (i = nlast + 1; i <= this.last; i++){
      this.removeThumb(i,0);
    }
    this.actual = id;
    for (i = this.first - 1; i >= nfirst; i--){
      var el = this.createThumb(i);
      this.setOpacity(el,0);
      el.style.height = "0px"

        tdiv.insertBefore(el,JAK.gel("tid_"+(i+1).toString())); 
      this.appearThumb(el,i);
    }

    this.first = nfirst;
    this.last = nlast;


  }

  this.setOpacity(JAK.gel("tid_"+this.actual.toString()),100);
  this.appearImage(); 
}


Gallery.prototype.moveOnImage = function (e, elm){
  //offset =  (document.all)?document.body.scrollLeft:window.pageXOffset;
  x=(e.layerX - elm.offsetLeft);
  

  if (x < 400 && this.actual != 0){
    // prev
    JAK.DOM.removeClass(elm,"next");   
    JAK.DOM.addClass(elm,"prev");   
    return;
  }
  if (x >= 400 && this.actual != this.photo.length - 1){
    //next
    JAK.DOM.removeClass(elm,"prev");   
    JAK.DOM.addClass(elm,"next");   
    return;
  }
    
  //remove prev and next 
    JAK.DOM.removeClass(elm,"next");   
    JAK.DOM.removeClass(elm,"prev");   
}


Gallery.prototype.changeEventImage = function(e, elm){
  //offset =  (document.all)?document.body.scrollLeft:window.pageXOffset;
  x=(e.layerX - elm.offsetLeft);
  
  if (x < 400 && this.actual != 0){
    this.prevImage(e,elm);
    this.moveOnImage(e,elm);
    return;
  }
  if (x >= 400 && this.actual != this.photo.length - 1){
    this.nextImage(e,elm);
    this.moveOnImage(e,elm);
    return;
  }

}

Gallery.prototype.fixNav = function(){
    if(this.actual == 0){
        JAK.gel("prev").style.visibility="hidden";
    }else{
        JAK.gel("prev").style.visibility="visible";
    }
    if(this.actual == this.photo.length - 1){
        JAK.gel("next").style.visibility="hidden";
    }else{
        JAK.gel("next").style.visibility="visible";
    }
}

Gallery.prototype.prevImage = function(e, elm){
    this.change(this.actual - 1);
    this.fixNav();
}
Gallery.prototype.nextImage = function(e, elm){
    this.change(this.actual + 1);
    this.fixNav();
}




Gallery.prototype.changeEventThumb = function(e, elm){
  var el = JAK.Events.getTarget(e).parentNode;
  var id = Number(el.id.substr(4));
  this.change(id);
  this.fixNav();
}

Gallery.prototype.parseXml = function(xml, status){
  if (status == 200) {
    var imgs = xml.getElementsByTagName("image");
    for (i = 0; i < imgs.length; i++){
      this.photo.push(imgs[i].getAttribute("src"));
      this.orientation.push(imgs[i].getAttribute("orientation"));
      this.title.push(imgs[i].getAttribute("title"));
      this.reverseNames[imgs[i].getAttribute("src").split("/").pop()] = i;
    }
    // add listeners
    JAK.Events.addListener( JAK.gel('thumbs'), 'click', this, 'changeEventThumb');
    JAK.Events.addListener( JAK.gel('image'),'load',this,'imageReady');
    JAK.Events.addListener( JAK.gel('imageFrame'),'click',this,'changeEventImage');
    JAK.Events.addListener( JAK.gel('imageFrame'),'mousemove',this,'moveOnImage');
    JAK.Events.addListener( JAK.gel('next'),'click',this,'nextImage');
    JAK.Events.addListener( JAK.gel('prev'),'click',this,'prevImage');


    var name = "";
    if (location.hash != "")
        name = location.hash.split("=").pop();

    this.show();

    //if hash change

    if (name == "")
        return;

    if (name in this.reverseNames){
        this.change(this.reverseNames[name]);
        //location.hash = "";

    }else{
         alert("Sorry vole error !");
    }



  } else {
    alert("Sorry vole error !");
  }


}


Gallery.prototype.load = function(galleryXml){
  //read xml by ajax
  var r = new JAK.Request(JAK.Request.XML, {method:"get"});
  r.setCallback(this, "parseXml");
  r.send(galleryXml, {});
}