//zoombox()
//by Jonah Fox

	if(!Array.indexOf){
	    Array.prototype.indexOf = function(obj){
	        for(var i=0; i<this.length; i++){
	            if(this[i]==obj){
	                return i;
	            }
	        }
	        return -1;
	    }
	}

(function($) {
  $.fn.zoombox = function(options) {
    var settings = {
      boxPercent: 0.9,
      duration: "slow",
      unzoomOthers: true,
      loading: "<div class=loading><img src='ajax.gif' /><div>"
    }

    var zoomedArray = []
    addZoomed = function(el) {
      removeZoomed(el)
      zoomedArray.push(el)
    }

    removeZoomed = function(el) {
      var i = isZoomed(el)
      if(i != -1) {
        start = zoomedArray.slice(0,i)
        end = zoomedArray.slice(i+1,zoomedArray.length)
        zoomedArray = start.concat(end)
      }
    }

    isZoomed = function(el) {
      return zoomedArray.indexOf(el)
    }

    var functions = {
      imageLoaded: function(el, img) {
        img = $(el).find('.image')[0]
        el.full_size = img
        el.max_width = $(img).width()
        el.max_height = $(img).height()
        el.thumb = $(el).find('.thumb')[0]
        $(el).find('.loading').hide()
        functions.zoom(el)
      },

      zoomDimensions: function(el) {
        var w = el.max_width;
        var h = el.max_height

        var boxWidth = ($(window).width()) * settings.boxPercent;
        var boxHeight =($(window).height()) * settings.boxPercent;

        widthRatio  = (boxWidth / w);
        heightRatio = (boxHeight / h);
        ratio = ((widthRatio < heightRatio) && (widthRatio!=0) || (heightRatio==0)) ? widthRatio : ratio = heightRatio;
        if(ratio > 1)
          ratio = 1

        var linkLeft = $(el.thumb).offset().left;
        var linkTop = $(el.thumb).offset().top;

        new_width = Math.ceil(w * ratio);
        new_height = Math.ceil(h * ratio);

        new_left = ((boxWidth - new_width) / 2) + (1-settings.boxPercent) * boxWidth/2;
        new_top =  ((boxHeight - new_height) / 2) + (1-settings.boxPercent) * boxHeight/2;

        return {width: new_width, height: new_height, left: new_left, top:new_top};

      },
      zoom: function(el) {
        css = functions.zoomDimensions(el)
        $(el.full_size).css({width: $(el.thumb).width(), height: $(el.thumb).height(), left: $(el.thumb).offset().left, top: $(el.thumb).offset().top})
        $(el.thumb).css({visibility: "hidden"})
        $(el.full_size).show().css({marginTop: 0, marginLeft: 0, zIndex: 1002}).animate(css, { duration: settings.duration, easing: settings.easing} )

        addZoomed(el)

        if(settings.onZoom)
          settings.onZoom.call(el)

        if(settings.unzoomOthers)
          $.each(zoomedArray, function(i,eel) {
            if(eel != el)
              functions.unzoom(eel)
          })
      },
      unzoom: function(el) {

        thumb_width = el.thumb.width
        thumb_height = el.thumb.height
        $(el.full_size)
          .css({zIndex: 10})
          .animate( {
                      width: thumb_width,
                      height: thumb_height,
                      left: $(el.thumb).offset().left,
                      top: $(el.thumb).offset().top},
                      { duration: settings.duration,
                        easing: settings.easing,
                        complete: function() {
                          $(el.thumb).css({visibility: "visible"})
                          $(this).hide().css({zIndex: 2})
                      }
                    })

        $(el).find('.loading').remove()
        removeZoomed(el)
        if(settings.onUnZoom)
          settings.onUnZoom.call(el)
      }
    }

    var imagesLoaded = {}

    $.extend(settings, options || {})

  	return this.click(function() {
      var img = $("<img/>")
      elem = this
      $elem=$(this)
      if(!elem.full_size) {
        file = $elem.attr('href')
        caption = $elem.text()
        $(img)
          .attr({ 'class': 'image', src: file, alt: caption})
          .css({marginTop: -10000, marginTop:-10000})
          .bind("load", function() {
            if(!imagesLoaded[file])
              imagesLoaded[file] = file
              functions.imageLoaded(elem, this)
            })

          $elem.append(img)

          if(imagesLoaded[file])
            functions.imageLoaded(elem, this.find('.image'))
          else if(settings.loading)
            $elem.append(settings.loading)
        }
        else {
          (isZoomed(elem) != -1) ? functions.unzoom(elem) : functions.zoom(elem)
        }
      return false;
    })
  }
})(jQuery);



$(document).ready(function(){
  $('.zoombox').zoombox({
    duration: 500,
    easing: 'backinout',
    onZoom: function() {
      //$.dimScreen(100, 0.2)
    },
    onUnZoom: function(el) {
      //$.dimScreenStop()
    }})
})