var IMG_DIR = '_gallery/';

function PortfolioImage(previewSrc, imgSrc, description)
{
  this.previewImg = new Image;
  this.img = new Image;
  this.description = description;

  this.previewImg.src = previewSrc;
  this.img.src = imgSrc;
}

function Portfolio(portfolioId, previewId, frameId, infoId)
{
  this.images = [];
  this.iCount = 0;
  this.portfolio = null;
  this.preview = null;
  this.frame = null;
  this.info = null;
  this.frameObj = null;
  this.portfolioWidth = 0;
  this.selected = 0;

  var self = this;
  function __construct()
  {
    self.portfolio = getElement(portfolioId);
    self.preview = getElement(previewId);
    self.frame = getElement(frameId);
    self.info = getElement(infoId);
    self.portfolio_img= getElement('portfolio_img');

    if(self.portfolio && self.preview && self.frame && self.info)
    {
      self.portfolioWidth = self.portfolio.offsetWidth;
      self.frameObj = new MovingObject(self.frame);
      self.frameObj.acceleration = 1;

      var i, n = self.iCount, left = Math.ceil(document.body.offsetWidth * 0.06);
      for(i=0; i < n; ++i)
      {
        self.preview.appendChild(self.images[i].previewImg);
        self.images[i].previewImg.style.left = left + 'px';
        left += self.images[i].previewImg.offsetWidth + 24;
        addListener(self.images[i].previewImg, 'click', selectImage);
        self.images[i].previewImg.id = 'prev_img_' + i;

        self.images[i].img.style.display = 'none';
        self.portfolio.appendChild(self.images[i].img);
        self.images[i].movingObj = new MovingObject(self.images[i].img);
        self.images[i].movingObj.imgId = i;
      }
      oldSelected = self.selected;
      self.frame.style.left = self.images[self.selected].previewImg.offsetLeft - 11 + 'px';
      self.frame.style.top = self.images[self.selected].previewImg.offsetTop - 11 + 'px';
      self.frame.style.width = self.images[self.selected].previewImg.offsetWidth + 22 + 'px';
     // moveFrame(self.selected);
      self.frame.style.display = 'block';
      //self.info.innerHTML = self.images[self.selected].description;

      var img = self.images[self.selected].img;
      img.style.display = 'block';
      img.style.left = Math.ceil(self.portfolioWidth / 2 - img.offsetWidth /2) +'px';


newHeight=self.images[self.selected].img.offsetHeight;
if(newHeight>self.portfolio_img.offsetHeight)
self.portfolio_img.style.height=newHeight+'px';

    }
  }

  var width, timer;
  function moveFrame(imgId)
  {
    var img = self.images[imgId].previewImg;

    width = img.offsetWidth + 22;

//    self.frameObj.go(img.offsetLeft - 11, 19);
    self.frameObj.go(img.offsetLeft - 11, img.offsetTop - 11);


    clearTimeout(timer);
    timer = setTimeout(changeWidth, 100);
  }

  function changeWidth()
  {
    self.frame.style.width = width + 'px';
    clearTimeout(timer);
  }

  var oldSelected;
  function selectImage(event)
  {
    var prevImg = event.target || event.srcElement;
    oldSelected = self.selected;
    self.selected = parseInt(prevImg.id.substr(9),10);

    moveFrame(self.selected);
    //self.info.innerHTML = self.images[self.selected].description;

    changeImage();
  }

  //var interval;
  function changeImage()
  {
    if(oldSelected == self.selected) return;

    var selected = self.images[self.selected],
        old = self.images[oldSelected];

    selected.img.style.display = 'block';


newHeight=selected.img.offsetHeight;
if(newHeight>self.portfolio_img.offsetHeight)
self.portfolio_img.style.height=newHeight+'px';



    if(self.selected - oldSelected > 0)
    {
       old.movingObj.go(- old.img.offsetWidth, 0, hideOld);
       selected.img.style.left = self.portfolioWidth +'px';
    }
    else
    {
       old.movingObj.go(Math.ceil(self.portfolioWidth), 0 , hideOld);
       selected.img.style.left = - selected.img.offsetWidth +'px';
    }


    selected.movingObj.go(Math.ceil(self.portfolioWidth / 2 - selected.img.offsetWidth / 2), 0);
    selected.movingObj.oldId = oldSelected;
    location.hash = (self.selected + 1);

    //clearInterval(interval);
    //interval = setInterval(hideOld, 100);
    function hideOld(mvObj)
    {
     // if(old.movingObj.finished)
     // {
       // clearInterval(interval);
        self.images[mvObj.imgId].img.style.display = 'none';
        //old.img.style.display = 'none';
     // }
    }
  }

  function resize()
  {
    self.portfolioWidth = self.portfolio.offsetWidth;
    self.images[self.selected].img.style.left = Math.ceil(self.portfolioWidth / 2 - self.images[self.selected].img.offsetWidth / 2) + 'px';

    var i, n = self.iCount, left = Math.ceil(document.body.offsetWidth * 0.06);
    for(i=0; i < n; ++i)
    {

        self.images[i].previewImg.style.left = left + 'px';
        left += self.images[i].previewImg.offsetWidth + 24;
    }
    moveFrame(self.selected);
  }

  addListener(window, 'load', __construct);
  addListener(window, 'resize', resize);
}

function _Portfolio_addImage(previewSrc, imageSrc, description)
{
  this.images[this.iCount] = new PortfolioImage(previewSrc, imageSrc, description);
  ++this.iCount;
}

Portfolio.prototype.addImage = _Portfolio_addImage;

function _Portfolio_select(imgId)
{

  if(this.images[imgId])
  {
    this.selected = imgId;
  }

}

Portfolio.prototype.select = _Portfolio_select;