function debug (string)
{
  $("#debug").prepend(string +"<br />");
}

$(document).ready( function () {
  $("#comicflow").comicflow();
});


jQuery.fn.comicflow = function () 
{
  comicflow.init(this);
}


var comicflow = {

  init: function (element)
  {
    this.element = element;
    this.selectedImage = 0;

    this.width = this.element.innerWidth();
    this.height = this.element.innerHeight();

    this.images = this.element.find(".images .image");
    if (!this.images.length) return false;
    
    function autoSize() {
      if (400 - this.width <= 300 - this.height) {
      	$(this).css({ width: '100%' });
      }
      else {
        $(this).css({ height: '93.6%' });
      }
    }
    
    $.each(this.images.find('img'), function() {
      if (this.complete || this.naturalWidth) autoSize.call(this);
      else $(this).load(autoSize);
    });

    this.showImages(true);

    var _this = this;
    this.prevLink = this.element.find(".navigation .prev")
      .click( function () { _this.gotoPrev() })
      .css("opacity", "0.1")
      // .bind("dblclick", function () { _this.gotoStart() } )

    this.nextLink = this.element.find(".navigation .next")
      .click( function () { _this.gotoNext() })
      // .bind("dblclick", function () { _this.gotoEnd() } )

    this.animation = false;
      
    this.element.find(".print img").click( function () {
      $.each(_this.images, function (n, image) {
        if (n == _this.selectedImage)
        {
          $("#document").hide();
          $("body").append('<img id="printcomic" src="'+ $(image).attr("rel") +'" alt="" />');
          window.print();
 	  alert('Click OK to switch back to normal view.');
  	  $("#printcomic").remove();
  	  $("#document").show();
        }
      });
    });
  },


  showImages: function (init)
  {
    var prev_0 = this.selectedImage - 2;
    var prev_1 = this.selectedImage - 1;
    var selected = this.selectedImage;
    var next_1 = this.selectedImage + 1;
    var next_0 = this.selectedImage + 2;

    var _this = this;
    $.each(this.images, function (n, image) {

      if (n < prev_0)         position = -3;
      else if (n == prev_0)   position = -2;
      else if (n == prev_1)   position = -1;
      else if (n == selected) position =  0;
      else if (n == next_1)   position = +1;
      else if (n == next_0)   position = +2;
      else if (n > next_0)    position = +3;

       _this.animate(image, position);
    });
  },


  animate: function (image, position) 
  {
    var _this = this;
    _this.animation = true;

    var imageElement = $(image).find("img");

    // Set image sizes to auto
    //imageElement.css({"width": "", "height": ""});

    var options = {};

    // Current
    top_current = 0;
    width_current = 400;
    height_current = 320;
    padding_current = 5;
    border_current = 2;
    opacity_current = 1;
    zindex_current = 3;

    // Medium
    top_medium = 200;
    width_medium = 150
    height_medium = 150;
    padding_medium = 5;
    border_medium = 1;
    opacity_medium = 0.90;
    zindex_medium = 2;

    // Small
    top_small = 230;
    width_small = 100;
    height_small = 100; 
    padding_small = 5;
    border_small = 1;
    opacity_small = 0.75;
    zindex_small = 1;

    // Small left
    if (position == -2) options = { "top": top_small, "left": 0 };

    // Medium left
    if (position == -1) options = { "top": top_medium, "left": (width_medium / 2) };

    // Current
    if (position == 0)
    {
      options = {
        "top": top_current,
        "left": (this.width / 2) - (width_current / 2 + border_current + padding_current),
        "width": width_current,
        "height": height_current,
        "padding": padding_current,
        "borderWidth": border_current
      };

      // Show info
      $(".info")
        .hide()
        .html( $(image).find("p").html() )
        .fadeIn(250);

      _opacity = opacity_current;
      _zindex = zindex_current;

    }

    // Medium right
    if (position == +1) options = { "top": top_medium, "left": (this.width - (width_medium * 1.5)) - (padding_medium * 2) - (border_medium * 2) };

    // Small right
    if (position == +2) options = { "top": top_small, "left": (this.width - width_small - (padding_small * 2) - (border_small * 2)) };

    // Medium left/right
    if (position == -1 || position == +1)
    {
      options.height = height_medium;
      options.width = width_medium;
      options.borderWidth = border_medium;
      options.padding = padding_medium;
      _opacity = opacity_medium;
      _zindex = zindex_medium;
    }

    // Small left/right
    if (position == -2 || position == +2)
    {
      options.height = height_small;
      options.width = width_small;
      options.borderWidth = border_small;
      options.padding = padding_small;
      _opacity = opacity_small;
      _zindex = zindex_small;
    }

    // Hidden
    if (position < -2 || position > +2)
    {
      options.top = top_small;
      if (position < -2) options.left = 0;
      if (position > +2) options.left = this.width - width_small;
      $(image).hide();
    }
    else $(image).show();
    
    // All but current
    if (position != 0)
    {
      new_w = parseInt(imageElement.get(0).width);
      new_h = parseInt(imageElement.get(0).height);
      max_w = options.width;
      max_h = options.height;

      if (max_w < new_w) 
      {
        ratio = new_h / new_w;
        if (new_w > max_w) new_w = max_w;
        new_h = parseInt(new_w * ratio);
      }
      
      if (max_h < new_h) 
      {
        ratio = new_w / new_h;
        if (new_h > max_h) new_h = max_h;
        new_w = parseInt(new_h * ratio);
      }

      //imageElement.css({"width": new_w, "height": new_h});
    }


    // All but hidden
    if (position >= -2 && position <= +2)
    {
      $(image)
        .css({ "z-index": _zindex, "opacity": _opacity })
        .animate(options, 500, false, function () {
          _this.animation = false; 
        })
        .click( function () {
          _this.goto( position );
        })
    }
    else
    {
      $(image).css(options);
    }

  },


  goto: function (position) 
  {
    if (this.animation) return false;
    this.selectedImage = position;
    this.update();
  },


  /*
  gotoStart: function () 
  {
    this.selectedImage = 0;
    this.update();
  },
  */


  gotoPrev: function ()
  {
    if (this.animation || this.selectedImage == 0) return false;
    this.selectedImage--;
    this.update();
  },


  gotoNext: function ()
  {
    if (this.animation || this.selectedImage == this.images.length - 1) return false;
    this.selectedImage++;
    this.update();
  },

  /*
  gotoEnd: function () 
  {
    this.selectedImage = this.images.length - 1;
    this.update();
  },
  */

  update: function ()
  {
    if (this.selectedImage == 0)
      this.prevLink.css("opacity", 0.1);
    else
      this.prevLink.css("opacity", 1.0);

    if (this.selectedImage == this.images.length - 1)
      this.nextLink.css("opacity", 0.1);
    else
      this.nextLink.css("opacity", 1.0);
      
    this.showImages(false);
  }

}