/*******************************
  用途：promote page 使用的lightbox
  說明：要繼承application.js，換掉呼叫lightbox的class
  範例：
        <ul class="promote-mv-lightbox">
	  <li>
	    <a title="Video of iPhone Edition" rel="http://hk.kkbox.com/iphoneEN.flv" href="#" class="lightbox-mv" id="vedio_1">iPhone</a>
	  </li>
        </ul>

********************************/


$(function() {
  if ($('.promote-mv-lightbox').length) {
      if (!$('#mv-hidden').length) {
	  $('<div id="mv-hidden"><div id="mv-container"  style="width:650px; height:380px;"><div id="mv-flowplayer" style="width:640px; height:360px;"></div></div></div>').appendTo('body');
      }
      $('.promote-mv-lightbox').each(function(i) {
	  $(this).find('a.lightbox-mv').colorbox({
	      current: "video {current} of {total}",
	      inline: true,
	      href: '#mv-container',
	      rel: 'mvblock-' + i
	  });
      });
      $(document).bind('cbox_load', function() {
	  var that = $.fn.colorbox.element();
	  if ($(that).parents('.promote-mv-lightbox').length) {
	      $('#mv-flowplayer').empty();

	      var flowplayerMoviePath = "http://hk.kkbox.com/js/flowplayer.swf";

	      //IE - random str for tricking client loading flash
	      if ($.browser.msie) {
		  flowplayerMoviePath += "?" + new Date().getTime();
	      }

	      setTimeout(function() {
		  flowplayer("mv-flowplayer", flowplayerMoviePath, {
		      key:  KKBOX._MVKEY || '',
		      clip: { 
			  url: $(that).attr('rel'),
			  title: $(that).attr('rel'),
			  autoPlay: true,
			  autoBuffering: true
		      },
		      onStart: function(clip) { 
			  var id_arr = $(that).attr('id').split("_"); // id = xxx_{mvid}
			  save_mv_record(id_arr[1]); //alert(id_arr[1]);
		      },
		      plugins:  {
			  controls: {
			      tooltips:  { buttons: true }
			  }
		      }
		  });
	      },100);
	  }
      }).bind('cbox_closed', function() {
	  var that = $.fn.colorbox.element();
	  if ($(that).parents('.promote-mv-lightbox').length) {
	    $('#mv-flowplayer').css({ width: '640px', height: '360px' });
	    $('#mv-container').css({ width: '646px', height: '370px' });
	  }
      });
  }
});