/*************\
        smallBox Lightbox - 2009 Alan Languirand
        A lightbox script that leaves a very small footprint. 
        This script requires the Jquery library - www.jquery.com
        
        ----Keep the above copyright!----
        
        There are more comments here than code, so feel free to remove them for production sites.
        Make sure to retain the copyright above if you choose to remove comments from this script. 
        
        Using the lightbox function requires only three things:
        
        1. a div with a "class" of "lightbox" and an arbitrary "id" 
        2. an "a" tag in that div with a class of "lbOff"
        3. an "a" tag with a class of "lbOn" and a "rel" set to the "id" of the div in step 1
        
        The only classes that are required are "lbOn", "lbOff" and "lightbox".
        The "div's" "id" and the  "a's" "rel" tags are required and must match, but are arbitrary.
        
        example: 
        
        <a href="#" class="lbOn" rel="Copyright">&copy;2009 Alan Languirand.</a>
        
        <div id="Copyright" class="lightbox">
                <h2>SmallBox Lightbox</h2>
                &copy;2009 Alan Languirand. <br>
                Please use this script in any of your web projects, but be sure to give credit where credit is due. Thank you!
                <a href="#" class="lbOff">back to the action</a>
        </div>
        
\*************/

$(document).ready(function(){        
        $(".lightbox .lbContent").wrap("<div class='lbWrapper'></div>");
        var newTop = parseInt($(".lightbox").css("height"))* -1;
        
        $(".lightbox").css({top: newTop}).hide(); // hide lightboxes. Not hidden with CSS for accessibility. 
        
        $(".lbOn").click(function(){ //attach click event to lbOn classes
                $(".lightbox").hide(); //hide any active light boxes
                var lbTarget ="#" +  $(this).attr("rel"); //get the relation tag from the triggering element and build it into a CSS style id selector
                $(lbTarget).show();
                $("#wrapper").animate({opacity: ".5"}, 500, "easeOutCubic");
                $(lbTarget).animate({top: "0px"}, 1000, "easeOutCubic");
                
                
            });
        
        $(".lbOff").click(function(){ //attach click event to lbOff classes
                var goToTop = (parseInt($(".lightbox:visible").css("height")) * -1) + "px";
                $(".lightbox:visible").animate({top: goToTop}, 500, "linear", function(){
                        $(this).hide();
                        $("#wrapper").animate({opacity: "1"}, 500);
                        })
                
            });
        
        function lbTrigger(targetElement){ //attach click event to lbOn classes
                $(".lightbox").hide(); //hide any active light boxes
                $(targetElement).show();
                $("#wrapper").animate({opacity: ".5"}, 500, "easeOutCubic");
                $(lbTarget).animate({top: "0px"}, 1000, "easeOutCubic");
                
                
            };
        
    });