var currentSelected=null;
var zoomed=false;

function clearModelsGoHome() {
  clearModels();
  $('#content-holder').stop().animate({left:'0px'},updateSlider);
  $('#images').stop().animate({left:$('#text').outerWidth()+"px"});
  $('#scroll-right').fadeIn();
}

function clearModels() {
  currentSelected=null;
  updateButtons();
  $('.image-holder').removeClass('selected');
  $('.image-selected-overlay').fadeOut();
}

function selectModel(id) {
  if (id==0) return clearModelsGoHome();
  currentSelected=parseInt(id);
  $('.image-holder').removeClass('selected');
  $('#model-'+id).addClass('selected');
  // make sure they appear in the middle
  var topPos=($('.selected img').height()/2 - $('.selected .image-info').height()/2);
  $('.image-info').css('top',topPos-40);
  $('.image-selected-overlay').fadeIn();

  var offset=$('div.image-holder.selected').offset().left-(($(window).width()/2)-$('div.image-holder.selected').width()/2);
 
  if ($('#content-holder').offset().left-offset<0) {
      // move to the offset position
      $('#content-holder').stop().animate({left:'-='+offset+'px'},800);
      $('#images').stop().animate({left:'-='+offset+"px"},800);
  } else {
      // go home
      $('#content-holder').stop().animate({left:'0px'},800);
      $('#images').stop().animate({left:$('#text').outerWidth()+"px"},800);
  }

  updateSlider($('#content-holder').offset().left-offset); 
  updateButtons();
}

function updateButtons() {
  if (currentSelected!==null) {
    if (currentSelected!=0) {
      $('#scroll-left').fadeIn();
    } else {
      $('#scroll-left').fadeOut();
    }
  
    if (currentSelected!=collection.item.length) {
      $('#scroll-right').fadeIn();
    } else {
      $('#scroll-right').fadeOut();
    }
  } else {
    $('.scroll-button').fadeOut();
  }
}

function nextModel() {
  if (currentSelected<$('.image-holder').length) selectModel((currentSelected)+1);
}

function prevModel() {
  if (currentSelected>0) selectModel((currentSelected)-1);
}


$(document).keydown(function(e){
    if (e.keyCode == 37) { 
       // left
       if($('#scroll-left:visible').length>0) {
         prevModel();
         return false;
       }
    }
    if (e.keyCode == 39) { 
       // right
       if($('#scroll-right:visible').length>0) {
         nextModel();
         return false;
       }
    }
    if (e.keyCode == 32) {
      // space bar
      if ($('.image-holder.selected').length>0 && !zoomed) zoomModel(currentSelected);
    }  
    if (e.keyCode == 27) {
      // escape
      if(zoomed) { 
        unzoomModel();
      } else {
        clearModels();
      }
    }

});

function zoomModel(id) {
  if (zoomed) return;
  zoomed=true;
  // hide scrollbars so we dont get a double up
  $('html').css('overflow-y','hidden');
  var details=ich.fullscreen(collection.item[id-1]);
  $(details).css({position:'absolute',left:$(document).width()});
  $(details).find('#image-large-bar').css({left:$(document).width()});
  $('#container').append(details);
  $(details).animate({left:'0px'}, function() {

      $('#image-large img').css('left',($(window).width()-$('#image-large img').width())/2+'px');
      if ($('#image-holder-large img').outerHeight()>0) {
        $('#image-large-container').css('height',$('#image-holder-large img').outerHeight()+100+'px');
      }

  });
  $(details).find('#image-large-bar').animate({left:'0px'});


}

function unzoomModel() {
  if (!zoomed) return;
  zoomed=false;
  if ($('html').hasClass('ios')) {
    // if ios move back to the right spot
    window.scrollTo(0,1);
    iosFakeFixed();
  }
  $('html').css('overflow-y','auto');
  $('#image-holder-large').stop().animate({left:-$(document).width()},
                                         function() {
                                           $(this).remove();
                                         });
  $('#image-large-bar').animate({left:-$(document).width()});

}

function renderModels() {

  // add the model images and metadata
  if (ich.piece&& typeof collection!="undefined") {

    var pieces = ich.piece(collection);
    $('#images').append(pieces);


    // after models are inserted resize them to fit
    resizeHandler();
      $('#images').width($('.image-holder').length*$('.image-holder img:first').width());

    /*  (function($, elem) {
          var wrap = $('<div>').css({
              width: elem.width(),
              height: elem.height()
          });
          var win = $(window);
          elem.css('left',$('#text').outerWidth());
          elem.wrap(wrap);
          win.scroll(function() {
              elem.css('left', win.scrollLeft()*-1);
          });
      })(jQuery, $('#images')); */


    $('.image-holder').fadeIn('fast',  function() {
      $('#images').width($('.image-holder').length*$('.image-holder img:first').width()+100);
    });

    $('.image-holder img').load(function () {
      $('#images').width($('.image-holder').length*$('.image-holder img:first').width()+100);
    });

    $('a.zoom').live('click',function(e) {
      e.preventDefault();
      zoomModel(this.rel);
    });

    $('#image-large-close').live('click',function(e) {
      e.preventDefault();
      unzoomModel();
    });

    $('#scroll-left').click(prevModel);
    $('#scroll-right').click(nextModel);

    $('.image-selected-overlay').click(clearModels);
    $('#scroll-right').fadeIn(); 


  }

  $('.image-holder a').live('click',function(e) {
    e.preventDefault();
    selectModel(this.rel);
  });


}