$(document).ready(function() {
    //Examples of how to assign the ColorBox event to elements
    $("a[rel='example1']").colorbox();
    $("a[rel='example2']").colorbox({ transition: "fade" });
    $("a[rel='example3']").colorbox({ transition: "none", width: "75%", height: "75%" });
    $("a[rel='example4']").colorbox({ slideshow: true });
    $(".example5").colorbox();
    $(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
    $(".pagelink").colorbox({ transition: "none", width: "400px", height: "80%", iframe: true });
    $(".showimage").colorbox({ width: "780px", inline: true, href: "#showimage" });
    $(".cover").colorbox({ transition: "none", width: "435px", inline: true, href: "#cover" });
    $(".contact").colorbox({ transition: "none", width: "500px", inline: true, href: "#contact" });
    $(".legal").colorbox({ transition: "none", width: "500px", inline: true, href: "#legal" });
    $(".gubbins").colorbox({ transition: "none", width: "500px", inline: true, href: "#gubbins" });
   
    $(".example9").colorbox({
        onOpen: function() { alert('onOpen: colorbox is about to open'); },
        onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); },
        onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); },
        onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); },
        onClosed: function() { alert('onClosed: colorbox has completely closed'); }
    });

    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function() {
        $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
        return false;
    });
});