var urls = {}
var Scenes = null

FileType = function(obj_data) {
	try {
		for (var i in obj_data) {
			switch(i) {
				default:
					this[i] = obj_data[i]
				break
			}
		}
	} catch (ex) {
		log(ex)
	}
}
FileType.prototype = {
	id:null,
	type:null,
	toString:function() {
		return "<FileType: " + this.type + " >";
	}
}

Material = function(obj_data) {
	for (var i in obj_data) {
		switch(i) {
			case 'type':
				this[i] = new FileType(obj_data[i])
			break
			default:
				this[i] = obj_data[i]
			break
		}
	}
}
Material.prototype = {
	id: null,
	title: null,
	description: null,
	filename: null,
	media_url:null,
	url: null,
	type: {},
	toString: function() {
		return "<Material: " + this.title + ", " + this.type.type + ", " + (this.url || this.media_url) + " >"
	},
	show: function(target) {
		var material_view = DIV({'id':'material_' + this.id})
		replaceChildNodes(target, material_view)
		switch(this.type.type) {
			case "application/x-shockwave-flash":
				var flashvars = {autoplay:false};
				var params = {
					wmode:'opaque',
					wMode:'transparent',
					play:false,
					base: 'http://twentyninepalms.ca/media/flashmovies/flv/',
					src: this.media_url
				};
				var attributes = {
					wmode:'opaque',
					wMode:'transparent',
					play:false,
					base: 'http://twentyninepalms.ca/media/flashmovies/flv/',
					src: this.media_url
				};
				swfobject.embedSWF(this.media_url, 'material_' + this.id, "300", "240", "9.0.0","expressInstall.swf", flashvars, params, attributes);
			break;
			case "video/x-flv":
				var flashvars = {autoplay:false};
				var params = {
					wmode:'opaque',
					wMode:'transparent',
					play:false,
					src: this.media_url
				};
				var attributes = {
					wmode:'opaque',
					wMode:'transparent',
					play:false,
					src: this.media_url
				};
				swfobject.embedSWF(this.media_url, 'material_' + this.id, "300", "240", "9.0.0","expressInstall.swf", flashvars, params, attributes);
			break;
			
			default:
				switch(this.type.type.split('/')[0]) {
					case 'audio':
					break;
					case 'image':
						appendChildNodes(material_view, IMG({'src':this.media_url, 'alt':this.media_url}))
					break;
					default:
						// unsupported
					break;
				}
			break
		}
		
	}
}

/**
 * a scene with its data
 */
Scene = function(obj_data) {
	for (var i in obj_data) {
		switch(i) {
			case 'material':
				this.material = []				// is the default material
				this.material_types = {
					toString:function() {
						var s = null
						for (var k in this) if (typeof this[k] != "function") s = (s && s + ", " + k) || k
						return s
					}
				}		// here we list all stuff
				for (var j=0; j < obj_data[i].length; j++) {
					var m = obj_data[i][j]
					var material = new Material(m)
					
					if (!this.material_types[material.type.type]) this.material_types[material.type.type] = []
					this.material_types[material.type.type].push(material)
					
					// we exclude audio from normal materials
					switch(material.type.type.split('/')[0]) {
						case 'audio':
						break;
						default:
							this.material.push(material)
						break;
					}
				}
			break
			default:
				this[i] = obj_data[i]
			break
		}
	}
	this.view = {}
	this.current_material = 0
}
Scene.prototype = {
	view: {},
	toString: function() {
		return "<Scene: #" + this.id + ", " + this.number + ", `" + this.title + "`>"
	},
	/**
	 * shows only images and swf files in the material view
	 */
	show_material: function(target, id) {
		// update material view
		if (this.material.length) {
			try {
				material = this.material[id] || this.material[0]
				material.show(target)
				return material
			} catch (ex) {
				logs(ex)
			}

		} else {
			// only remove everything if nothing is there
			replaceChildNodes(target)
		}
	},
	show_next_material: function(target) {
		if (this.has_more_material()) {
			this.show_material(target, this.current_material++)
		}
	},
	show_prev_material: function(target) {
		this.current_material = this.current_material-1 >= 0 ? this.current_material-1:this.material.length-1
		this.show_material(target, this.current_material)
	},
	has_more_material: function() {
		return (this.current_material + 1 < this.material.length || this.material_types['audio'])
	},
	get_current_material: function() {
		return this.material[this.current_material]
	}
}

/**
 * a scene note
 * @param {Object} obj_data
 */
Note = function(obj_data) {
	for (var i in obj_data) {
		this[i] = obj_data[i]
	}
}
Note.prototype = {
	data: "",
	user_id:null,
	scene_id:null,
	toString: function() {
		return "<Note: #" + this.id + ", scene=" + this.scene + ", user=" + this.user + ">"
	}
}

/**
 * the view of a scene note
 * @param {Object} note
 */
NoteView = function(note) {
	this.note = note
	this.element = {}
	this.element.view = DIV({'class': 'note'},
		this.element.user = DIV({'class':'user'}, this.note.user && this.note.user.display_name || ''),
		this.element.data = DIV({'class':'data'})
	)
	if (this.note.data) this.element.data.innerHTML = this.note.data
	else appendChildNodes(this.element.data, BR({}))
	
	if (user && user.in_groups(['admin','actors','editors'])) {
		connect(this.element.view, 'onclick', bind(function(e){
			if (!this.is_editable()) {
				this.set_editable()
			}
		}, this))
	}
}
NoteView.prototype = {
	toString: function() {
		return "<NoteView: #" + this.note.id + ", " + this.note.user + ", `" + this.note.scene + "`>"
	},
	set_editable: function(value) {
		value = typeof value != 'undefined' ? value : true  
		setNodeAttribute(this.element.data, 'contenteditable', value)
		setNodeAttribute(this.element.data, 'title', 'press <ctrl>-<enter> to save or <escape> to leave')
		// we attache also some listeners
		if (value) {
			setNodeAttribute(this.element.data, '_moz_dirty', true)
			// backup
			this.old_data = this.element.data.innerHTML
			this.element.data.focus()
			//addElementClass(this.element.data, 'editable')
			setStyle(this.element.data, {'backgroundColor':'#ffffff'})
			Morph(this.element.data, {
				'style': {
					'background-color': '#ff6601'
				}
			})
			this.s = connect(this.element.data, 'onkeydown', bind(function(e) {
				ee = e.event()
				if (e.modifier().ctrl && (ee.keyCode == 13 || ee.keyCode == 10)) {
					this.commit_note()
				} else if (ee.keyCode == 27) {
					// remove everything 
					this.escape()
				}
			}, this))
		} else {
			this.element.data.blur()
			disconnect(this.s)
			removeElementClass(this.element.data, 'editable')
			setNodeAttribute(this.element.data, 'contenteditable', null)
			setNodeAttribute(this.element.data, '_moz_dirty', null)
			setNodeAttribute(this.element.data, 'title', null)
			Morph(this.element.data, {'style': {
					'backgroundColor': '#ffffff'
				}
			})
		}
	},
	is_editable: function() {
		attr = getNodeAttribute(this.element.data, 'contenteditable')
		return attr && (attr != "false" && attr != "null") 
	},
	escape: function() {
		if (!this.note.id) {
			this.element.data.blur()
			fade(this.element.view,{'afterFinish': bind(function(){
				removeElement(this.element.view)
			}, this)})
		} else {
			this.element.data.innerHTML = this.old_data
			this.set_editable(false)
		}
	},
	commit_note: function() {
		// create a JSON call
		var d = loadJSONDoc((urls.admin_url || '/admin/scene') + '/note/commit.json', {
			data: this.element.data.innerHTML,
			scene: this.note.scene && this.note.scene.id || Scenes.get_current_scene().id,
			id:this.note.id || null,
			weight: '',
			user: '',
			active: true
		})
		d.addCallbacks(bind(function(data) {
			try {
				if (!this.note.id) appendChildNodes(this.element.user, data.note.user.display_name) 
				this.note = new Note(data.note)
				this.set_editable(false)
			} catch(ex) {
				for (var i in ex) log(i,':',ex[i])
			}
		}, this), bind(function(data){
			log("error:", data.status, data.exception)
		}, this))
	}
}

ScenesController = function (targets) {
	this.targets = targets
}
ScenesController.prototype = {
	scenes: [],
	current: null,
	api_url: '/scenes',
	targets: {
		notes:null,
		titles:null,
		scenes:null
	},
	load_index: function() {
		var d = loadJSONDoc(this.api_url + '/json.index');
		d.addCallbacks(bind(function(data) {
			// put the stuff into view
			for (var i = 0; i < data.scenes.length; i++) {
				var scene = new Scene(data.scenes[i])
				this.scenes[i] = scene
						
				var dummy = DIV()
				dummy.innerHTML = scene.data
				
				try {
					appendChildNodes(this.targets.scenes, 
						scene.view.scene = DIV({'class':'scene', 'id':'scene_' + scene.id}, 
							dummy.childNodes))
	
					signal(this, 'onloadscene', scene, i)
					
					// if there is a scene selected
					if (this.current == null && document.location.hash == '#'+scene.id) this.select_scene(i)
				} catch (ex) {
					for (var i in ex) log(i,':',ex[i])
				}
			}
			// we select the first scene
			if (this.current == null) this.select_scene(0)
			
			if ((scene = this.get_current_scene())) {
				Traverse(this.targets.scenes, {scope:'scenes',queue:'break',
					'attrs': {
						'scrollTop': scene.view.scene.offsetTop
					}
				})
			}
			signal(this, 'onloadcomplete', this.get_current_scene())
		}, this), function(error) {
			log('error',error)
		})
		
		/**
		 * we check on every scroll event which scene is in the current view
		 * @param {Object} ev
		 * @param {Object} amount
		 * @param {Object} delay
		 */
		connect(this.targets.scenes, 'onmanualscroll', bind(function(ev) {
			/** 
			 * calculate the closest scene by traversing through all heights and
			 * checking against the current position of the view
			 */
			for (var i = 0; i < this.scenes.length; i++) {
				var scene = this.scenes[i]
				if ((scene.view.scene.offsetTop >= this.targets.scenes.scrollTop
					&& scene.view.scene.offsetTop < (this.targets.scenes.scrollTop + this.targets.scenes.offsetHeight))) {
					this.select_scene(i, {traverse_scenes: false}) !== null
					break;
				}
			}
			
		}, this))
	},
	select_scene: function(i, options) {
		options = options || {
			traverse_scenes: true
		}
		if (this.current != i) {
			var last_scene = this.get_current_scene()
			// remove tite selection if one exists
			if (this.current != null) {
				removeElementClass(this.scenes[this.current].view.scene, 'selected')
			}
			if (undefined != this.scenes[i] && null != this.scenes[i]) {
				this.current = i
				addElementClass(this.scenes[this.current].view.scene, 'selected')
				
				// for validation of success and invoking of second level code
				signal(this, "onselectscene", this.scenes[this.current], last_scene, options)
				return this.current
			}
		}
		return null
	},
	select_next_scene: function(wrap) {
		if (this.current+1 < this.scenes.length ) return this.select_scene(this.current+1)
		else if(wrap) return this.select_scene(0)
	},
	select_prev_scene: function(wrap) {
		if (this.current-1 >= 0) return this.select_scene(this.current-1)
		else if(wrap) return this.select_scene(this.scenes.length-1)
	},
	get_current_scene: function() {
		if (this.current != null) return this.scenes[this.current]
		else return null
	},
	get_next_scene_with_material: function() {
		var i = (this.current < this.scenes.length-1) ? this.current+1:0
		while(i != this.current) {
			if (this.scenes[i].material.length || this.scenes[i].material_types['audio/mpeg']) break
			else i = (i<this.scenes.length-1) ? i+1:0
		}
		return i
	},
	get_prev_scene_with_material: function() {
		var i = (this.current-1 >= 0) ? this.current-1:this.scenes.length-1
		while(i != this.current) {
			if (this.scenes[i].material.length || this.scenes[i].material_types['audio/mpeg']) break
			else i = (i-1>= 0) ? i-1:this.scenes.length-1
		}
		return i
	},
	/**
	 * searches the next material within all scenes
	 */
	show_next_material:function(){
		scene = this.get_current_scene()
		if (scene.has_more_material()) return scene.show_next_material(this.targets.material)
		else {
			this.select_scene(this.get_next_scene_with_material())
			return this.get_current_scene().get_current_material()
		}
	},
	show_prev_material:function(){
		scene = this.get_current_scene()
		if (scene.current_material > 0) return scene.show_prev_material(this.targets.material)
		else {
			this.select_scene(this.get_prev_scene_with_material())
			return this.get_current_scene().get_current_material()
		}
	}
}



/**
 * boot code for the scenes page
 */
boot_scenes = function(api_url, admin_url) {
	var titles_tbody = TBODY()
	appendChildNodes($('scene_titles_scrollable'), TABLE({}, titles_tbody))
	
	Scenes = new ScenesController({
		'scenes':$('scenes'),
		'notes':$('scene_notes_scrollable'),
		'notes_meta':$('scene_notes'),
		'notes_menu':$('scene_notes_menu'),
		'titles':$('scene_titles_scrollable'),
		'titles_tbody': titles_tbody
		})

	urls.api_url = Scenes.api_url = api_url
	urls.admin_url = Scenes.admin_url = admin_url
	
	var edit_scene_btn = $('edit_scene_btn')
	if (edit_scene_btn) {
		connect($('edit_scene_btn'), "onclick", bind(function(ev) {
			document.location.href = "/admin/scene/edit?id=" + this.scenes[this.current].id
			ev.stop()
		}, Scenes))
	}
	
	connect(Scenes, "onloadscene", bind(function(scene, i) {
		// we connect scene notes back to their scene
		for (var c = 0; c < scene.notes.length; c++) {
			scene.notes[c].scene = scene
		}
		
		appendChildNodes(this.targets.titles_tbody, 
			scene.view.title_tgl = TR({'class':'title_tgl', 'id':'scene_title_' + scene.id}, 
				TD({'class':'number'}, scene.number), 
				TD({'class':'title'}, scene.title)))
				
		// we are selecting scenes by clicking the titles
		connect(scene.view.title_tgl, 'onclick', partial(bind(function(scene, i, ev){
			if (null !== this.select_scene(i)) {
				// also move the view to that scene.....
				Traverse(this.targets.scenes, {scope:'scenes',queue:'break',
					'attrs': {
						'scrollTop': scene.view.scene.offsetTop
					}
				})
			}
		}, this), scene, i))
			
	}, Scenes))
	
	connect(Scenes, "onloadcomplete", bind(function(scene) {
		if (this.targets.titles != null) {
			Traverse(this.targets.titles, {scope:'scenes',queue:'break',
				'attrs': {
					'scrollTop': scene.view.title_tgl.offsetTop
				}
			})
		}
		
		// provide menu only if admin url is present
		if (this.targets.notes_menu && user && user.in_groups(['admin','actors','editors'])) {
			// add options
			appendChildNodes(this.targets.notes_menu, this.targets.notes_menu.add_note = SPAN({'class':'orange'}, 'new note'))
			
			connect(this.targets.notes_menu.add_note, 'onclick', bind(function(e) {
				try {
					var note = new NoteView(new Note())
					if (this.targets.notes.childNodes.length) {
						child = getFirstElementByTagAndClassName(null,null, this.targets.notes)
						insertSiblingNodesBefore(child, note.element.view)
					} else {
						appendChildNodes(this.targets.notes, note.element.view)
					}
					note.set_editable()
				} catch (ex) {
					for (var i in ex) log(i,':',ex[i])					
				}
			}, this))
			
			// we setup notes in that way, that we have a mouseover menu
			connect(this.targets.notes_meta, "onmouseover", bind(function(e) {
				if (!isChildNode(e.relatedTarget(), this.targets.notes_meta)) appear(this.targets.notes_menu, {'queue':'break','to':1})
			}, this))
			connect(this.targets.notes_meta, "onmouseout", bind(function(e) {
				if (!isChildNode(e.relatedTarget(), this.targets.notes_meta)) fade(this.targets.notes_menu, {'queue':'break','to':0})
			}, this))
		}

	}, Scenes))
	
	connect(Scenes, "onselectscene", bind(function(scene, last_scene, options) {
		if (last_scene) {
			removeElementClass(last_scene.view.title_tgl, 'selected')
		}
		addElementClass(scene.view.title_tgl, 'selected')
		
		// test titles for correct position
		if (!(scene.view.title_tgl.offsetTop >= this.targets.titles.scrollTop
			&& scene.view.title_tgl.offsetTop < (this.targets.titles.scrollTop + this.targets.titles.offsetHeight))) {
			Traverse(this.targets.titles, {scope:'scenes',queue:'break',
				'attrs': {
					'scrollTop': scene.view.title_tgl.offsetTop
				}
			})
		}

		// we also update the notes view
		replaceChildNodes(this.targets.notes, 
		 	map(function(note) {
				var note_view = new NoteView(new Note(note))
				return note_view.element.view
			}, scene.notes))
			
		// we change the location.hash for bookmarking
		document.location.hash = this.scenes[this.current].id

		// we update the edit button if there
		if ((edit_scene_btn = $('edit_scene_btn'))) {
			edit_scene_btn.href = Scenes.admin_url + '/edit?id=' + this.scenes[this.current].id
		}
	}, Scenes))

	Scenes.load_index()
}

/**
 * IMPController
 * @param {Object} imp
 */
IMPController = function(imp) {
	this.imp = imp
	this.view = {}
	this.current = 0
	this.list = []
	this.view.element = DIV({'class':'ctrl'}, 
		this.view.btn = IMG({'class':'tape', 'src':'/static/images/tape_blue.png'}), ' ', 
		this.view.title = SPAN({style:{opacity:0}, 'class':'info'}, 'TITLE AUTHOR DATE'))
		
	connect(this.view.btn, 'onclick', bind(function(e){
		
		if (this.imp.is_playing()) {
			this.imp.pause()
			log('imp is paused')
		} else {
			this.imp.play()
			log('imp is playing')
		}
	},this))
	connect(this.imp, 'onopen', bind(function(sound){
		//logs(sound)
	}, this))
	connect(this.imp, 'onioerror', bind(function(sound){
		logs("ioerror",e)
	}, this))
	connect(this.imp, 'oncomplete', bind(function(sound){
		//logs(sound)
	}, this))
	connect(this.imp, 'onsoundcomplete', bind(function(sound){
		this.set_next()
	}, this))
	connect(this.imp, 'onprogress', bind(function(sound){
	}, this))
	connect(this.imp, 'onload', bind(function() {
		//logs('loaded...')
	}, this))
}
IMPController.prototype = {
	set_playlist:function(list) {
		if (this.list.length) Opacity(this.view.title,{queue:'break',scope:'imp',from:1,to:0})

		this.list = list || []
		this.current = 0
		
		if (this.list.length) {
			Opacity(this.view.title,{queue:'break',scope:'imp',from:0,to:1})
			this.set_current()
		}
	},
	set_current:function(id) {
		try {
			id = id || 0
			if (!this.list.length) {
				replaceChildNodes(this.view.title)
			} else if (id < this.list.length) {
				this.current = id
				this.imp.load(this.list[this.current].media_url || this.list[this.current].url)
				replaceChildNodes(this.view.title, this.list[this.current].title)
			}
		} catch (ex) {
			logs(ex)
		}
	},
	set_next:function() {
		id = this.current+1 
		if (id == this.list.length) id = 0
		this.set_current(id)
	}
}
/**
 * boot code for the script page
 * @param {Object} api_url
 */
boot_script = function(api_url, admin_url) {
	
	//appendChildNodes(document.body, DIV({'id':'imp_wrapper'}, DIV({'id':'invisible_music_player'})))
	
	
	var titles_tbody = TBODY()
	appendChildNodes($('scene_titles_scrollable'), TABLE({}, titles_tbody))
	
	/**
	 * this is the navigation structure
	 */
	var scenes_nav = {}
	scenes_nav.table = TABLE({'class':'meta'},TBODY({},
		TR({}, scenes_nav.imp = TD({'class':'imp'}, DIV({'id':'invisible_music_player'})), TD({'class':'middle'}, scenes_nav.btn_next_media = A({},'next media')), TD({'class':'small'},scenes_nav.btn_prev_media = A({'class':'orange'},'<<'))),
		TR({'class':'height'}, scenes_nav.title = TD({'class':'title', rowspan: '2'}), TD({'class':'middle'},scenes_nav.btn_next_scene = A({},'next scene')), TD({'class':'small'},scenes_nav.btn_prev_scene = A({'class':'orange'},'<<'))),
		TR({}, /* rowspan: TD({}),*/ TD({'class':'middle','style':{'vertical-align':'top','padding-top':'0px'}},scenes_nav.btn_all_scenes = A({},'all scenes')))
	))
	appendChildNodes($('scene_nav'), scenes_nav.table)

	// our music player
	var imp = new InvisibleMusicPlayer('invisible_music_player', {
		path:'/static/media/imp.swf'
	})
	var imp_controller = new IMPController(imp);
	
	appendChildNodes(scenes_nav.imp, imp_controller.view.element)
	
	var titles_dialog = new Dialog({
		width:'270px',
		height:'134px',
		title:'all scenes'}, $('scene_titles'))
	appendChildNodes(document.body,titles_dialog)
	
	connect(titles_dialog, 'onclosing', bind(function(e) {
		fade(this)
	}, titles_dialog))

	Scenes = new ScenesController({
		'scenes':$('scenes'),
		'titles':$('scene_titles_scrollable'),
		'titles_tbody': titles_tbody,
		'titles_dialog': titles_dialog,
		'title': scenes_nav.title,
		'scenes_nav': scenes_nav,
		'material': $('scene_material'),
		'imp':imp_controller
		})
		
	urls.api_url = Scenes.api_url = api_url
	urls.admin_url = Scenes.admin_url = admin_url
	
	
	connect(scenes_nav.btn_next_scene, 'onclick', bind(function(e){
		this.select_next_scene(true)
	}, Scenes))
	connect(scenes_nav.btn_prev_scene, 'onclick', bind(function(e){
		this.select_prev_scene(true)
	}, Scenes))
	
	connect(scenes_nav.btn_next_media, 'onclick', bind(function(e){
		this.show_next_material()
	}, Scenes))
	connect(scenes_nav.btn_prev_media, 'onclick', bind(function(e){
		this.show_prev_material()
	}, Scenes))

	connect(scenes_nav.btn_all_scenes, 'onclick',bind(function(e){
		toggle(this.targets.titles_dialog, 'appear', {
			queue:'break',
			afterFinish:bind(function(){
				scene = this.get_current_scene()
				// test titles for correct position
				if (!(scene.view.title_tgl.offsetTop >= this.targets.titles.scrollTop
					&& scene.view.title_tgl.offsetTop < (this.targets.titles.scrollTop + this.targets.titles.offsetHeight))) {
					Traverse(this.targets.titles, {scope:'scenes',queue:'break',
						'attrs': {
							'scrollTop': scene.view.title_tgl.offsetTop
						}
					})
				}
			}, this)
		})
	}, Scenes))
	
	connect(Scenes, "onloadscene", bind(function(scene, i) {
		appendChildNodes(this.targets.titles_tbody, 
			scene.view.title_tgl = TR({'class':'title_tgl', 'id':'scene_title_' + scene.id}, 
				TD({'class':'number'}, scene.number), 
				TD({'class':'title'}, scene.title)))
				
		// we are selecting scenes by clicking the titles
		connect(scene.view.title_tgl, 'onclick', partial(bind(function(scene, i, ev){
			this.select_scene(i)
		}, this), scene, i))
			
	}, Scenes))
	
	connect(Scenes, "onloadcomlete", bind(function(scene) {
		if (this.targets.titles != null) {
			Traverse(this.targets.titles, {scope:'scenes',queue:'break',
				'attrs': {
					'scrollTop': scene.view.title_tgl.offsetTop
				}
			})
		}
	}, Scenes))

	connect(Scenes, "onselectscene", bind(function(scene, last_scene, options) {
		if (last_scene) {
			removeElementClass(last_scene.view.title_tgl, 'selected')
		}
		addElementClass(scene.view.title_tgl, 'selected')
		
		// test titles for correct position
		if (!(scene.view.title_tgl.offsetTop >= this.targets.titles.scrollTop
			&& scene.view.title_tgl.offsetTop < (this.targets.titles.scrollTop + this.targets.titles.offsetHeight))) {
			Traverse(this.targets.titles, {scope:'scenes',queue:'break',
				'attrs': {
					'scrollTop': scene.view.title_tgl.offsetTop
				}
			})
		}
		
		if (options && false !== options.traverse_scenes) {
			// also move the view to that scene.....
			Traverse(this.targets.scenes, {scope:'scenes',queue:'break',
				'attrs': {
					'scrollTop': scene.view.scene.offsetTop
				}
			})
		}
		
		// update title
		replaceChildNodes(this.targets.title, scene.number, " ", scene.title)
			
		// update the imp
		this.targets.imp.set_playlist(scene.material_types['audio/mpeg'])
		
		scene.show_material(this.targets.material)

		// we change the location.hash for bookmarking
		document.location.hash = this.scenes[this.current].id
		
		// we update the edit button if there
		if ((edit_scene_btn = $('edit_scene_btn'))) {
			edit_scene_btn.href = Scenes.admin_url + '/edit?id=' + this.scenes[this.current].id
		}
	}, Scenes))	
	
	//Scenes.load_index()
	
	// this is because Scenes.load_index() is faster than imp with loading 
	connect(imp, 'onload', bind(function() {
		this.load_index()
	}, Scenes))
	
}