(function () {
   $(document).ready(
     function() {
       // fixme (i18n?)
       var setHash = function (str) {
         var hash = str;
         if (str.indexOf('#') !== 0) {
           hash = ['#', str].join('');
         }
         window.location.hash = hash;
       };
       var getHash = function () {
         var hash = window.location.hash;
         var match = hash.match(/\#(.+)/);
         if (match !== null && match.length > 1) {
           hash = match[1];
         }
         return hash;
       };

       var $videoarea = $('#video-area');
       var playVideo = function (video_id) {
         var $videoframe = $(['#', video_id].join(''));
         if ($videoframe.length > 0) {
           // FIXME how do i stop it?
           $videoarea.find('.video-frame').removeClass('video-frame-active');
           $videoframe.addClass('video-frame-active');
           $videoarea.find('li.video').removeClass('active');       
           $(['#', video_id, '_li'].join('')).addClass('active');
           setHash(video_id);
         }
       };

       $videoarea.delegate(
         'li.video',
         'click',
         function (ev) {
           ev.preventDefault();
           var $target = $(ev.target);
           if (ev.target.nodeName.toLowerCase() !== 'li') {
             $target = $target.parents('li');
           }
           var _id = $target.attr('id');
           var hash = _id.substring(0, _id.lastIndexOf('_li'));
           playVideo(hash);
         }
       );
       if (getHash().length > 0) {
         playVideo(getHash());
       }
     }
   );
 })();