jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

jQuery.easing.instant = function (x, t, b, c, d) {
	return 0;
};


function logger(str) {
   try {
     console.log(str);
   } catch(e) {
     $('#debugWindow').append(str+'<br />')
   }
}

var PictureData = new Array();

function showPreviewImage(nr) {
  $('#imageHeading').html(PictureData[nr].imageName);
  $('#downloadArea2Top').html(PictureData[nr].imageName);
  pic = new Image();
  pic.src = PictureData[nr].previewImg;
  //logger(PictureData[nr].fileInfo);
  $('#imagePreview img').attr({ src: PictureData[nr].previewImg });
  $('#downloadArea1 a').attr({ href: PictureData[nr].downloadHref });
  $('#downloadArea2Bottom a').attr({ href: PictureData[nr].downloadHref });
  $('#fileInfo').text(''+PictureData[nr].fileInfo+'');
  $('#downloadArea2Bottom span').text(''+PictureData[nr].fileInfo+'');
  //$('#thumbNails img').css("border", "2px solid white");
  $('#thumbNails span').removeClass('thumbSelected');
}

function toggleScrollBtn(side) {
   if(side == 'prev') {
      //if thumbnails are scrolled to the left than disable the "prev" button
      if ($('#thumbNailsContainer')[0].scrollLeft < 500) {
        $('#scrollBtnPrev').addClass('inactive');
      } else {
        $('#scrollBtnPrev').removeClass('inactive');  
      }
      $('#scrollBtnNext').removeClass('inactive');
   } else {
      //same as above but the other way around
      if ($('#thumbNailsContainer')[0].scrollLeft > (nrThumbNails*74-700)) {
        $('#scrollBtnNext').addClass('inactive');
      } else {
        $('#scrollBtnNext').removeClass('inactive');  
      }
      $('#scrollBtnPrev').removeClass('inactive');
   }
}
var nrThumbNails;

$(function(){
  //check for the existance of a table containing signature for the photos-list table:
  if($('#relative_container table tr td[colspan=3].largebodybold span').length != 0 ) {
    var tablePhotos = $('#relative_container table')[0];
    //select all rows that contain columns that don't have colspan=3
    
    var galleryHeading = $('#relative_container table tr td[colspan=3].largebodybold span').text();
    $('#galleryHeading').text(galleryHeading);

    $('tr:has(td[colspan!=3])', tablePhotos).each(function(i) {
      nrThumbNails = i;
      //$('#testTable').append($(this));
      var photoThumb = $('td:first-child img',this);
      photoThumb = $('<span></span>').append(photoThumb);

      var photoLink = $('td:first-child a', this).attr('onClick');
      //TODO: modify the pattern here (optional):
      var pattern = /http.+?((jpg)|(png)|(JPG)|(PNG)|(GIF)|(gif))/;
      var result = pattern.exec(photoLink)[0];
      //logger(result);
      //logger(photoLink);
      var imgThumb = '<img src="'+result+'" />'
      var aThumb = $('<a href="javascript:void(0);"></a>');
      
      var fileInfo = $('td span.smallbody', this).text();
      var pattern = /\(.*\)/;
      var fileInfo = pattern.exec(fileInfo);
      //logger(fileInfo);
      
      /* Add image metadata into PictureData array */
      PictureData.push({ 
        previewImg: result, 
        imageName: $('td span.largebodybold', this)[0].innerHTML,
        fileInfo: fileInfo,
        downloadHref: $('td:last-child span.smallbody a:eq(1)', this).attr('href'),
        downloadTxt:  $('td:last-child a', this).text()
      });

      //logger(PictureData[i].downloadHref);

      //UI events: 
      //1) Click
      $(photoThumb).click(function() {
        showPreviewImage(i);
        //preload images
        /*pic = new Image();
        pic.src = result;
        $('#imagePreview').empty().append('<img src="'+result+'" />');
        $('#thumbNails img').css("border", "2px solid white");*/
        //$('img', this).css("border", "2px solid blue");
        $(this).addClass('thumbSelected');
      });
      //2) Hover
      $(photoThumb).hover(function() {
          $(this).addClass('thumbHover');
          //$('img', this).css("border", "2px solid blue");
        },
        function() {
          $(this).removeClass('thumbHover');
          //$('img', this).css("border", "2px solid white");
        }
      );
      
      $('#thumbNails').append(photoThumb);

      //select and show the first image
      if(i==0) {
        showPreviewImage(i);
        $(photoThumb).addClass('thumbSelected');
        //$('img', photoThumb).css("border", "2px solid blue");
      }
      //$('#imagePreview').append('<img src='+result+' />');
    });
    nrThumbNails++; 
   

    //set the width of the thumbnails container
    $('#thumbNails').css({width: 55+nrThumbNails*74 + 'px' });
    
    //if more than 6 images - enable thumbnail scrolling
    if( $('#thumbNails span').length > 6 ) {
      $('#thumbNailsContainer').serialScroll({
        items:'img',
        prev:'#scrollBtnPrev',
        next:'#scrollBtnNext',
        offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
        start:0, //as we are centering it, start at the 2nd
        duration:0,
        force:true,
        step:4,
        stop:true,
        lock:true,
        cycle:false, //don't pull back once you reach the end
        //easing: 'instant',
        easing:'easeOutQuart', //use this easing equation for a funny effect
        jump: false //click on the images to scroll to them
      });
      //By default, disable "prev" button!
      $('#scrollBtnPrev').click(function(){toggleScrollBtn('prev');});
      $('#scrollBtnNext').click(function(){toggleScrollBtn('next');});
      toggleScrollBtn('prev');
    } else {
       $('.scrollBtn').addClass('inactive');
    }
  } else { //hide the gallery container if no thumbnails are present
    $('#galleryContainer')[0].style.display="none";
  }
});