/**
 *  CLASS:  MediaBoard
 */
var MediaBoard = new Class({
  Implements:	[Options, Events],
  options:		{
    mediaDisplay: 'mbDisplay',
    imageControl: 'mbImageCtl',
    videoControl: 'mbVideoCtl',
    imageTitle:   '???',
    imageList:    [],
    videoTitle:   'Filme',
    videoList:    []
  },

  medDis:       null,
  vidDis:       null,
  imgDis:       null,
  infDis:       null,
  imgCtl:       null,
  vidCtl:       null,

  imgCtlBoard:  null,
  vidCtlBoard:  null,

  player:       null,

  // Constructor
  initialize:	function(options,events) {
    this.setOptions(options);
    this._initReferences();

		// Images
    this.imgCtlBoard = new ImageControlBoard({panel: this.imgCtl, title: imageTitle, data: imageList});
    this.imgCtlBoard.addEvents({
      mouseenter: function(uid) {this.viewImage(uid);}.bind(this),
      mouseleave: function(uid) { }.bind(this),
      click:      function(uid) { }.bind(this)
    });

		// Video
		if((videoList != undefined) && (videoList.length > 0)) {
		  this.vidCtlBoard = new VideoControlBoard({panel: this.vidCtl, title: videoTitle, data: videoList});
		  this.vidCtlBoard.addEvents({
		    mouseenter: function(uid) { this.loadMovie(uid); }.bind(this),
		    mouseleave: function(uid) { this._viewInfoCanvas(false); }.bind(this),
		    click:      function(uid) { this.playMovie(uid); }.bind(this)
		  });

		  this.player = new VideoPlayer({uid: 'mbVideoPlayer'});
		}
		else {
			this.vidCtl.dispose();
		}
		
		// Download
	  $('mbDLDoc').set('href', filmograhy);

		// Erste Bild als Standard
    if(this.options.imageList.length > 0) {
      this.viewImage(this.options.imageList[0].id);
    }
  },

  viewImage: function(uid) {
  	if(this.player != null) {
			var state = this.player.getState();
			if(state == 'PLAYING' || state == 'BUFFERING') return;  		
  	}
    this.options.imageList.each(function(item, idx) {
      if(item.id == uid) {
        this._viewImageCanvas();
        this.imgDis.getChildren().each(function(item) {item.dispose()});

        var img = new Element('img', {
                              'alt':    item.title,
                              'src':    imageBasePath + item.imageView
        });
        img.inject(this.imgDis);
        $('mbDLImg').set('href', imageBasePath + item.imageDownload);
      }
    }.bind(this));
  },

	loadMovie: function(uid) {
		var state = this.player.getState();
		
		this._viewVideoCanvas();
    this.options.videoList.each(function(item, idx) {
      if(item.id == uid) {
				this.infDis.set('html', item.description);
				this._viewInfoCanvas(true);
				if(state != 'PLAYING' && state != 'BUFFERING') {
		      this._viewVideoCanvas();
		      this.player.load(item, videoBasePath);
        }
      }
    }.bind(this));
	},

  playMovie: function(uid) {
    this.options.videoList.each(function(item, idx) {
      if(item.id == uid) {
        this._viewVideoCanvas();
        this.player.play(item, videoBasePath);
      }
    }.bind(this));
  },

  _viewImageCanvas: function() {
    this.imgDis.setStyle('visibility', 'visible');
    this.vidDis.setStyle('visibility', 'hidden');
  },

  _viewVideoCanvas: function() {
    this.vidDis.setStyle('visibility', 'visible');
    this.imgDis.setStyle('visibility', 'hidden');
  },
  
  _viewInfoCanvas: function(show) {
  	if(show) {
		  this.infDis.setStyles({'visibility': 'visible', 'display': 'block'});
		}
		else {
		  this.infDis.setStyles({'visibility': 'hidden', 'display': 'none'});
		}
  },

  _initReferences: function()
  {
    this.medDis = $(this.options.mediaDisplay);
    if(this.medDis == null) {
      printError(this.options.mediaDisplay + ' ?');
    }
    else {
      this.imgDis = this.medDis.getElement('.mbImage');
      this.vidDis = this.medDis.getElement('.mbVideo');
      this.infDis = $('mbInfo');
    }

    this.imgCtl = $(this.options.imageControl);
    if(this.imgCtl == null) printError(this.options.imageControl + ' ?');
    this.vidCtl = $(this.options.videoControl);
    if(this.vidCtl == null) printError(this.options.videoControl + ' ?');
  }
});


/**
 *
 */
var ImageControlBoard = new Class({
  Implements:	[Options, Events],
  options:		{
    panel:  null,
    title:  '',
    data:   []
  },

  // Constructor
  initialize:	function(options,events) {
    this.setOptions(options);
    this._empty();
    this._setTitle();
    this._setButtonPanel();
  },

  _setTitle: function() {
    var elem = new Element('div', {'class': 'mbTitle', html: this.options.title});
    elem.inject(this.options.panel);
    
    var fontSize = elem.getStyle('font-size').toInt();
    while((elem.getSize().x > 170) && (fontSize > 1)) {
      fontSize--;
      elem.setStyle('font-size', fontSize + 'px');
    }

    var top = 18 - (elem.getSize().y / 2);
    elem.setStyle('top', top + 'px');
  },

  _setButtonPanel: function() {
    var board     = new Element('div', {'class': 'mbImagePanel'});
    board.inject(this.options.panel);

    var btnPanel  = new Element('div', {'class': 'mbButtonPanel'});
    btnPanel.inject(board);

    this.options.data.each(function(item) {
    	if(item.title != '') {
		    var btn = new ImageButton({'imagePath': imageBasePath, 'data': item});
		    $(btn).inject(btnPanel);
		    btn.addEvents({
		      mouseenter: function(uid) {
		        this.fireEvent('mouseenter', uid);
		      }.bind(this),

		      mouseleave: function(uid) {
		        this.fireEvent('mouseleave', uid);
		      }.bind(this),

		      click: function(uid) {
		        this.fireEvent('click', uid);
		      }.bind(this)
		    });
		  }
    }.bind(this));
  },

  _empty: function() {
    if(this.options.panel != null) {
      this.options.panel.getChildren().each(function(item) {item.dispose()});
    }
  },

  toElement: function() {
    return this.options.panel;
  }
});

/**
 *
 */
var VideoControlBoard = new Class({
  Implements:	[Options, Events],
  options:		{
    panel:  null,
    title:  '',
    data:   []
  },

  scroll:   null,
  
  // Constructor
  initialize:	function(options,events) {
    this.setOptions(options);
    this._empty();
    this._setTitle();
    this._setButtonPanel();
  },

  _setTitle: function() {
    var elem = new Element('div', {'class': 'mbTitle', html: this.options.title});
    elem.inject(this.options.panel);
  },

  _setButtonPanel: function() {
    var board     = new Element('div', {'class': 'mbVideoPanel'});
    board.inject(this.options.panel);

    var btnSlider  = new Element('div', {'class': 'mbButtonSlider'});
    btnSlider.inject(board);
    
    var btnPanel  = new Element('div', {'class': 'mbButtonPanel'});
    btnPanel.inject(btnSlider);

    this.options.data.each(function(item) {
      var btn = new ImageButton({'imagePath': videoBasePath, 'data': item});
      $(btn).inject(btnPanel);
      btn.addEvents({
        mouseenter: function(uid) {
          this.fireEvent('mouseenter', uid);
        }.bind(this),

        mouseleave: function(uid) {
          this.fireEvent('mouseleave', uid);
        }.bind(this),

        click: function(uid) {
          this.fireEvent('click', uid);
        }.bind(this)
      });
    }.bind(this));

    btnPanel.setStyle('width', this.options.data.length * 35);
    var left = 285 - (this.options.data.length * 35);
    if(left < 0) left = 0;
    btnPanel.setStyle('left', left);

    this.scroll = new Scroller(btnSlider, {
      area:     100,
      velocity: 1,
      direction: 'x'
    });
    btnSlider.addEvent('mouseenter', this.scroll.start.bind(this.scroll));
    btnSlider.addEvent('mouseleave', this.scroll.stop.bind(this.scroll));

		/*
    var slider = new Element('div', {'class': 'mbSlider'});
    slider.inject(board);
    var knob = new Element('div', {'class': 'mbSliderKnob'});
    knob.inject(board);
		*/
  },

  _empty: function() {
    if(this.options.panel != null) {
      this.options.panel.getChildren().each(function(item) {item.dispose()});
    }
  },

  toElement: function() {
    return this.options.panel;
  }
});

/**
 *
 */
var ImageButton = new Class({
  Implements:	[Options, Events],
  options:		{
    imagePath:  '',
    data:       []
  },

  element:    null,

  // Constructor
  initialize:	function(options,events) {
    this.setOptions(options);
    
    this.element = new Element('a', {
      'class':  'mbBtn',
      'id':     this.options.data.id,
      'href':   'javascript:void(0)',
      'title':  this.options.data.title
    });
    this.element.addEvents({
      mouseenter: function(event) {
		    // event.stop();
        this.fireEvent('mouseenter', this.options.data.id);
      }.bind(this),
      mouseleave: function(event) {
        // event.stop();
        this.fireEvent('mouseleave', this.options.data.id);
      }.bind(this),
      click: function(event) {
        // event.stop();
        this.fireEvent('click', this.options.data.id);
      }.bind(this)
    });

    var img = new Element('img', {
      'alt':    this.options.data.title,
      'src':    this.options.imagePath + this.options.data.imageButton
    });
    img.inject(this.element);

  },

  toElement: function() {
    return this.element;
  }
});

/**
 *
 */
var VideoPlayer = new Class({
  Implements:	[Options, Events],
  options:		{
    uid:        ''
  },

  // Constructor
  initialize:	function(options,events) {
    this.setOptions(options);

    jwplayer(this.options.uid).setup({
      flashplayer:  	'assets/snippets/mediaboard/js/mediaplayer/player.swf',
      height:       	190,
      width:        	285,
      'logo.file':		'assets/snippets/mediaboard/img/wacode.png',
      'logo.timeout':	'1.5',
      'logo.out':			'0.4',
      'logo.link':		'http://www.wacode.com',
      
    });
  },

  load: function(item, videoBasePath) {
    jwplayer(this.options.uid).load({file: (videoBasePath + item.video), image: (videoBasePath + item.imageView), duration: '-1'});
  },

  play: function(item, videoBasePath) {
  	this.load(item, videoBasePath);
    jwplayer(this.options.uid).play();
  },

  stop: function() {
    jwplayer(this.options.uid).stop();
  },
  
  getState: function() {
    return jwplayer(this.options.uid).getState();
  }
});


/**
 *
 */
function printError(txt) {
  var err = new Element('div',{'class': 'error'});
  var dat = new Date();
  var out = dat.toLocaleFormat("%Y-%m-%d %T: ") + txt;
  err.set('html', out);
  err.inject($(document.body));
}

/**
 * Main
 */
window.addEvent('domready', function() {
  new MediaBoard({
    mediaDisplay: 'mbDisplay',
    imageControl: 'mbImageCtl',
    videoControl: 'mbVideoCtl',
    imageTitle:   imageTitle,
    imageList:    imageList,
    videoTitle:   videoTitle,
    videoList:    videoList
  });
});