/*
 * carousel
 * jQuery based "lightbox" effect for displaying videos from carousel
 * @author Simon Pollard for Digital Future
 * @version 1.0
 * @update August 2011
 *
 */

/*
 * On Load functions
 */
$j(function() {
    $j('#sidebar .bc_carousel_items').css('display','block');
    // find out how many groups of 4 videos we have
    bc_boxes = $j('#sidebar .bc_carousel_items').children();
    // now set the width of the container to match that count (check CSS for box width)
    bc_no_boxes = bc_boxes.length;
    $j('#sidebar .bc_carousel_items').css('width',(bc_no_boxes*294));
    $j('#sidebar .bc_carousel_list').scrollTo('0px',0);
    // Set up the current slider position for the widget and pop up (pu)
    current_bc_pos = 1;
    current_bc_pu_pos = 1;   
});

/*
 * Show Video
 * @requires height int height of the image
 * @requires width int width of the image
 * @requires video int the video id
 */
function showVideo(height,width,video)
{
    // Create our video player object
    video_player = '';
    // Check if we need InSkin
    if(window.useInSkinVids == 1) {
        video_player += '<!-- Start of InSkin Container -->';
        video_player += '<div id="InSkinContainer_myInSkin1" class="InSkinContainer" style="width: 610px; height:439px; clear:both;">';
        video_player += '<!-- Start of Content/Player Container -->';
        video_player += '<div id="InSkinContentContainer_myInSkin1" class="InSkinContentContainer" style="width: 550px; height: 339px;">';
    }
    video_player += '<div style="display:none">Basic SFX video player</div>';
    video_player += '<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>';
    video_player += '<script type="text/javascript" src="http://admin.brightcove.com/js/APIModules_all.js"></script>';
    video_player += '<object id="myExperience'+video+'" class="BrightcoveExperience">';
    video_player += '<param name="bgcolor" value="#FFFFFF" />';
    video_player += '<param name="width" value="610" />';
    video_player += '<param name="height" value="339" />';
    // playerID and playerKey values are set in Carousel.php
    video_player += '<param name="playerID" value="'+window.playerID+'" />';
    video_player += '<param name="playerKey" value="'+window.playerKey+'" />';
    video_player += '<param name="isVid" value="true" />';
    video_player += '<param name="isUI" value="true" />';
    video_player += '<param name="dynamicStreaming" value="true" />';
    video_player += '<param name="@videoPlayer" value="'+video+'" />';
    video_player += '<param name="wmode" value="opaque" />';
    video_player += '</object>';
    video_player += '<script type="text/javascript">brightcove.createExperiences();</script>';
    
    // Check if we need InSkin
    if(window.useInSkinVids == 1) {
        video_player += '</div>';
        video_player += '</div><!-- End of InSkin Container --><!-- Start of InSkin Initialization -->';
        video_player += '<script type="text/javascript">';
        video_player += 'myInSkin1.init();';
        video_player += '</script>';
        video_player += '<!-- End of InSkin Initialization -->';
        video_player += '<!-- End of InSkin Ad Code -->';
    }

    // Check if our pop-up is already displayed
    if ($j("#cover-content").css('display')=='block') {
        // If so then we just need to update the video part of the pop up       
        $j(".bc_carousel_video").html('');
        $j(".bc_carousel_video").append(video_player);
        
        // Remove selected class from any links
        $j('#cover-content .bc_carousel_items a').removeClass('selected');
        // Add selected class to current video button
        $j('#cover-content .bc_vid_'+video).addClass('selected');
        
    } else { 
        // Otherwise we need to create a new pop up
        
        // IF IE (Manipulating objects causes the page to reload - thus we just hide them)
        if($j.browser.msie) {
            // Hide the flash objects on the page and wrap them in a div to maintain height etc...
            $j('#content object').each(function(){
                $j(this).wrap('<div class="ie_flash_div" style="height:'+$j(this).attr('height')+'px;margin-bottom:15px;" />');
                $j(this).css('display','none');
            });
        } else {
            // Allow transparent overlay on youtube videos embed using iframes
            $j("iframe").each(function(){
              var ifr_source = $j(this).attr('src');
              if(ifr_source) {
                  var wmode = "wmode=transparent";
                  if(ifr_source.indexOf('?') != -1) $j(this).attr('src',ifr_source+'&'+wmode);
                  else $j(this).attr('src',ifr_source+'?'+wmode);
              }
            });
            
            // Allow transparent overlay on youtube videos embed using flash
            $j('object').each(function(){
                $j(this).prepend('<param name="wmode" value="transparent">');
                var flashHtml = $j(this).html().replace ('<embed ', '<embed wmode="transparent"');
                $j(this).html('');
                $j(this).html(flashHtml);
            });
        }

        // Set default values
        if (height==undefined)
        {height = 400;}

        if (width==undefined)
        {width = 700;}

        if (video==undefined)
        {video = "1076478858001";}

        // Add cover and cover-content divs to the dom
        $j("body").append("<div id='cover'></div><div id='cover-content'></div>");

        // Set the cover div to be transparent at first
        $j("#cover").css("filter","alpha(opacity=0)");
         // Work out the height of the entire page
        //$doc_height =  (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight;
        // Now set the cover to be that height (so it works in IE)
        //$j("#cover").css("height",$doc_height);
        
        // Now fade in the cover
        $j("#cover").animate({opacity: 0.75}, 200, function(){
            // Set the dimensions of the content box to match the image
            $j("#cover-content").css("height",+height);
            $j("#cover-content").css("margin-top",+-(height/2));
            $j("#cover-content").css("width",+width);
            $j("#cover-content").css("margin-left",+-(width/2));
            // Add in the video
            output = '<a href="javascript:hideBox();" class="hide_bc_carousel">X Close</a><div class="bc_carousel_video">';
            output += video_player;
            output += '</div>';
            $j("#cover-content").append(output);
            
            // Bring in our video list from the widget - and add in navigation buttons
            $j("#cover-content").append('<div class="bc_carousel_list">'+$j('.bc_carousel_list').html()+'</div><a href="javascript:bc_carousel_pu_prev();" class="bc_carousel_pu_prev">&laquo; Previous</a><a href="javascript:bc_carousel_pu_next();" class="bc_carousel_pu_next">Next &raquo;</a>');
            
            // Now set up our video list
            $j("#cover-content .bc_carousel_list").css('overflow','hidden');
            // Set the width dependant on the number of video boxes
            $j('#cover-content .bc_carousel_items').css('width',(bc_no_boxes*605));
            
            if(current_bc_pos==1) {
                // Hide the previous navigation element
                $j('#cover-content .bc_carousel_pu_prev').css('display','none');
            }
            if(current_bc_pos==bc_no_boxes) {
                // Hide the next navigation element
                $j('#cover-content .bc_carousel_pu_next').css('display','none');
            }
            
            // Now fade in the content box
            $j('#cover-content').fadeIn('1000');
            
            // Work out what group we are displaying and make sure the pop up matches the widget
            slide_bc_across = current_bc_pos-1;
            $j('#cover-content .bc_carousel_list').scrollTo((slide_bc_across*605)+'px');
            
            // Remove selected class from any links
            $j('#cover-content .bc_carousel_items a').removeClass('selected');
            // Add selected class to current video button
            $j('#cover-content .bc_vid_'+video).addClass('selected');
            
            // Set the pop up slide position to match the widget
            current_bc_pu_pos = current_bc_pos;
            
        });
        
        // Add a click function to the cover (so it hides when clicked)
        $j("#cover").click(function () {
                hideBox();
        });

    }
}

/* 
 * Hide Box
 */
function hideBox()
{
    // Fade out cover-content div and remove from dom
    $j("#cover-content").fadeOut("500", function(){
        $j('#cover-content').remove();
    });

    // Fade out cover div and remove from dom
    $j("#cover").fadeOut("500", function(){
        $j('#cover').remove();
        // IF IE
        if($j.browser.msie) {
            // Show the flash objects on the page and remove the divs we placed around them
            $j('#content object').each(function(){
               $j(this).css('display','block');
               $j(this).unwrap();
            });
        }
    });
}

/*
 * Previous button on the pop up
 */
function bc_carousel_pu_prev() {
    // Scroll the videos box 605px to the left
    $j('#cover-content .bc_carousel_list').scrollTo('-=605px',200);
    
    // If we were on the last group of boxes bring back the next button
    if(current_bc_pu_pos==bc_no_boxes) {
        $j('#cover-content .bc_carousel_pu_next').css('display','block');
    }
    // Update our position
    current_bc_pu_pos = current_bc_pu_pos-1;
    
    // If we are now showing the first box, hide the previous button
    if (current_bc_pu_pos == 1) {
        $j('#cover-content .bc_carousel_pu_prev').css('display','none');
    }
}

/*
 * Next button on the pop up
 */
function bc_carousel_pu_next() {
    // Scroll the videos box 605px to the right
    $j('#cover-content .bc_carousel_list').scrollTo('+=605px',200);
    
    // If we were showing the first box, show the previous button
    if(current_bc_pu_pos==1) {
        $j('#cover-content .bc_carousel_pu_prev').css('display','block');
    }
    // Update our position
    current_bc_pu_pos = current_bc_pu_pos+1;
    
    // If we were are now on the last group of boxes hide the next button
    if (current_bc_pu_pos == bc_no_boxes) {
        $j('#cover-content .bc_carousel_pu_next').css('display','none');
    }    
}

/*
 * Previous button on the widget
 */
function bc_carousel_prev() {
    // Scroll the videos box 294px to the left
    $j('#sidebar .bc_carousel_list').scrollTo('-=294px',200);
    
    // If we were on the last group, show the next button
    if(current_bc_pos==bc_no_boxes) {
        $j('#sidebar .bc_carousel_next').css('display','block');
    }
    // Update our position
    current_bc_pos = current_bc_pos-1;
    
    // If we are now on the first group, hide the previous button
    if (current_bc_pos == 1) {
        $j('#sidebar .bc_carousel_prev').css('display','none');
    }
}

/*
 * Next button on the widget
 */
function bc_carousel_next() {
    // Scroll the videos box 294px to the right
    $j('#sidebar .bc_carousel_list').scrollTo('+=294px',200);
    
    // If we were on the first group, show the previous button
    if(current_bc_pos==1) {
        $j('#sidebar .bc_carousel_prev').css('display','block');
    }
    // Update our position
    current_bc_pos = current_bc_pos+1;
    
    // If we are now on the last group, hide the next button
    if (current_bc_pos == bc_no_boxes) {
        $j('#sidebar .bc_carousel_next').css('display','none');
    }
}