var vid = false
var menu_element = null
var max_width = 640
var max_height = 490
var sd = null
var p = null
var show = null
var show_end = null
var vid_ended = false
var display_video_has_run = false

function add_event( obj, type, fn ) {
    if ( obj.attachEvent ) {
	obj['e'+type+fn] = fn;
	obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
	obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
	obj.addEventListener( type, fn, false );
}

function document_width(){
    if (self.innerHeight){
	return self.innerWidth;
    } else if (document.documentElement && document.documentElement.clientHeight){
	return document.documentElement.clientWidth;
    } else if (document.body){
	return document.body.clientWidth;
    } else {
	return null;
    }
    return x;
}

function document_height(){
    if (self.innerHeight){
	return self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight){
	return document.documentElement.clientHeight;
    } else if (document.body){
	return document.body.clientHeight;
    } else {
	return null;
    }
}

function __main__(){

    // loading icon display
    var show_loading = function(){
	var loading_img = new Image()
	loading_img.src = 'static/loading.gif'
	loading_img.style.position='absolute'
	loading_img.id='loading_image'
	loading_img.style.left= ((document_width()/2) - (loading_img.width/2) + 'px')
	loading_img.style.top=((document_height()/2) - (loading_img.height/2) + 'px')
        loading_img.style.zIndex='371'
	document.body.appendChild(loading_img)
    }
    show_loading()

    // hide the the loading icon
    var hide_loading = function(){
	try{document.body.removeChild(document.getElementById('loading_image'))}catch(e){}
    }

    var body = document.body
    body.style.margin='0'
    body.style.backgroundColor='#000'
    body.style.overflow='hidden'

    var data = document.getElementById('data')

    var page = document.createElement('div')
    page.id='page'
    page.style.display='block'
    document.body.appendChild(page)

    var end_frame_div = document.createElement('div')
    var end_frame = new Image()

    var append_end_frame = function(){
	end_frame_div.appendChild(end_frame)
    }

    end_frame.src = ""
    add_event(end_frame, "load", append_end_frame)
    end_frame.src = video_resources['end']
    end_frame.width = 640
    end_frame.height = 490

    var start_frame_div = document.createElement('div')
    start_frame = new Image()
    start_frame.src = video_resources['start']
    start_frame.width = 640
    start_frame.height = 490
    start_frame_div.style.visibility='hidden'
    start_frame_div.style.display='none'
    start_frame_div.appendChild(start_frame)
    page.appendChild(start_frame_div)

    var display_video = function(){
        hide_loading()
        if (display_video_has_run) return
        display_video_has_run = true
	start_frame_div.id='start_frame_div'
	start_frame_div.style.position='absolute'
	start_frame_div.style.zIndex='99'
	start_frame_div.style.top='0'
    
	var start_frame_width = 640

	var pre = document.createElement('div')
	pre.style.position = 'absolute'
	var pre_width = 900
	var pre_height = 30
	pre.style.width=pre_width+'px'
	pre.style.height=pre_height+'px'
	pre.style.left = ((document_width()/2) - (pre_width/2)) + 'px'
	pre.style.top = ((document_height()/2) - (pre_height/2)) + 'px'
	pre.style.color='#999'
	pre.style.textAlign='center'
	pre.style.fontFamily='Helvetica, Arial, sans-serif'
	pre.style.fontWeight='bold'
	pre.style.fontSize='11px'
	pre.style.textTransform='uppercase'
	pre.style.letterSpacing='20px'
	pre.style.zIndex='100'
	document.body.appendChild(pre)

	show = function(ev){
  	    pre.style.visiblity='hidden'
            pre.style.display='none'
	    start_frame_div.style.visibility='hidden'
            start_frame_div.style.display='none'
       	    scale()
	}

	show_end = function(){
	    vid_ended = true
	    if(vid){
		vid.style.display='none'
	    } else if (swf_div) {
		swf_div.style.display='none'
	    }
	    page.appendChild(end_frame_div)
	}

	var html5_video = function() {
	    var hasattr = function(elem,attr) {
		var isset;
		try {
		    eval("isset=typeof elem."+attr+"!='undefined';");
		} catch (e) {
		    isset=false;
		}
		return isset;
	    }
	    if (typeof HTMLVideoElement == 'object' || typeof HTMLVideoElement == 'function') {
		hve = document.createElement('video')
		if(hasattr(hve, 'play')) return true
	    }
	    return false
	}

	start_frame_div.style.visibility='visible'

	if (html5_video() && !DetectSmartphone()){
	    var vid_div = document.createElement('div')
	    vid_div.style.position = 'absolute'
	    vid_div.style.left = '0'
	    vid_div.style.top = '0'

	    var tmpl = '\
	    <video id="page-video" width="{%width%}" height="{%height%}" autoplay> \
                <source src="{%mp4%}" type="video/mp4"></source> \
                <source src="{%ogv%}" type="video/ogg"></source> \
	    </video>'

	    tmpl = tmpl.replace(/{%width%}/g, 640)
	    tmpl = tmpl.replace(/{%height%}/g, 490)
	    tmpl = tmpl.replace(/{%ogv%}/g, video_resources['ogv'])
	    tmpl = tmpl.replace(/{%mp4%}/g, video_resources['mp4'])

	    vid_div.innerHTML = tmpl
	    page.appendChild(vid_div)
	    vid = document.getElementById('page-video')
	    vid.style.visibility='hidden' //xxx

	} else {
            var version = swfobject.getFlashPlayerVersion()
            if(version.major < 9) {
                var message = document.createElement('div')
	        if(DetectSmartphone()){
                    message.innerHTML = "<p>Warning: You are viewing this site on a mobile device and the site will be missing some features.</p>"
                } else {
                    message.innerHTML = "<p>Warning: Please install the latest <a href='http://getfirefox.com'>Firefox</a>, <a href='http://www.google.com/chrome'>Chrome</a>, <a href='http://www.apple.com/safari/'>Safari</a>, or <a href='http://get.adobe.com/flashplayer/'>Flash Player</a></p>"
                }
                message.style.background='#FFF1A8 none repeat scroll 0 0'
                message.style.width='100%'
	        message.style.fontFamily='Arial'
                message.style.fontWeight='Bold'
                message.style.color='#000'
                message.style.textAlign='center'
                message.style.zIndex='390'
                message.style.position='absolute'
                message.style.top=''
                message.style.fontSize='12px'
                message.style.margin='auto'
                page.appendChild(message)
                show()
                show_end()
            } else {

		var swf_div = document.createElement('div')
		swf_div.style.position = 'absolute'
		swf_div.style.left = '0'
		swf_div.style.top = '0'

		var tmpl = '\
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" \
			codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0" \
			width="{%width%}" \
			height="{%height%}"> \
		    <param name=movie value="{%swf%}"> \
		    <param name=quality value="high"> \
		    <param name="wmode" value="transparent"> \
		    <param name=FlashVars value="{%flashvars%}"> \
		    <embed src="{%swf%}" \
			FlashVars="{%flashvars%}" \
			quality="high" \
			width="{%width%}" \
			height="{%height%}" \
			type="application/x-shockwave-flash" \
			pluginspage="http://www.macromedia.com/go/getflashplayer" \
			wmode="transparent"> \
		    </embed> \
		</object>'

		tmpl = tmpl.replace(/{%width%}/g, 640)
		tmpl = tmpl.replace(/{%height%}/g, 490)
		tmpl = tmpl.replace(/{%flashvars%}/g, 'width=640&height=490&file='+escape(video_resources['mp4']))
		tmpl = tmpl.replace(/{%swf%}/g, 'static/swf/basic/video.swf')

		swf_div.innerHTML = tmpl
		page.appendChild(swf_div)
	    }
	}

	start_frame_div.style.display='block'

	var l = document.createElement('div')
	pre.appendChild(l)
	l.style.backgroundColor='#000'
	l.style.padding='30px'
        l.style.textAlign = 'center'
	l.innerHTML = '&nbsp;Loading Interactive Video'

	function end_loop(){
	    if(vid.ended){
                if(!vid_ended) show_end()
	    } else if (!vid_ended){
		setTimeout(end_loop, 333)
	    }
	}
	if (vid){
	    end_loop()
	}

	function pre_loop(){
	    if (p) l.innerHTML = '&nbsp;Loading Interactive Video ' + p + '%'
	    var canplaythrough = function() {
		if (vid){
		    if ("CAN_PLAY_THROUGH" in HTMLMediaElement)
			return vid.readyState == HTMLMediaElement.CAN_PLAY_THROUGH;
		    if ("HAVE_ENOUGH_DATA" in HTMLMediaElement)
			return vid.readyState == HTMLMediaElement.HAVE_ENOUGH_DATA;
		    return false
		} else {
		    return false
		}
	    }
	    if (canplaythrough()) {
		show()
	    } else {
		setTimeout(pre_loop, 333)
	    }
	}
	pre_loop()

	function scale(){
	    var w = document_width(), h = document_height()

	    if (!vid || vid.videoWidth == 0){
		ratio = 640/490
		rratio = 490/640
	    } else {
		ratio = vid.videoWidth / vid.videoHeight
		rratio = vid.videoHeight / vid.videoWidth
	    }

	    if (w/h < ratio) {
		var width = w
		if (width > max_width) width = max_width
		var height = width * rratio
	    } else {
		var height = h
		if (height > max_height) height = max_height
		var width = height * ratio
	    }

	    if (!vid || vid.videoWidth == 0){
		sd = width / start_frame_width
	    } else {
		sd = width / vid.videoWidth
	    }

	    if(vid){
		vid.width = Math.round(width)
		vid.height = Math.round(height)
	    } else {
                if (swf_div){
		    swf_div.style.width = Math.round(width) + 'px'
		    swf_div.style.height = Math.round(height) + 'px'
		    var object_elm = swf_div.getElementsByTagName('object')[0]
  		    object_elm.width = Math.round(width)
		    object_elm.height = Math.round(height)
		    embed_elm = object_elm.getElementsByTagName('embed')[0]
		    if (embed_elm){
		        embed_elm.width = Math.round(width)
		        embed_elm.height = Math.round(height)
		    }
                }
	    }

	    page.style.width = width + 'px'
	    page.style.height = height + 'px'
	    page.style.margin = 'auto'
	    page.style.position = 'absolute'

	    var top = ((document_height()/2) - (height/2))
	    var left = ((document_width()/2) - (width/2))
	    page.style.top = top  + 'px'
	    page.style.left = left  + 'px'

	    end_frame_div.style.left = left + 'px'
	    end_frame_div.style.top = top + 'px'
	    end_frame_div.style.width = width + 'px'
	    end_frame_div.style.height = height + 'px'
	    end_frame.width = width
	    end_frame.height = height

	    start_frame_div.style.width = width + 'px'
	    start_frame_div.style.height = height + 'px'
	    start_frame.width = width
	    start_frame.height = height

	    function draw_menu(items){
                try{page.removeChild(menu_element)}catch(e){}
		menu_element = document.createElement('div')
		function create_menu_element(i){
		    var m = document.createElement('div')
		    m.innerHTML = '<img src="static/spacer.gif" width='+(i.width * sd)+' height='+(i.height * sd)+' style="border:0;"/>'
		    m.style.position = 'absolute'
		    m.style.left = (i.left *sd) + 'px'
		    m.style.top = (i.top * sd) + 'px'
		    m.style.width = (i.width * sd) + 'px'
		    m.style.height = (i.height * sd) + 'px'
		    m.style.cursor = 'pointer'
		    if(m.style.opacity){
			m.style.opacity = '0.7'
		    }
		    //m.style.backgroundColor = 'lightgreen'
                    m.style.zIndex = '350'
		    m.onclick = function(){window.location = i.uri;return false;}
		    var border = Math.round(2 * sd) + 'px solid #000'
		    if(i.hover){
			m.onmouseover = function(){this.style.borderBottom=border}
			m.onmouseout = function(){this.style.border='none'}
		    }
		    return m
		}
		menu_element = document.createElement('div')    
		menu_element.style.position = 'absolute'
		menu_element.style.top = '0'
		menu_element.style.height = height + 'px'
		menu_element.style.width = width + 'px'
		var l = items.length
		for(var i=0;i<l;i++){
		    var m = create_menu_element(items[i])
		    menu_element.appendChild(m)
		}
		page.appendChild(menu_element)
	    }

	    draw_menu(menu)
	}

	var updateprogress = function(ev){
	    if (ev.lengthComputable) {
		if (ev.total != 0){
		    p = Math.round(ev.loaded/ev.total*100)
		}
		return;
	    }
	    if (ev.total) {
		p = (100*ev.loaded/ev.total).toFixed(0)
	    }
	    return;
	}
	if(vid){
	    vid.addEventListener('progress', updateprogress, false)
	}

	if (vid){
	    vid.style.visibility='visible'
	    vid.addEventListener('canplaythrough', show, false)
	}
	add_event(window, 'resize', function(){scale();})
	scale()
    }
    start_frame.src=""
    add_event(start_frame, 'load', display_video)
    start_frame.src = video_resources['start']
}

window.onload = __main__