// todo: find out where popups are used..
$('.image IMG_ , #content .main .news.servicepagina .slider .links-slide ul li').live('click', function() {
		// show overlay
        var window_h = $(document).height();
        $(".overlay").css('height', window_h);
        $(".overlay").css('display', 'block');
			
		// popup selector = .popup + class name of current img
        var id_popup = $(this).attr('class');
		var popup_selector = '.popup';
		if ($(this).attr('class')) {
			popup_selector += '.';
			popup_selector += $(this).attr('class');
		}

        var popup_left = $(document).width() / 2 - 337;
        var popup_top = $(window).height() / 2 - 335;
        var scr = $(window).scrollTop();
        popup_top = popup_top + scr;
        if (popup_top < 0) {
            popup_top = 0;
        }

		// Show popup
        $(popup_selector).css('left', popup_left);
        $(popup_selector).css('top', popup_top);
        $(popup_selector).css('display', 'block');
        
    });


function activateOverlay () {
	// show overlay
	$(".overlay")
		.css('height', '100%')
		.css('display', 'block')
		.css('position', 'fixed')
}


function renderLightBox (articleObj) {
	// todo: remove..
	$(".popup").remove();
	
	$("body").append(renderPopup(articleObj))
	
	// add gallery
	renderGallery(articleObj);
	
	// add first media element
	addMedia(articleObj,0)
	
	// hide first image at first
	$(".rotator img").hide()
	// resize images
	addResizeHandler();
	
	$(".scrollable").scrollable();
	addFullViewHandler(articleObj);
}

function activatePopup () {
    // set position
	var popup_left = $(document).width() / 2 - 337;
    var popup_top = $(window).height() / 2 - 335;
    var scr = $(window).scrollTop();
    
    popup_top = popup_top + scr;
    if (popup_top < 0) {
        popup_top = 0;
    }

	// show popup
    $(".popup")
    	.css('left', popup_left)
    	.css('top', popup_top)
    	.css('display', 'block');
}

// Lightbox triggers

// bouwfoto's - triggered by the 'lees verder' link or a click on the image	
$('.article .image img, .article .image .playbutton, .article .image a').live('click', function() {

	// UID is the unique identifier of the article, which is also the name of the articleObject in JSON	
	var UUID = $(this).closest(".image").attr("id")
	
	var articleObject = eval(UUID)
	
	renderLightBox(articleObject);
	activateOverlay();
	activatePopup();

    return false;
});

// generic news - triggered by the 'lees verder' link or a click on the image
$('.last-news .image img, .last-news .image .playbutton, .last-news .image a').live('click', function() {

	// UID is the unique identifier of the article, which is also the name of the articleObject in JSON	
	var UUID = $(this).closest(".image").attr("id")
	
	var articleObject = eval(UUID)
	
	renderLightBox(articleObject);
	activateOverlay();
	activatePopup();

    return false;
});

// events - triggered by the 'klik om de foto te vergroten' link
$('.news .left-box p a, .news .left-box img').live('click', function() {

	// UID is the unique identifier of the article, which is also the name of the articleObject in JSON	
	var UUID = $(this).closest(".news").attr("id")
	
	var articleObject = eval(UUID)
	
	renderLightBox(articleObject);
	activateOverlay();
	activatePopup();

    return false;
});

// partner - triggered by the image in the slider
$('.news.servicepagina .links-slide img, .news.servicepagina .links-slide .playbutton').live('click', function() {

	// UID is the unique identifier of the article, which is also the name of the articleObject in JSON	
	var UUID = $(this).closest(".news").attr("id")
	
	var articleObject = eval(UUID)
	
	renderLightBox(articleObject);
	activateOverlay();
	activatePopup();

    return false;
});


// Construction news lightbox with iframe
$('.trialButton').click(function() {
    var window_h = $(document).height();
    $('.overlay').css('height', window_h);
    $('.overlay').css('display', 'block');

    var popup_left = $(document).width() / 2 - 437;
    var popup_top = $(window).height() / 2 - 335;
    var scr = $(window).scrollTop();
    popup_top = popup_top + scr;
    if (popup_top < 0) {
        popup_top = 0;
    }
    //alert(popup_left);
    $('.popup').css('left', popup_left);
    $('.popup').css('top', popup_top);
    $('.popup').css('display', 'block');
    $('.popup').css('width', 800);
    return false;
});

// close actions for popup
$('.overlay, .close').live('click', function() {
    $('.overlay, .popup, .popup-light').css('display', 'none');
});

function addResizeHandler () {
	
	// if image already loaded, just resize, else fire upon load
	resizeImage();
	
	$(".rotator img").load(function(){
		resizeImage();
	});
}

function addArticleResizeHandler() {
	resizeArticleImage();
	
	$(".mask img").load(function(){
		resizeArticleImage();
	});	
}

function resizeImage() {
	// set correct size big image
	$(".rotator img").css("height", "475px")
	
	if (parseInt($(".rotator img").css("width")) > 640) {
		$(".rotator img").css("height", "auto")
		$(".rotator img").css("width", "640px")
	}
	
	// center image
	$(".rotator img").css("display", "block")
	$(".rotator img").css("margin", "0 auto")
}

function resizeArticleImage() {
	// set correct size article image
	$(".mask img").each(function() {
		$(this).css("height", "162px")
		
	if (parseInt($(this).css("width")) > 216) {
		$(this).css("height", "auto")
		$(this).css("width", "216px")
	}
	
	// center image
	$(this)
		.css("display", "block")
		.css("margin", "0 auto")
	
	})
	
}

$(function() {
	// resize hadnler for article images
	addArticleResizeHandler()
	
	// Detach and reattach popup to body, because it's defined somewhere else
	$(".popup").detach().appendTo("body");
	$(".popup-light").detach().appendTo("body");
	
	// Iframe popups
	$('a.iframe-popup').click(function() {
		
		var href = $(this).attr("href")
		var iframe = $("<iframe/>").attr("src",href).attr("width","790").attr("height","628");
		$(".iframe").find("iframe").remove()
		$(".iframe").prepend(iframe)
		
		var window_h = $(document).height();
	    $('.overlay').css('height', window_h);
	    $('.overlay').css('display', 'block');
	
	    var popup_left = $(document).width() / 2 - 337;
	    var popup_top = $(window).height() / 2 - 335;
	    var scr = $(window).scrollTop();
	    popup_top = popup_top + scr;
	    if (popup_top < 0) {
	        popup_top = 0;
	    }
	    
	    $('.popup').css('left', popup_left);
	    $('.popup').css('top', popup_top);
	    $('.popup').css('display', 'block');
	    
	    return false;
	});
	
	// Iframe popups light, no popup chrome
	$('a.iframe-popup-light').click(function() {
		
		// add popup-light container
		$(".popup-light").remove()
		$("body").append($("<div class='popup-light'></div>"))
		
		var href = $(this).attr("href")
		var iframe = $("<iframe/>").attr("src",href).attr("width","691").attr("height","597").attr("scrolling","no");
		$(".popup-light").empty().addClass("transparent")
		$(".popup-light").append(iframe)
		
		var window_h = $(document).height();
	    $('.overlay').css('height', window_h);
	    $('.overlay').css('display', 'block');
	
	    var popup_left = $(document).width() / 2 - 337;
	    var popup_top = $(window).height() / 2 - 335;
	    var scr = $(window).scrollTop();
	    popup_top = popup_top + scr;
	    if (popup_top < 0) {
	        popup_top = 0;
	    }
	    
	    $('.popup-light').css('left', popup_left);
	    $('.popup-light').css('top', popup_top);
	    $('.popup-light').css('display', 'block');
	    
	    return false;
	});
	
	
})	

/* code for lightbox */

function renderPopup (articleObj) {
	var popup = $("<div/>").addClass("popup webredactie")
	var prevLink = $("<a/>").addClass("prev browse left")
	var nextLink = $("<a/>").addClass("next browse right")
	var scrollableContainer = $("<div/>").addClass("scrollable-container")
	
	popup.append(renderHeader(articleObj))
	popup.append(renderGallery(articleObj))
	
		scrollableContainer.append(prevLink)
		scrollableContainer.append(renderThumbsBox(articleObj))
		scrollableContainer.append(nextLink)
	
	popup.append(scrollableContainer)
				
	return popup
}

function renderHeader (articleObj) {
	var head = $("<div/>").addClass("head")
		head.append($("<div/>").addClass("title-head").append($("<h3/>").html(articleObj.articleName)))
		head.append($("<div/>").addClass("close").append($("<span/>").html("Sluit venster")))
		head.append($("<div/>").addClass("divider"))
		head.append($("<div/>").addClass("relax"))
		
	return head	
}

function renderGallery (articleObj) {
	var gallery = $("<div/>").addClass("gallery-slide") 
	
	// add link to original page in Flickr
	var description = articleObj.media[0].description
	
	if (articleObj.media[0].flickr) {
		description += " (bron: <a target='blank' href='" + articleObj.media[0].page + "'>flickr</a>)"
	}
	
	var rotator = $("<div/>").addClass("rotator")
	gallery.append(rotator)
	
	return gallery
}

/* based on jquerytools */
function renderThumbsBox (articleObj) {
	
	var thumbsBox = $("<div/>").addClass("scrollable")
	
	var thumbsList = $("<div/>").addClass("items")
	
	// chop items in chunks of five
	var size = articleObj.media.length
	var row
	
	// filter empty images, only videos or images with src
	var media = jQuery.grep(articleObj.media, function(n, i){
		return (n.type == "video" || (n.type == "image" && n.src != ""));
	});
	
	$.each(media, function(index, el){
		if ((index) % 5 == 0) {
			row = $("<div/>")
		}	
		
		var item = $("<span/>").attr("rel", index).addClass("thumbContainer")
		item.append($("<img/>").attr("title", el.title).attr("alt", el.alt).attr("src", el.thumb))
				
		// add playbutton for movietypes
		if (el.type == "video") {
			item.append($("<span/>").addClass("playbutton"))
		}	
		
		row.append(item)
		
		if ((index) % 5 == 0 || (index == (size-1))) {
			thumbsList.append(row)
		}
	})	
		
	thumbsBox.append(thumbsList)
	
	return thumbsBox
	
}

function addMedia(articleObj,index) {
	
	// select function based on type
	switch (articleObj.media[index].type)
	{
	case "image":
	  showImage(articleObj, index)
	  break;
	case "video":
		if (articleObj.media[index].youtube) {
			showYoutube(articleObj, index);
		} else {
			showBBW(articleObj, index);
		}	
	  break;

	default:
	  // not defined;
	}		
}

// add eventhandler items img
function addFullViewHandler (articleObj) {
	$(".scrollable span.thumbContainer").click(function() {
		addMedia(articleObj, $(this).attr("rel"))
	})
	
}

function showImage(articleObj, index) {
	// embed image by src
	$(".rotator").empty();
	$(".rotator").append("<img/>")

	$(".rotator img").attr("src", articleObj.media[index].src);
	
	// add link to original page in Flickr
	var description = articleObj.media[index].description
	
	if (articleObj.media[index].flickr) {
		description += " (bron: <a target='blank' href='" + articleObj.media[index].page + "'>flickr</a>)"
	}
	
	$(".rotator").append($("<p/>").html(description?description:"")
			.prepend($("<strong/>").html(articleObj.media[index].title)))
		
	// hide first image at first
	$(".rotator img").hide()
	// resize images
	addResizeHandler();
}

function showBBW(articleObj, index) {
	//embed video by id
	$(".rotator").empty();
	
	// append container incl. alternative text
	$(".rotator").append(
			"<div id='media'> +" +
			"<a href='http://get.adobe.com/flashplayer/'>" +
			"<img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' />" +
			"</a></div>")
	
	$(".rotator").append($("<p/>").html(articleObj.media[index].description?articleObj.media[index].description:"")
			.prepend($("<strong/>").html(articleObj.media[index].title)))
	
	
	var flashvars = {
		defaultMediaAssetPath: escape('http://mm.cobouw.bbvms.com'),
		server: escape('http://cobouw.bbvms.com'),
		statspublication: "cobouw",
		clipXmlUrl: "http://cobouw.bbvms.com/mediaclip/" + articleObj.media[index].videoId + ".xml", 
		langHeader: "en-us,en;q=0.5",
		mode:escape("clip")
	};
	
	var params = {
			allowScriptAccess: "always",
			menu: "true",
			quality: "high",
			id: "bb-p-Default_Cobouw-" + articleObj.media[index].videoId,
			align: "middle",
			allowFullScreen: "true",
			wmode: "transparent"			
	};
	
	var attributes = {};
	
	attributes.id = "bb-p-Default_Cobouw-" + articleObj.media[index].videoId;
	swfobject.embedSWF("http://cobouw.bbvms.com/p/Default_Cobouw/player.swf", 
			"media", 
			"640", "390", "9.0.0", 
			"expressInstall.swf", 
			flashvars, params, attributes
	);
}

function showYoutube(articleObj, index) {
	//embed video by id
	$(".rotator").empty();
	// append container incl. alternative text
	$(".rotator").append(
			"<div id='media'> +" +
			"<a href='http://get.adobe.com/flashplayer/'>" +
			"<img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' />" +
			"</a></div>")
	
	$(".rotator").append($("<p/>").html(articleObj.media[index].description?articleObj.media[index].description:"")
			.prepend($("<strong/>").html(articleObj.media[index].title)))
	
	var flashvars = {};
	
	var params = {
			allowScriptAccess: "always",
			menu: "true",
			quality: "high",
			align: "middle",
			allowFullScreen: "true",
			wmode: "transparent"			
	};
	
	var attributes = {};
	
	swfobject.embedSWF("http://www.youtube.com/v/" + articleObj.media[index].youtubeId + "?version=3", 
			"media", 
			"640", "390", "9.0.0", 
			"expressInstall.swf", 
			flashvars, params, attributes
	);
}


//code voor de ankeilers voor bouwfoto's 

$(document).ready(function() {
	
	$(".slider li img, .slider li .playbutton")
	
	.mouseover(
	  function () {
		  
		  // hide all articles
		  $(this).closest(".news").find(".article").hide();
		  
		  // show correct index based on mouseover
		  var index = $(this).closest("li").index();
		  $(this).closest(".news").find(".article:eq(" + (index+1) + ")").show();
		  // update comment
		  $(this).closest(".slider").find("h5").html($(this).attr("alt"));
		  
			$(".mask img").each(function() {
				$(this).css("height", "162px")
				
			if (parseInt($(this).css("width")) > 216) {
				$(this).css("height", "auto")
				$(this).css("width", "216px")
			}
			
			// center image
			$(this)
				.css("display", "block")
				.css("margin", "0 auto")
			
			})
	  }
	)

	.mouseout(
	  function () {
		  
		  // hide all articles  
		  $(this).closest(".news").find(".article").hide();
		  // show default article
		  $(this).closest(".news").find(".article:eq(0)").show();

		  // show default comment
		  $(this).closest(".slider").find("h5").html($(this).closest("ul").find("img:eq(0)").attr("alt"));
	  }
	)

	
})