﻿/**
Lightbox function:
- Generate blocked background.
* @author    Jacob Stellingwerf <jacob.stellingwerf@infoprojects.nl>
*/
(function($){
 /*
  Chain functions down here
  */

 /*
  Create dimmed div over elements.
  */
  
  var __dimmedElements = null;
  
  $.fn.dim = function(options) {
    if (!__dimmedElements) {
      __dimmedElements = $("#abracadabra");
    }
		// default configuration options
    var cfg = $.extend({
      className: "dimmed",
      opacity: 0.4,
      backgroundColor: "#000000",
      speed: "slow",
      startEvent: null,
      endEvent: null
    }, options||{});
    
    var dimThis = $(this);
    if (dimThis.size() > 1) {
      dimThis.each(function(){ $(this).dim(cfg); });
    }
    else if (dimThis.size() == 1) {
      // Create unique div maybe include content in it. 
      var tag = $(this).tag() || "body";
      if (__dimmedElements.filter("[dim='+tag+']").size() == 0) {
      
        var dimmed = $('<div class="'+cfg.className+'" dim="'+tag+'"></div>').makeId();
        // Set id on dimmed tag, for easy matching
        $("body").append(dimmed.hide());
        __dimmedElements = __dimmedElements.add(dimmed);
        
        var size = function(dimThis) {
          var contentAndOverlay = $.findContentAndOverlay(dimThis);
          var rectangle = contentAndOverlay.content.rectangle();
          
          contentAndOverlay.overlay.css("left", rectangle.left);
          contentAndOverlay.overlay.css("top", rectangle.top);
          contentAndOverlay.overlay.css("width", rectangle.width);
          contentAndOverlay.overlay.css("height", rectangle.height);
        };

        size(dimThis);

        dimmed.css({
          "position": "absolute",
          "background-color": cfg.backgroundColor, 
          opacity: 0
        });
        
        $.findContentAndOverlay(dimThis).content.resize(function() {
          size(this);
        });
        dimmed.show().click(
          function() {
            $(this).undim(cfg);
          }
        ).stop().animate({opacity: cfg.opacity}, cfg.speed,
          function() {
            if (cfg.startEvent && $.isFunction(cfg.startEvent)) {
              cfg.startEvent();
            }
          }
        );
      }
    }
    
    return dimThis;
  };

  $.findContentAndOverlay = function(dimThis) {
    var dimmed;
    if (dimThis.filter("[dim]").size() == 1) {
      // Selected item is dimmed div
      dimmed = dimThis;
      dimThis = $("[dimId="+dimmed.attr("id")+"]");
    }
    else if (dimThis.tag()) {
      dimmed = __dimmedElements.filter("[dim="+dimThis.attr("dimId")+"]");
    } 
    else {
      dimmed = __dimmedElements.filter("[dim=body]");
    }
    return {
      content: dimThis,
      overlay: dimmed
    };
  };

 /*
  Undim div over elements.
  */
  $.fn.undim = function(options) {
    if (!__dimmedElements) {
      __dimmedElements = $("#abracadabra");
    }
		// default configuration options
    var cfg = $.extend({
      speed: "slow",
      endEvent: null
    }, options||{});
    
    var undimThis = $(this);
    if (undimThis.size() > 1) {
      undimThis.each(function(){ $(this).undim(cfg); });
    }
    else if (undimThis.size() == 1) {
      var contentAndOverlay = $.findContentAndOverlay(undimThis);
      
      undimThis = contentAndOverlay.content;
      var dimmed = contentAndOverlay.overlay;
      
      if (cfg.endEvent && $.isFunction(cfg.endEvent)) {
        // first fire endEvent for undim.
        cfg.endEvent();
      }
      dimmed.stop().animate({opacity: 0}, cfg.speed, 
        function() {
          $(this).hide().remove();
        }
      );
      __dimmedElements = __dimmedElements.not(dimmed);
    }
    
    return undimThis;
  };

 /*
  Global functions down here
  */
  
})(jQuery);

