function showExample() {
	$('#VideoBox').hide(); // FF layering Fix
	ensureFlowIsLoaded();
    modal = $('#ExampleContainer').modal({onClose:exampleClosed});
	
}
function exampleClosed(){
	
	modal.close();
	$('#ExampleContainer').hide();
	$('#VideoBox').show();
}
function closeExample() {
    if (modal == null) {
        modal = $('#ExampleContainer').modal();
    }
    modal.close();
	
}

var flowLoaded = false;

function ensureFlowIsLoaded() {

		$('#ExampleContainer').show();
		$("#myController").jFlow({
			slides: "#mySlides",
			controller: ".jFlowControl", // must be class, use . sign
			slideWrapper : "#jFlowSlide", // must be id, use # sign
			selectedWrapper: "jFlowSelected",  // just pure text, no sign
			easing: "swing",
			duration: 400,
			height: "360px",
			width: "100%",
			prev: ".jFlowPrev", // must be class, use . sign
			next: ".jFlowNext" // must be class, use . sign
		});
		
	
		//Get our elements for faster access and set overlay width
		var div = $('div.sc_menu'),
			ul = $('ul.sc_menu'),
			ulPadding = 15;
		
		//Get menu width
		var divWidth = div.width();
	
		//Remove scrollbars	
		div.css({overflow: 'hidden'});
		
		//Find last image container
		var lastLi = ul.find('li:last-child');
		
		//When user move mouse over menu
		div.mousemove(function(e){
			//As images are loaded ul width increases,
			//so we recalculate it each time
			var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
			var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
			div.scrollLeft(left);
		});
	
		
	
	
}