<html>

<head>
  <link rel="stylesheet" type="text/css" href="/static/css/colorbox.css/" />
  <script type="text/javascript" src="/static/js/jquery.js"></script>
  <script type="text/javascript" src="/static/js/jquery.colorbox-min.js"></script>
  <script type="text/javascript" src="/static/js/swfobject.js/"></script>
  <script type="text/javascript">


$(document).ready(function() {
  var playerPath = "/static/images/player.swf/";
  $('.playBtn').colorbox({width: '350px', height: '180px', inline: true, href: '#playerWrap'});
  var so = new SWFObject(playerPath, 'mpl', '300', '30', '9');
  so.addParam("allowfullscreen", "true");
  so.addParam('flashvars', 'file=/static/images/GMD.mp3');
  so.write("player");
  $().bind('cbox_closed', function() {
    alert("closed");
    });
  });

function flowInit() {
  var playerPath = "/static/images/flowplayer-3.1.5.swf/";
  $f("player", playerPath, {
    plugins: {
      audio: {
        url: '/static/images/flowplayer.audio.swf/'
        },
      controls: {
        url: '/static/images/flowplayer.controls.swf/'
        }
      }
    });
  }
  </script>

<style type="text/css">
#hidden {
  display: none;
  }

#flowplayer {
  display: block;
  width: 400px;
  height: 100px;
  }


#playerWrap {
  position: relative;
  }

#player {
  width: 300px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50px;
  }

#cboxContent {

  }
</style>
</head>


<body>
  <div id="wrapper">
    <a class="playBtn" href="#">
      Show player
    </a>
   
    <div id="hidden">
      <div id="playerWrap">
        <div id="player">
          Foo Bar 
        </div> 
      </div>
    </div>
  </div>

</body>

</html>
