﻿/*
Functionality to initially open up a cusstom lightbox and then load external page content into them
*/
var lightboxes = function() {
/**
* Private function class for close lightboxes
*@memberOf SW.custom.lightboxes
*/
var that = this;

function closeLightbox(evt)
{
    evt.preventDefault();
    
    // due to an IE6 bug I hide the daynav on opening the lightbox - so showing it on close seems a good plan
    $('#day-navigation').css('display','block');

    var overlay = jQuery("#overlay, #overlayTextured");
    var overlayContent = jQuery("#overlayContent");
       
    overlay.animate( { opacity:0 }, { duration:0, complete:function()
    {
        overlay.hide();
    }});
    
    overlayContent.animate( { opacity:0 }, { duration:0, complete:function(){
        overlayContent.hide();
        clearLightBoxGallery();
    }});
    
}

var lightboxLinks = jQuery('a.lightboxLink', document.body);

lightboxes.lightboxLinkClicked = function(evt)
{
	evt.preventDefault();
	// ie6 has epic fail with content overlaping form elements, they will always appear on top
	// so best thing to do it hide it
	$('#day-navigation').css('display','none');

	var overlay = jQuery("#overlay");
	
	var overlayT = jQuery("#overlayTextured");
	
	var overlayContent = jQuery("#overlayContent");
	
	if(!overlay.size() || !overlayContent.size())
	{
		var lightboxObj = this;
	
		var overlayHTML = "<div id='overlay'>" +
		    "<div></div>" +
			"</div>" +
			"<div id='overlayTextured'><div></div></div>" +
			"<div id='overlayContent'><div><div class='overlayTop'><!-- --></div><div class='overlayBody'>" +
			"<p class='close'><a href='#'>" + translations.lightbox.close + "</a></p>"+
			"<div></div>" +
			"</div></div>"+
			"</div>";
	
		jQuery('body>form').append(overlayHTML);
		overlay = jQuery("#overlay");
		overlayT = jQuery("#overlayTextured");
		overlayContent = jQuery("#overlayContent");
		
		overlayContent.click(closeLightbox);
		overlayContent.find("p.close a").click(closeLightbox);
		overlayContent.find(".overlayBody, .overlayTop").click(function(){
		    return false;
		});
		overlayContent.find("div.overlayBody>div").click(function(evt){ evt.stopPropagation(); });      
	}
   
    jQuery("div.overlayBody>div").empty();
    
    //add lightbox type for flash content only
    if(jQuery(this).hasClass("flashLightbox"))
    {
        if(!(jQuery(this).hasClass("flashContent")))
        {
            overlayContent.addClass("flashContent");
        }
    }
    else
    {
        overlayContent.removeClass("flashContent");
    }
    
    // once content is loaded we need to attach the JS functionality
    if(jQuery(this).hasClass("galleryLink"))
    {
        overlayContent.addClass("galleryTheme");
        overlay.addClass("galleryTheme");
        initLightBoxGallery(jQuery(this));
    }
    else if (jQuery(this).hasClass("bookingLink"))
    {
        initLightBoxBooking(jQuery(this));               
    }
    else if (jQuery(this).hasClass("auctionLink"))
    {
        initLightBoxAuction(jQuery(this));               
    }
    else
    {
        overlayContent.removeClass("galleryTheme");
        overlay.removeClass("galleryTheme");
    }	
	
	var dimensions = jQuery(this).attr("rel").split(" ");
	var container = overlayContent.find(">div")
	container.css({width: dimensions[0] + "px", minHeight: dimensions[1] + "px"});
	
	overlayContent.find(".description").text(jQuery(this).attr("title"));
	
    overlay.css("opacity", 0);
    overlayT.css("opacity", 0);
	overlayContent.css("opacity", 0);
    
	overlay.show();
	overlayT.show();
	overlayContent.show();
	
	overlay.animate( { opacity:.4 }, { duration:0 } );
	overlayT.animate( { opacity:1 }, { duration:0 } );
	overlayContent.animate( { opacity:1 }, { duration:0 } );       

};

lightboxLinks.bind('click', lightboxes.lightboxLinkClicked);

};


/*
// GALLERY LIGHTBOX FUNCTIONS
*/

// FUNTION TO CHECK WHERE IN THE ARRAY OF LISTITEMS THE LARGE IMAGE IS
function checkListIndex(galleryItems, currIndex) {
    jQuery.each(galleryItems, function(index, value) {
        if(jQuery(this).find("a").attr("href") == jQuery(".targetImage").attr("src")) {
            currIndex = index;              
        }            
    });    
    return currIndex;
}

// contains the HTML inserted for youTube players
function writeMediaHtmlStr(uniqueKey) {

    var insertYtCode
    
    if (copiedYtPlayer == null) {
    
        insertYtCode = '<input type="hidden" value="" /><div class="holderDiv"><div class="playerDiv"><a href="http://youtube.com/"></a></div></div><div class="progressBar"><div></div></div><p class="controls" style="background:white; display:block; margin:0; width:auto;">' 
                        + '<a href="#" class="ytVolume">' + translations.lightbox.volume + '</a><a href="#" class="ytPlay">' + translations.lightbox.play + '</a></p><div class="overlayControls"><a href="#" class="prev">' + translations.lightbox.previous + '</a><a class="play" href="#">' + translations.lightbox.play + '</a><a href="#" class="next">' + translations.lightbox.next + '</a></div>';
        
    } else {
        insertYtCode = copiedYtPlayer.html();
    }
    var mediaHtmlStr = '<div id="lightBoxPlayer' + uniqueKey + '" class="ytPlayer" style="overflow:hidden;">' + insertYtCode + '</div><div class="authorType"></div>';
                                
    return mediaHtmlStr;                    

}

// contains the code inserted for the gallery
function writeFlickrHtmlStr() {

    var flickrHtmlStr = '<div class="flickrContainer"><a href="" title="" target="_blank" ><img src="" class="targetImage" /><div class="details"><span class="cta">' + translations.lightbox.view + ' <em>' + translations.lightbox.flickr + '</em></span><span class="flickrInfo"></span></div></a></div>';
                    
    return flickrHtmlStr;                    

}

// FUNCTION TO PROVIDE THE CLICK RESULT depending on it's context (flickr or youTube)
function lightBoxGalleryLinkAction(clickSource, detailsSource, uniqueKey) { 

    if (clickSource.attr("href").search('www.youtube.com') != -1)
    {  
        var clickHref = clickSource.attr("href");
        
        jQuery(".imageHolder div.flickrContainer").hide();  
        jQuery(".imageHolder .ytPlayer").remove();
        jQuery(".imageHolder div.authorType").remove();
        jQuery("div.overlayBody>div").find(".imageHolder").append(writeMediaHtmlStr(uniqueKey));

        clickHref = clickHref.substr(clickHref.indexOf('?v=') + 3);
        if(clickHref.indexOf('&') != -1) {
            clickHref = clickHref.substring(0, clickHref.indexOf('&'));
        }

        jQuery("#lightBoxPlayer" +  uniqueKey).find("input").attr("value",clickHref);
        jQuery("#lightBoxPlayer" +  uniqueKey).ytPlayer();
        jQuery("#lightBoxPlayer" +  uniqueKey + " div.playerDiv").prepend(clickSource.find("img").clone());
        jQuery("#lightBoxPlayer" +  uniqueKey + " a").text(clickSource.find("img").attr("alt"));
        jQuery(".imageHolder div.authorType").append(clickSource.parent().find("p").clone());
    }
    else
    {
        var imageHref = clickSource.find("img").attr("src");        
//        imageHref = imageHref.replace("_t.", "_m.");
        imageHref = imageHref.replace("/flickr-thumb/", "/flickr-image/");

        jQuery("#overlayContent").find(".imageHolder div.flickrContainer p").remove();
        jQuery(".imageHolder .ytPlayer").remove(); 
        jQuery(".imageHolder div.authorType").remove(); 

        jQuery("#overlayContent").find(".imageHolder div.flickrContainer a").attr("href", clickSource.attr("href"));        
        jQuery("#overlayContent").find(".imageHolder div.flickrContainer div.details span.flickrInfo").html(detailsSource + " " + translations.lightbox.on + " <strong>" + translations.lightbox.flickr + "</strong>"); 
        jQuery("#overlayContent").find(".imageHolder div.flickrContainer a").after(clickSource.parent().find("p").clone());        
        
        jQuery("#overlayContent").find(".imageHolder div.flickrContainer a").css("background-image", "url(" + imageHref + ")");
        
        jQuery(".imageHolder div.flickrContainer").show();                            
    }
}

// CLEAR THE GALLERY LIGHTBOX CLASSES IF EXISTS FOR DEFAULT STYLING
function clearLightBoxGallery() {
    if(jQuery("div#overlay").hasClass("galleryTheme")) {        
        window.stopAllVideos();
        jQuery("div#overlay").removeClass("galleryTheme");
        jQuery("div#overlayContent").removeClass("galleryTheme");   
        jQuery(".imageHolder .ytPlayer").remove();      
        jQuery("div#lightbox_video_container").remove(); 
    }
}

// FEED IMAGE URL TO LIGHTBOX AND DISPLAY
// COLLECT LIST OF THUMBNAILS AND ALSO SEND TO LIGHTBOX TO DISPLAY
function initLightBoxGallery(clickSource) {
                      
    // CREATE ARRAY OF THUMBNAILED LIST ITEMS
    //IF THE IMAGE IS PART OF A TABBED SYSTEM
    if(clickSource.parents('.gridTabContainer').size() > 0){
        var galleryItems = clickSource.parents(".gridTabContainer").find(".resourceGrid ul li a");
        var noGalleryItems = galleryItems.length;
        var uniqueKey;
    }
    else{
        var galleryItems = clickSource.parents(".resourceGrid").find("ul li a");
        var noGalleryItems = galleryItems.length;
        var uniqueKey;
    }
    jQuery.each(galleryItems, function(index, value) {
        if (value.href == clickSource.parent().find("a")[0].href) {
            uniqueKey = index;
        }                   
    });   

    var container = jQuery("div.overlayBody>div");
    
    // GET THE IMAGE AND TEXT ASSETS FROM THE PAGE, THEN PREPARE THE HTML TO INSERT                
    var headingHtml = clickSource.parents(".resourceGrid").find("h3").text();      
    container.html('<div class="imageHolder"></div>');                                                           
    container.find("div.imageHolder").append(writeFlickrHtmlStr());
    if(clickSource.parents('.gridTabContainer').size() > 0){
        container.append(clickSource.parents(".gridTabContainer").clone());
        var lightBoxTabs = new ImageTabs({'containerId' : 'div.overlayBody .gridTabContainer',
                                        'blockClass' : '.imageTab'});
    }
    else{
        container.append(clickSource.parents(".resourceGrid").clone());
    }
    container.append("<div class='clearer'></div>");   
         
    // TIDY UP THE INSERTED CODE
    container.find("a").removeClass("lightboxLink");
    container.find(".resourceGrid").removeAttr("style");

    container.find("li.youtube div.imageMask span").text("");
    container.find("li.youtube span.imageMask span").text("");
    container.find("li.youtube span.action span").show();
    container.find("li.flickr div.imageMask span").text("");
    container.find("li.flickr div.imageMask span").hide();
    container.find("li.flickr span.imageMask span").text("");
    container.find("li.flickr span.imageMask span").hide();


    // DISPLAY THE CLICKED THUMBNAIL IN THE LARGE IMAGE SLOT        
    lightBoxGalleryLinkAction(clickSource.parent().find("a"), clickSource.parent().find("a").attr("title"), uniqueKey);             
    
    // CATCH CLICK EVENTS OF GALLERY IMAGES INSIDE LIGHTBOX
    // REPLACE MAIN IMAGE WITH HREF OF THUMBNAILS
    container.find("div.resourceGrid ul li").click(function(evt) {
        evt.preventDefault();
        var clickHref = jQuery(this).find("a")[0].href;
        jQuery.each(galleryItems, function(index, value) {
            if (value.href == clickHref) {
                uniqueKey = index;
            }                            
        });                        
        lightBoxGalleryLinkAction(jQuery(this).find("a"), jQuery(this).find("a").attr("title"), uniqueKey);                      
    });       
    
    jQuery("div.resourceGrid ul li").mouseover(function()
    {
        
        if (jQuery(this).hasClass("youtube")) {
            jQuery(this).find("div.imageMask span").text(translations.lightbox.play);
            jQuery(this).find("span.imageMask span").text(translations.lightbox.play);
            jQuery(this).find("span.action span").hide();
        } else {
            jQuery(this).find("div.imageMask span").text(translations.lightbox.viewShort);
            jQuery(this).find("div.imageMask span").show();
            jQuery(this).find("span.imageMask span").text(translations.lightbox.viewShort);
            jQuery(this).find("span.imageMask span").show();
        }
        
    });
    
    jQuery("div.resourceGrid ul li").mouseout(function()
    {
        if (jQuery(this).hasClass("youtube")) {
            jQuery(this).find("div.imageMask span").text("");
            jQuery(this).find("span.imageMask span").text("");
            jQuery(this).find("span.action span").show();
        } else {
            jQuery(this).find("div.imageMask span").text("");
            jQuery(this).find("div.imageMask span").hide();
            jQuery(this).find("span.imageMask span").text("");
            jQuery(this).find("span.imageMask span").hide();
        }
    });
          
    jQuery("div.flickrContainer").mouseover(function()
    {
        jQuery(this).find("div.details").show();
    });
    
    jQuery("div.flickrContainer").mouseout(function()
    {
        jQuery(this).find("div.details").hide();
    });    
    
}

function initLightBoxBooking(clickSource)
{
    jQuery("div#overlayContent div.overlayBody>div").empty();
    var href = clickSource.attr("href");
    jQuery.get(href, {}, recieveBookingHTML);
}

// helper function to target the content to pull in (similar to jQuery.load)
function extractBlock(html, bStart, bEnd)
{
    return bStart + html.split(bStart)[1].split(bEnd)[0] + bEnd;
}

function recieveBookingHTML(data, textStatus)
{
    var html = extractBlock(data, '<div id="availableBookings">', '<!-- END availableBookings -->');

    html = html + "</div>";

    jQuery("div#overlayContent div.overlayBody>div").html(html);
    
    /* 
        need to wrap the viewstate div in a div with class view_state 
        so that original clicks remove the content and IE doesn't blow up
        (explained further in main.js, line 32) 
    */
    var viewstate_div = jQuery('div#overlayContent form div:first');
    
    viewstate_div.wrap('<div class="view_state"></div>');

    jQuery("div#overlayContent a.previous, div#overlayContent a.next").click(function(evt)
    {
        evt.preventDefault();
        jQuery("div#overlayContent div.overlayBody>div").empty();
        var href = jQuery(this).attr("href");
        jQuery.get(href, {}, recieveBookingHTML);
    });
    
    var submitButton = jQuery("div#overlayContent input.submit");
    
    
    
    submitButton.addClass("disabled");
    submitButton.attr("disabled", "disabled");
    
    var spaceCells = jQuery("div#overlayContent td label");
    
    spaceCells.click(function(evt)
    {
        submitButton.removeClass("disabled");
        submitButton.removeAttr("disabled");
    
        spaceCells.removeClass("active");
        jQuery(this).addClass("active");
    });
    
}


function initLightBoxAuction(clickSource)
{    
    jQuery("div#overlayContent div.overlayBody>div").empty();
    var href = clickSource.attr("href");
    jQuery.get(href, {}, recieveAuctionHTML);
    
    /* triggering a redraw on scroll to fix IE bug and widger rendering issue */
    jQuery('div#overlayContent').scroll(function() {
        var objHeight = jQuery("#ebayFeed embed").css('height');
        if (objHeight == '300px') {
            jQuery("#ebayFeed embed").css('height','301px');
        } else {
            jQuery("#ebayFeed embed").css('height','300px');
        }
    });
}

function recieveAuctionHTML(data, textStatus)
{
    var html = extractBlock(data, '<div id="auctionArea">', '<!-- END auctionArea -->');

    html = html + "</div>";

    jQuery("div#overlayContent div.overlayBody>div").html(html);

    
}