jQuery(document).ready(function() {

    //OJ: Added 'if' statements around these to fix 'null' error on pages with none of these elements.

    swfobject.embedSWF("/staff/libertine-staff-full.swf", "staff-flash", "980", "590", "10.0.0", "/scripts/expressInstall.swf", null, null, null);           
        
        
    jQuery("#staffoverlay").overlay({
        expose: '#e3e3e3'
    });



    if (jQuery('table.clients img[rel]') != null) {
        var flashVideos = [];
        jQuery('table.clients img[rel]').css('cursor', 'pointer').overlay({
            expose: '#e3e3e3', // <-- overlay colour.
            target: '#overlay',
            api: true,
            top: 0,
            onBeforeLoad: function() {

                flashVideos = [];
                var content = eval(this.getTrigger().attr("rel"));
                var sTitle = this.getTrigger().attr("alt");

                var oTitleHtml = '<div id="tabs-title"><h2>' + sTitle + '</h2></div>';
                var oSlidesHtml = '<div class="images">';
                var oThumbsHtml = '<div class="tabs">';

                for (i = 0; i < content.length; i++) {

                    var fid = flashVideos.length;
                    var items = content[i];
                    var type = items[0];
                    var thumb = items[1];
                    var slide = items[2];
                    var img = slide.replace(".flv", ".jpg");

                    oThumbsHtml += '<a href="#"><img src="/gfx/client-work/' + thumb + '" alt="*"/></a>';

                    if (type == 'image')
                        oSlidesHtml += '<div><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" align="center"><img src="/gfx/client-work/' + slide + '" class="clientworkitem" /></td></tr></table></div>';
                    else if (type == 'flash') {
                        oSlidesHtml += '<div><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" align="center"><div id="overlayVideo' + flashVideos.length + '"></div></td></tr></table></div>';
                        flashVideos[flashVideos.length] = { image: '/gfx/client-work/' + img, file: '/gfx/client-work/' + slide, id: 'overlayVideo' + fid, width: 626, height: 415, version: '9', xi: '/flashvideo/expressInstall.swf', vars: { 'smoothing': 'true' }, parms: { 'allowfullscreen': true, 'allowscriptaccess': 'always', 'wmode': 'transparent' }, atts: {} }
                    }
                    else if (type == 'video') {
                        oSlidesHtml += '<div style="z-index: 100;"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" align="center"><div id="overlayVideo' + fid + '"></div></td></tr></table></div>';
                        flashVideos[flashVideos.length] = { image: '/gfx/client-work/' + img, file: '/flashvideo/player-licensed.swf', id: 'overlayVideo' + fid, width: 626, height: 415, version: '9', xi: '/flashvideo/expressInstall.swf', vars: { 'image': '/gfx/client-work/' + img, 'file': '/gfx/client-work/' + slide, 'backcolor': 'ffffff', 'frontcolor': '000000', 'lightcolor': 'ffffff', 'autostart': 'false', 'smoothing': 'true' }, parms: { 'allowfullscreen': true, 'allowscriptaccess': 'always', 'wmode': 'transparent' }, atts: {} }
                    }
                    else
                        oSlidesHtml += '<div><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle" align="center"><p>' + slide + '</p></td></tr></table></div>';
                }

                oThumbsHtml += '</div>';
                oSlidesHtml += '</div>';

                jQuery('#tabs-container').replaceWith('<div id="tabs-container">' + oSlidesHtml + oThumbsHtml + '<a href="#" class="next">&nbsp;</a><a href="#" class="prev">&nbsp;</a></div><a href="#" class="close">&nbsp;</a>');

                for (i = 0; i < flashVideos.length; i++)
                    swfobject.embedSWF(
                    flashVideos[i].file,
                    flashVideos[i].id,
                    flashVideos[i].width,
                    flashVideos[i].height,
                    flashVideos[i].version,
                    flashVideos[i].xi,
                    flashVideos[i].vars,
                    flashVideos[i].parms,
                    flashVideos[i].atts);

                jQuery("div.tabs").tabs(".images > div", {
                    effect: 'fade',
                    fadeOutSpeed: "slow",
                    rotate: true,
                    onBeforeClick: function() {
                        for (i = 0; i < flashVideos.length; i++) {
                            var ob = swfobject.getObjectById(flashVideos[i].id);
                            if (ob)
                                ob.StopPlay();
                        }
                    }
                });

                jQuery("a.prev").click(function() { var api = jQuery("div.tabs").data("tabs"); api.prev(); return false; });
                jQuery("a.next").click(function() { var api = jQuery("div.tabs").data("tabs"); api.next(); return false; });
                jQuery("a.close").click(function() {
                    jQuery("table.clients img[rel]").each(function() {
                        jQuery(this).overlay().close();
                    }); return false;
                });



                if (content.length == 1)
                    jQuery('#tabs-container .next,#tabs-container .prev').addClass('disabled');
            },
            onClose: function() {
                for (i = 0; i < flashVideos.length; i++)
                    swfobject.removeSWF(flashVideos[i].id);
                jQuery('#tabs-container').replaceWith('<div id="tabs-container"></div>')
                jQuery('#overlay a.close').remove();
            }
        });
    }
});