var slides = [{"image":"slide_videoplayer.jpg","name":"Cross-Platform Video Player","url":"\/demo\/video\/","popupHeight":768,"desc":"FluidHtml's markup is modeled after HTML5 which means your Flash video players will also work in HTML5-capable browsers like Mobile Safari with no extra work."},{"image":"slide_canvas_1.jpg","name":"HTML 5 Canvas Support","url":"\/demo\/canvas\/1.php","popupHeight":800,"desc":"A demo of HTML 5 canvas API compliance. You can try this demo both in Flash environments and on iPads and iPhones and it will run with the same exact FluidHtml code. Adopted from <a href=\"http:\/\/tomtheisen.com\/spread\/\" target=\"_blank\">Tom Thiesen's<\/a> canvas script"},{"image":"slide_canvas_2.jpg","name":"HTML 5 Canvas Support","url":"\/demo\/canvas\/2.php","popupHeight":800,"desc":"A demo of HTML 5 canvas API compliance. Adopted from <a href=\"http:\/\/www.bit-101.com\/blog\/?p=3214\" target=\"_blank\">Keith Peters'<\/a> canvas script"},{"image":"slide_sothebys.jpg","name":"Sotheby's eCatalogue","url":"http:\/\/www.sothebys.com\/en\/catalogues\/ecatalogue.html\/2011\/western-manuscripts-and-miniatures#\/r=\/en\/ecat.fhtml.L11240.html+r.m=\/en\/ecat.grid.L11240.html\/0\/15\/lotnum\/asc\/","popupHeight":768,"desc":"This site illustrates the powerful combination of a rich UI to support a premium brand with a full compliment of web capabilities, including searchability, deeplinking and a deep enterprise backend. <br\/><br\/><small><i>This application is coded in version 1.0 of FluidHtml and requires Flash.<\/i><\/small>"},{"image":"slide_pong.jpg","name":"3D Pong","url":"\/demo\/pong\/","popupHeight":768,"desc":"This demo illustrates the power of our 3D animation engine and scripting abilities. <br\/><br\/><small><i>This demo is coded in version 1.0 of FluidHtml and requires Flash.<\/i><\/small>"},{"image":"slide_3d_video.jpg","name":"3D Video","url":"\/demo\/3d_video\/","popupHeight":768,"desc":"This demo would be difficult in Flash but is easy to do in FluidHtml. We first defined a 2D video player and then projected it onto a cylinder floating in 3D space. Note that the video player still functions normally. <br\/><br\/><small><i>This demo is coded in version 1.0 of FluidHtml and requires Flash.<\/i><\/small>"},{"image":"slide_player.jpg","name":"Media Player","url":"\/demo\/mediaplayer\/","popupHeight":550,"desc":"This media player illustrates the power of style sheets applied to rich media objects. All aspects of the UI, including animations that run when elements are selected, scrollbar and seekbar styles and button backgrounds are specified in a stylesheet. Furthermore, there is almost no scripting in this example. For example, the seekbar is bound to the video via simple databinding.<br\/><br\/><small><i>This demo is coded in version 1.0 of FluidHtml and requires Flash.<\/i><\/small>"},{"image":"slide_store.jpg","name":"E-Commerce with Drupal Backend","url":"http:\/\/fluidhtml.com\/site_demos\/store\/","popupHeight":800,"desc":"This simple store has a fully operational Drupal backend.   Our production site (this one is temp) is also built on Drupal - coming very soon.    In the Open Beta, we'll release productized components to ease integration with Drupal.<br\/><br\/><small><i>This demo is coded in version 1.0 of FluidHtml and requires Flash.<\/i><\/small>"}];
	// /demo/pong/#/r=index.php/
	var slide1 = document.getElementById('slide1');
	var slide2 = document.getElementById('slide2');
	function nextSlide(){
		clearTimeout(slide_i);
		tween(slide1,{left:-460},1.5);
		tween(slide2,{left:0},1.5,switchSlides);
		slide_i = setTimeout(nextSlide,SLIDE_DELAY);
	}
	function switchSlides(){
		tween_setProperty(slide1,'left',460);
		var tmp = slide2;
		slide2 = slide1;
		slide1 = tmp;
		// rotate slides
		rotateSlideList();
		setSlideProps(slide2,0);
	}
	function rotateSlideList(){slides.push( slides.shift() );}
	function rotateSlideListReverse(){slides.unshift( slides.pop() );}
	function getSlideImage(i){ return '/images/'+ slides[i].image; }
	function getSlideText(i){ return slides[i].name; }
	function getSlideLink(i){ return slides[i].url; }
	function getSlideLinkHeight(i){ return slides[i].height; }
	function setSlideBg(e,i){ e.style.backgroundImage='url('+getSlideImage(i)+')';	 }
	function setSlideText(e,i){ 
		getElementsByClassName('demo-name',e)[0].innerHTML=getSlideText(i);
	}
	function setSlideLink(e,i){ 
		getElementsByClassName('demo-link',e)[0].href="javascript:launchDemo("+i+")"; 
	}
	function setSlideProps(e,i){
		setSlideBg(e,i);
		setSlideText(e,i);
		//setSlideLink(e,i);
	}
    function getElementsByClassName(classname, node) {
		if(!node) node = document.getElementsByTagName("body")[0];
		var a = [];
		var re = new RegExp('\\b' + classname + '\\b');
		var els = node.getElementsByTagName("*");
		for(var i=0,j=els.length; i<j; i++)
			if(re.test(els[i].className))
				a.push(els[i]);
		return a;
    }
	var wnd;
	function launchDemo(i){
		if (wnd) wnd.close();
		var url = getSlideLink(i);
		var h = getSlideLinkHeight(i)
		wnd = window.open(url,'demo','width=1024,height='+h);
		window.focus();
	}
	setSlideProps(slide1,0);
	setSlideProps(slide2,1);
	rotateSlideList();
	var SLIDE_DELAY = 6000;
	var slide_i = setTimeout(nextSlide,SLIDE_DELAY);