var VideoBox = new Class({
    Implements:[Events,Options],
    options:{
        controlClass:'.videoclip',
        selectedClass:'vselected',
        controlClassName:'videoclip',
        playButton:'.videostill a',
        previewScreen:'videobg',
        movies:['/flash/diploma_clip_01.flv','/flash/diploma_clip_02.flv','/flash/diploma_clip_03.flv'],
        splash:['/flash/diploma_clip_01.jpg','/flash/diploma_clip_02.jpg','/flash/diploma_clip_03.jpg'],
        swiff:'/flash/flowplayer-3.0.7.swf'
    },
    initialize:function(options){
        this.setOptions(options);
        
        this.controlName = this.options.controlClassName;
        this.controls = $$(this.options.controlClass);
        this.playButton = $$(this.options.playButton)[0];
        this.previewScreen = this.options.previewScreen
        this.selected = $$(this.options.selectedClass + ',' + this.options.selectedClass + ' a');
        this.selectedClass = this.options.selectedClass;
        this.swiff = this.options.swiff;
        this.movies = this.options.movies;
        this.splash = this.options.splash;
        
        if(this.movies.length!=null){
            this.selectedMovie = this.movies[0];
            this.playButton.setProperty('href',this.selectedMovie);
        }
        
        this.bound = {};
        
        //set up event for buton selection
		this.bound.changePreview = this.changePreview.bindWithEvent(this);
		this.controls.addEvent('click',this.bound.changePreview);
		
		//set up play
		this.bound.play = this.play.bindWithEvent(this);
		this.playButton.addEvent('click',this.bound.play);
		
		this.playButton.setStyle('background-image','url(' + this.splash[0] + ')');
		$('player').set('html','<img src="/images/video-play.png" alt="Play" style="position:relative;top:93px;left:189px;"/>');
		var vidFile = $('player').get('href');
		flowplayer('player',this.swiff,{
			clip:{
				autoPlay:false,
				url:vidFile
				},
			play:{
				url:'/images/video-play.png'
			},
			plugins:{
				controls:{
					progressColor:'#681C11',
					bufferColor:'#B84331',
					timeColor:'#B84331',
					bufferGradient:'medium',
					fullscreen:false,
					background:'#000000'
				}
			}
		});
		
		
    },
    changePreview:function(event){
        $f('player')? $f('player').unload():0;
        $('player').set('html','<img src="/images/video-play.png" alt="Play" style="position:relative;top:93px;left:189px;"/>');
        
        var elementClicked = $$(event.target);
        var selected = this.options.selectedClass;
        var controlClassName = this.options.controlClassName;
        this.splash = this.options.splash;
        
        
        // turn off previously selected
        this.controls.each(function(el,i){
            if(el.hasClass(selected)){
                el.removeClass(selected);
            }
        });
        
        //has correct element been clicked or child
        if(elementClicked.getProperty('class')==controlClassName){
            elementClicked.addClass(selected);
        }
        else{   //child bubble up until right
            elementClicked = $$(elementClicked).getParent(this.options.controlClass);
            elementClicked.addClass(selected);
        }
        
        selectedIndex = parseInt(elementClicked.getProperty('rel'));
        if(this.movies.length!=null){
            this.selectedMovie = this.movies[selectedIndex];           
            this.playButton.setProperty('href',this.selectedMovie);
			this.playButton.setStyle('background-image','url(' + this.splash[selectedIndex] + ')');
        }
        
        //TO DO: Change the background panel
               
        //flowplayer('player','/flash/flowplayer-3.0.7.swf');
        
        return false;
    },
    play:function(event){
        var vidFile = $('player').get('href');
        
        flowplayer('player',this.swiff,{
			clip:{
				autoPlay:false,
				url:vidFile
				},
			play:{
				url:'/images/video-play.png'
			},
			plugins:{
				controls:{
					progressColor:'#681C11',
					bufferColor:'#B84331',
					timeColor:'#B84331',
					bufferGradient:'medium',
					fullscreen:false,
					background:'#000000'
				}
			}
		});
        
        (function(){
			 $f('player').setClip($('player').get('href'));
			 $f('player').play();
        }).delay(1);
       
        
        return false;
    }
});