/* Author: Scott Fujan */


function FujTools() {
  var ft = this;
  ft.visualEffect = false;
  ft.showMenu = false;


  ft.addElement = function(id, type, to, before) {
    type = type || "div";
    to   = to || document.body;

    elem = document.createElement(type);
    $(elem).attr("id",id).css("display","none");
    if(before) {
      to.insertBefore(elem, before);
    } else {
      to.appendChild(elem);
    }
    return $(elem);
  }
  ft.staticElement = function(id, type, to, before) {
    if($("#"+id).length == 0)
      return ft.addElement(id, type, to, before);
    return $("#"+id).css("display","none");
  }

  
  ft.totalWidth = function(jelem) {
    return jelem.width()+
           parseInt(jelem.css("padding-left"))+parseInt(jelem.css("padding-right"))+
           parseInt(jelem.css("border-left-width"))+parseInt(jelem.css("border-right-width"))+
           parseInt(jelem.css("margin-left"))+parseInt(jelem.css("margin-right"));
  }
  ft.totalHeight = function(jelem) {
    return jelem.height()+
           parseInt(jelem.css("padding-top"))+parseInt(jelem.css("padding-bottom"))+
           parseInt(jelem.css("border-top-width"))+parseInt(jelem.css("border-bottom-width"))+
           parseInt(jelem.css("margin-top"))+parseInt(jelem.css("margin-bottom"));
  }


  ft.image = {
    current: null,
    map: {},

    init: function() {
      $("img.ft_open").each(function() { ft.image.init_img(this); });
    },
    init_img: function(img) {
      $(img).click(function(){
        if(ft.image.current && ft.image.current.img == this){
          ft.image.close();
        }else{
          ft.image.close();
          ft.image.open(this, ft.image.map[this.src.substring(this.src.lastIndexOf("/")+1)]);
        }
      }).hover(function() {
        var size = {w:120, h:17};
        var $block = $(this).width()>$(this).parent().width() ? $(this).parent() : $(this);
        var pos = {l: $block.offset().left+$block.width()-size.w,
                   t: $block.offset().top};
        ft.staticElement("ft_openimage").html("Click to View")
                                        .each(function(){while($(this).queue().length>0)$(this).stop();})
                                        .css({"position":"absolute", "left":pos.l, "top":pos.t, "display":"block",
                                              "color":"white", "background-color":"#777", "text-align":"center",
                                              "width":size.w, "height":0, "opacity":0, "font-weight":"bold", "font-size":"13px"})
                                        .animate({top:pos.t-size.h, height:size.h, opacity:.8}, 100);
      }, function() {
        var t = $("#ft_openimage").offset().top+$("#ft_openimage").height();
        ft.staticElement("ft_openimage").animate({top:t, height:0, opacity:0}, 100, null,
                                                 function() { $(this).css("display", "none"); });
      }).css("cursor", "pointer");
    },

    open: function(img, settings) {
      if(ft.image.current != null) closeImage();
      ft.visualEffect = true;
      //initialize settings
      // *tmpImg: temporary image for display
      // newSrc: src of new image (optional)
      // size: target image size before window size constraints
      // animation: animation type ("zoom", "fade", "none")
      // fadeveil: true to fade in/out the veil
      // speed: number of milliseconds timeframe
      // bWidth: border-width
      var tmpImg = new Image;
      tmpImg.src = img.src;
      settings = settings || {};
      var newSrc    = settings.newSrc || null;
      var size      = settings.size || {w:tmpImg.width, h:tmpImg.height};
      var animation = settings.animation || "zoom";
      var fadeveil  = settings.fadeveil || true;
      var speed     = settings.speed || 600;
      var bWidth    = settings.bWidth || 8;
      //load newSrc if needed
      if(newSrc) {
        var newImg = new Image;
        $(newImg).load(function() { tmpImg.src = newSrc; });
        newImg.src = newSrc;
      }
      //construct image params
      // final*: pixel-defined dimensions for new state
      // orig*: original-fixed positioning
      var maxWidth = size.w < $(window).width()-bWidth*2-50 ? size.w : $(window).width()*.9-bWidth*2;
      var maxHeight = size.h < $(window).height()-bWidth*2-50 ? size.h : $(window).height()*.9-bWidth*2-15;
      var final = {};
      if(maxWidth/size.w <= maxHeight/size.h) {
        final.w = maxWidth;
        final.h = size.h*maxWidth/size.w;
      } else {
        final.w = size.w*maxHeight/size.h;
        final.h = maxHeight;
      }
      final.t = ($(window).height()-final.h-bWidth*2)/3+15;
      final.l = ($(window).width()-final.w-bWidth*2)/2;
      var orig = {
        w: $(img).width(),
        h: $(img).height(),
        t: $(img).offset().top+($(img).outerHeight()-$(img).height())/2-bWidth,
        l: $(img).offset().left+($(img).outerWidth()-$(img).width())/2-bWidth};
      //setup and run veil
      ft.staticElement("ft_veil")
        .css({"opacity":0, "position":"fixed", "background-color":"black", "left":0, "top":0, "z-index":10,
              "width":""+$(window).width()+"px", "height":""+$(window).height()+"px", "opacity":0, "display":"block"})
        .click(ft.image.close);
      if(fadeveil) { $("#ft_veil").fadeTo(speed,.4); }
              else { $("#ft_veil").css("opacity",.4); }
      //setup close button
      ft.staticElement("ft_closebutton")
        .html('<div id="ft_closex"></div>CLOSE')
        .css({"position":"fixed", "color":"#FFF", "font-size":".8em", "font-weight":"bold", "letter-spacing":".1em",
              "z-index":21, "cursor":"pointer", "padding":"4px 6px 4px 19px",
              "background":'#888 url("/images/js/whitex.png") 6px 50% no-repeat',
              "top":final.t-$("#ft_closebutton").height()+bWidth-8,
              "left":final.l+final.w-$("#ft_closebutton").width()+bWidth*2-25})
        .click(ft.image.close);
      //ANIMATE
      if(animation == "fade") {
        //fade out/in image
        $(img).fadeTo(speed/2, 0, function() {
          $(tmpImg).css({"opacity":0, "position":"fixed", "z-index":20, "border":bWidth+"px solid #888",
                         "width":final.w, "height":final.h, "top":final.t, "left":final.l})
                   .fadeTo(speed/2, 1);
          document.body.appendChild(tmpImg);
          $("#ft_closebutton").fadeIn(speed/2);
        });
      } else
      if(animation == "zoom") {
        //zoom image
        $(tmpImg).css({"position":"fixed", "z-index":20, "border":bWidth+"px solid #888", 
                       "top":orig.t-$(window).scrollTop(), "left":orig.l-$(window).scrollLeft(), "width":orig.w, "height":orig.h})
                 .animate({"width":final.w, "height":final.h, "top":final.t, "left":final.l}, speed, function() {
                   $("#ft_closebutton").fadeIn(speed);
                 });
        $(img).css("opacity",0);
        document.body.appendChild(tmpImg);
      } else {
        $(img).css("opacity",0);
        $(tmpImg).css({"opacity":1, "position":"fixed", "z-index":20, "border":bWidth+"px solid #888",
                       "width":final.w, "height":final.h, "top":final.t, "left":final.l});
        document.body.appendChild(tmpImg);
        $("#ft_closebutton").css("display","block");
      }
      //finalize
      ft.image.current = {img:img, tmpImg:tmpImg, orig:orig, settings:{animation:animation, fadeveil:fadeveil, speed:speed}};
    },

    close: function() {
      if(ft.image.current == null) return;
      var img       = ft.image.current.img;
      var tmpImg    = ft.image.current.tmpImg;
      var orig      = ft.image.current.orig;
      var animation = ft.image.current.settings.animation;
      var fadeveil  = ft.image.current.settings.fadeveil;
      var speed     = ft.image.current.settings.speed;
      //fade out veil and close button
      $("#ft_veil").unbind('click', ft.image.close);
      if(fadeveil) { $("#ft_veil").fadeOut(speed); }
              else { $("#ft_veil").css("display","none"); }
//                   .fadeTo(speed,0, function(){$("#ft_veil").css("display","none")});
      $("#ft_closebutton").unbind('click', ft.image.close)
                          .css("display","none");
      //ANIMATION
      if(animation == "fade") {
        //fade out/in image
        $(tmpImg).fadeTo(speed/2, 0, function() {
          document.body.removeChild(tmpImg);
          $(img).fadeTo(speed/2, 1);
        });
      } else
      if(animation == "zoom") {
        //zoom image
        $("#ft_closebutton").fadeOut(speed);
        $(tmpImg).animate({"width":orig.w, "height":orig.h,
                           "top":orig.t-$(window).scrollTop(),
                           "left":orig.l-$(window).scrollLeft()}, speed, function() {
                   $(img).css("opacity",1);
                   $(tmpImg).fadeOut(speed/2, function() {
                     document.body.removeChild(tmpImg);
                   });
                 });
      } else {
        //default, no animation
        $(img).css("opacity",1);
        document.body.removeChild(tmpImg);
      }
      //cleanup
      ft.image.current = null;
      ft.visualEffect = false;
    }
  }
  
  
  ft.scrollslide = {
    ids: {},
    
    init: function() {
      $(window).scroll(ft.scrollslide.check);
      ft.scrollslide.check();
    },

    check: function() {
      var ids = ft.scrollslide.ids;
      for(id in ids) {
        var mintop = ids[id].mintop || 0;
        var jelem = $("#"+id);
        if(ids[id].fixed
           && ids[id].origTop-$(window).scrollTop() > mintop) {
          ids[id].fixed = false;
          ids[id].placeholder.css("display","none");
          jelem.css({"position":ids[id].placeholder.css("position"),
                     "top":ids[id].placeholder.css("top"),
                     "left":ids[id].placeholder.css("left")});
        }
        if(jelem.offset().top-$(window).scrollTop() < mintop) {
          ids[id].fixed = true;
          ids[id].origTop = jelem.offset().top;
          ids[id].placeholder = ft.staticElement(id+"placeholder", "div", jelem.get(0).parentNode, jelem.get(0))
                                  .css({"visible":"hidden",
                                        "position":jelem.css("position"),
                                        "top":jelem.css("top"),
                                        "left":jelem.css("left"),
                                        "width":ft.totalWidth(jelem),
                                        "height":ft.totalHeight(jelem)});
          jelem.css({"position":"fixed", "top":mintop, "left":jelem.offset().left+($(window).width()%2==0?0:1)});//!plus one to correct misrounding (in ubuntu firefox3)
          ids[id].placeholder.css("display","block");
        }
      }
    }
  }
  

  $(document).ready(function(){
    ft.image.init();
    ft.scrollslide.init();
    
    $("ul#menu > li:has(ul) > a").mouseover(function() {
      if(!ft.showMenu) {
        var _this = this;
        setTimeout(function() {
          if(ft.showMenu == true)
            $(_this).parent().children("ul").slideDown(200);
        }, 200);
      }
      ft.showMenu = true;
    }).mouseout(function() {
      var _this = this;
      ft.showMenu = _this;
      setTimeout(function () {
        if(ft.showMenu == _this) {
          $(_this).parent().children("ul").slideUp(100, function() { ft.showMenu = false; });
        }
      }, 200);
    });
    $("ul#menu li ul").mouseover(function() {
      ft.showMenu = true;
    }).mouseout(function() {
      var _this = this;
      ft.showMenu = _this;
      setTimeout(function () {
        if(ft.showMenu == _this) {
          $(_this).slideUp(100, function() { ft.showMenu = false; });
        }
      }, 200);
    });
  });
}
ft = new FujTools();