(function($){

/*

<div id="root">
  <div class="loading"></div>
  <div class="showroom"></div>
  <div class="meta-text">
    <div class="meta-video">Video</div>
    <div>English title</div>
    <div>Chinese title</div>
    <div>Year</div>
    <ul class="image-navi">
      <li class="active"></li>
      <li></li>
    </ul>
  </div>
  <div class="close"></div>
</div>

*/


var ns = 'Project';

window[ns] = function ( id, options ) {
  this.id = id;
  this.options = options;
  
  this.ajax_url = AJAX_BASE + 'project/?id=' + this.id;
  this.preparing = true;
  this.index = 0;
  this.currentImage = false;
  
  this.prepare();
  this.observe();
  this.setClosePosition();
  this.load();
};

window[ns].prototype = {
  
  prepare: function () {
    /* root */
    this.root = $('<div>').appendTo('body').attr('id', 'project-viewer');
    this.root.css({
      width: $(window).width(), height: $(window).height()
    });
    
    
    /* loading */
    this.loading = $('<div>').appendTo(this.root).attr('id', 'loading').addClass('active');
    this.loading.css({
      width: $(window).width(), height: $(window).height()
    });
    
    
    /* showroom */
    this.showroom = $('<div>').appendTo(this.root).attr('id','showroom');
    
    
    /* meta */
    this.meta = $('<div>').appendTo(this.root).addClass('meta');
    this.meta_video = $('<div>').appendTo(this.meta);
    this.meta_en = $('<div>').appendTo(this.meta);
    this.meta_zh = $('<div>').appendTo(this.meta);
    this.meta_year = $('<div>').appendTo(this.meta);
    
    this.navi = $('<ul>').appendTo(this.meta).addClass('image-navi');
    
    /* close */
    this.close = $('<div>').appendTo(this.root).addClass('close');
    
    /* full screen */
    new FullWindow(this.root);
  },
  
  observe: function () {
    this.close.click( $.proxy( this.clickClose, this ) );
    $(window).resize( $.proxy( this.resize, this ) );
  },
  
  resize: function () {
    this.root.css({
      width: $(window).width(), height: $(window).height()
    });
    this.setClosePosition();
  },
  
  load: function () {
    $.getJSON( this.ajax_url, $.proxy( this.done, this ) );
  },
  
  done: function ( data ) {
    /* video */
    this.hasVideo = false;
    if ( $.trim(data.video) !== "" ) {
      this.hasVideo = true;
      this.meta_video.addClass('meta-video');
      this.meta_video.data('video_id', stripslashes(data.video) );
      this.setupVideo();
    }
    
    /* meta */
    this.meta_en.html(data.entitle);
    this.meta_zh.html(data.zhtitle);
    this.meta_year.html(data.year);
    
    /* image */
    this.imageLib = eval(data.image);
    this.build_navi();
    this.loadImage();
  },
  
  setupVideo: function () {
    this.meta_video.click( $.proxy( this.clickVideo, this ) );
  },
  
  clickVideo: function () {
    this.video = new Video( this.meta_video.data('video_id') );
  },
  
  build_navi: function () {
    for ( var i = 0 ; i < this.imageLib.length; i ++ ) {
      $('<li>').appendTo(this.navi).html("").addClass('loading');
    }
    this.naviItem = this.navi.find('li');
  },
  
  loadImage: function () {
    if ( this.imageLib.length == 0 ) this.loadImage_end();
    this.loadIndex = 0;
    this.images = [];
    this.loadSingle();
  },
  
  loadImage_end: function () {
    this.loading.removeClass('active');
    this.preparing = false;
  },
  
  loadSingle: function () {
    if ( this.loadIndex == this.imageLib.length ) return;
    
    var img = $('<img>');
    img.load( $.proxy( this.loadSingleComplete, this ) );
    img.attr('src', this.imageLib[ this.images.length ] );

    this.images.push( img );
  },
  
  loadSingleComplete: function () {
    var button = this.naviItem.eq(this.loadIndex);
    button.removeClass('loading');
    button.click( $.proxy( this.click, this ) );
    this.loadIndex++;
    this.loadSingle();
    
    if ( ! this.preparing ) return;
    this.show(0);
    this.loadImage_end();
  },
  
  show: function ( index ) {
    var prevIndex = this.index;
    this.index = index;
    
    if ( this.currentImage ) {
      this.currentImage.hide();
    }
    
    this.naviItem.eq(prevIndex).removeClass('active');
    this.currentImage = new CenterImage({
        image: this.images[this.index].clone(),
        root:  this.showroom
      });
    
    this.naviItem.eq(this.index).addClass('active');
  },
  
  hide: function () {
    this.root.fadeOut(function(){$(this).remove();});
  },
  
  click: function ( event ) {
    var target = event.currentTarget;
    var index = $.inArray(target, this.naviItem);
    
    this.show(index);
  },
  
  clickClose: function () {
    this.exit();
    (this.options.closeCallback || $.noop)();
  },
  
  setClosePosition: function () {
    var width = $(window).width();
    if ( width < 1060 ) {
      this.close.addClass('bottom');
    } else {
      this.close.removeClass('bottom');
    }
  },
  
  exit: function () {
    this.hide();
  }
  
}

})(jQuery);