function showBlackout() {
    if (!$('#blackout').length) {
    	if (!window.XMLHttpRequest) { //IE6-
    		$('select').hide();
		}
        $('body').append('<div id="blackout"></div>');
        if (!window.XMLHttpRequest) { //IE6-
    		$('#blackout').css('height', $('body').height()+"px");
		}
    }
}
function removeBlackout() {
	if (!window.XMLHttpRequest) { //IE6-
    	$('select').show();
	}
    $('#blackout').remove();
}
function centerElement(elementID) {
    if (window.innerWidth) {
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
    }
    else if (document.all) {
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
    }
    var elementWidth = $('#'+elementID).width();
    var elementHeight = $('#'+elementID).height();
    if (!window.XMLHttpRequest) { //IE6-
    	$('#'+elementID).css('position', 'absolute');
        window.scrollTo(0,0);
	}
	else {
		$('#'+elementID).css('position', 'fixed');
	}
    $('#'+elementID).css('z-index', '99999');
    $('#'+elementID).css('top', (windowHeight/2)-(elementHeight/2));
    $('#'+elementID).css('left', (windowWidth/2)-(elementWidth/2));
}

function setupSlider() {
	var leftOffset = ($('#sliderNav').offset().left)/1;
	$('#viewport .buttons').css('left', leftOffset+'px');
	if (!window.XMLHttpRequest) { //IE6-
		$('#slider .slide').css('margin-left', leftOffset/2+'px');
	}
	else {
		$('#slider .slide').css('margin-left', leftOffset+'px');
	}
	$('#slider').css('background-position', 300+leftOffset+'px');
}

function slideToSlide(newSlide) {
	var slideWidth = $('.slide').eq(0).width();
	var slideMargin = $('.slide').eq(0).css("margin-left").replace("px", "");
	var totalWidth = slideWidth/1 + slideMargin/1;
	
	var newLeft = newSlide * totalWidth;
	
	$('#slider').animate( { left: '-'+newLeft+'px' }, 'slow');
	$('#slider').data('curSlide', newSlide);
	
	$('#sliderNav .current').removeClass('current');
	$('#sliderNav a[rel='+newSlide+']').addClass('current');
}

function in_array(needle, haystack, argStrict) {
    var key = '', strict = !!argStrict; 
    if (strict) {
        for (key in haystack) {
            if (haystack[key] === needle) {
                return true;
            }
        }
    }
    else {
        for (key in haystack) {
            if (haystack[key] == needle) {
            	return true;
            }
        }
    }
    return false;
}

$(function() {
	$('#top-nav').superfish();
	
	// JP - initialise the positioning of the elements
	if ($('#slider').length) {
		setupSlider();
		$(window).bind("resize", setupSlider);
	}
	
	$('#slider').data('curSlide', 0);
	$('.next').bind('click', function() {
		if (!$(this).is('.nextDisabled')) {
			var nextSlide = ($('#slider').data('curSlide')/1)+1;
			if (nextSlide >= ($('.slide').length-1)) {
				//$(this).addClass('nextDisabled');
				$(this).hide();
			}
			slideToSlide(nextSlide);
			//$('.prev').removeClass('prevDisabled');
			$('.prev').show();
		}
	});
	$('.prev').bind('click', function() {
		if (!$(this).is('.prevDisabled')) {
			var nextSlide = $('#slider').data('curSlide')-1;
			if (nextSlide <= 0) {
				//$(this).addClass('prevDisabled');
				$(this).hide();
			}
			slideToSlide(nextSlide);
			//$('.next').removeClass('nextDisabled');
			$('.next').show();
		}
	});
	
	$('#sliderNav a').bind('click', function() {
		if (!$(this).is('.current')) {
			var nextSlide = $(this).attr('rel');
			
			$('#slider').data('curSlide', nextSlide);
			slideToSlide(nextSlide);
			if (nextSlide >= ($('.slide').length-1)) {
				$('.next').hide();
			}
			else {
				$('.next').show();
			}
			$('.prev').show();
		}
	});
	
	$('#slider .slide a').bind('click', function() {
		if ($(this).attr('href').indexOf('#') == -1) {
			popupVideoPlayer($(this).attr('href'), $(this).attr('title'));
			return false;
		}
	});
	
	//member profile pop-up video links
	$('#popup_person_inner a.play_button').live('click', function() {
		//closePopupProfile();
		if (!$('#videoPopup').length) {
			popupVideoPlayer($(this).attr('href'), $(this).attr('title'));
		}
		return false;
	});
	//topic menu video links
	$('#topic_select ul li a').live('click', function() {
		if ($(this).attr('href').indexOf('#') == -1) {
			popupVideoPlayer($(this).attr('href'), $(this).attr('title'));
			return false;
		}
	});
	
	$('#blackout').live('click', function() {
		closePopupVideoPlayer();
		closePopupProfile();
	});

	$('#videoPopup #closeVideoPopup').live('click', function() {
		closePopupVideoPlayer();
	});
	$('#profilePopup #closeVideoPopup').live('click', function() {
		closePopupProfile();
	});
	
	//**********************************************************
	//******************grape-interactive-feature***********
	$('.topicSelector a')
		.mouseover(function(){
			var highlightPeople = $(this).attr('rel').split('-');
			$.each($('.grape_element'), function(k,v) {
				if (!in_array($(v).attr('id'), highlightPeople)) {
					$('#'+$(v).attr('id')).addClass('blackedOut');
				}
			});
		})
		.mouseout(function(){
			$('.grape_element').removeClass('blackedOut');
	});

	//**********************************************************
	//**********************************************************
	
	// member profile pop-up
	$('#grape_interact_gallery .grape_element a').bind('click', function() {
		profile_html_content = $('#member_profile_text #popup_' + $(this).parent().attr('id')).html();
		popupPersonDetail(profile_html_content);
		return false;
	});
});


function popupVideoPlayer(videoPath, videoTitle) {
	var popUpHTML = '<div id="videoPopup">\
		<a id="closeVideoPopup" href="javascript:void(0);"><img src="/img/btn-close.png" alt="Close" class="png" /></a>\
		<p id="videoTitle">'+videoTitle+'</p>\
		<div id="popupVideoPlayer">\
			<div class="nojavascript">JavaScript is turned off,you need JavaScript to enable the video player and other interactive features on the site</div>\
			<div class="novideo">You need HTML5 or Flash to view videos.<br />For HTML5,please download the latest web browser such as <br />&ndash; FireFox <a href="http://www.mozilla.com/en-US/firefox/personal.html">Download</a> <br />&ndash; Chrome <a href="http://www.google.com/chrome">Download</a> <br />&ndash; Safari <a href="http://www.apple.com/safari/download/">Download</a></div>\
			<div class="skin" style="display: none;">\
				<div class="videoHolder">\
					<div class="video"></div>\
				</div>\
				<div class="bar">\
					<div class="uibutton play"></div>\
					<div class="uibutton pause"></div>\
					<div class="seekbar">\
						<div class="seekbarfilling"></div>\
					</div>\
				</div>\
			</div>\
		</div>\
	</div>';
		
	$('body').append(popUpHTML);
	
	showBlackout();
	centerElement('videoPopup');
		
	var config = {
		"settings": {
			"forceflash":true,
			"html": {
				"id": "popupVideoPlayer",
				"width": "480",
				"height": "270"
			},
			"flash": {
				"swfUrl": "/flash/VideoPlayer.swf",
				"id": "popupVideoPlayer",
				"width": "503",
				"height": "335",
				"version": "9.0.0",
				"expressInstallSwfurl": "expressInstall.swf",
				"flashvars": {
					"type": "file"
				},
				"params": {
					"wmode" : "transparent",
					"allowfullscreen": "true", 
					"allowscriptaccess": "always"
				},
				"attributes": { }
			}
		}
	}
	
	config.settings.flash.flashvars.file = videoPath;
	Landlord.loadVideoPlayer(config);
}

function closePopupVideoPlayer() {
	if (!$('#profilePopup:visible').length) {
		removeBlackout();
	}
	$('#videoPopup').remove();
}

function closePopupProfile() {
	if (!$('#videoPopup').length) {
		removeBlackout();
		$('#profilePopup').hide();
	}
}

function popupPersonDetail(profile_html_content){
	$('#popup_person_inner').html(profile_html_content);	
	showBlackout();
	$('#profilePopup').show();
	//for IE6
	$('#closeVideoPopup img', $('#profilePopup')).addClass('png');
	centerElement('profilePopup');			
}