/*

 SoundManager 2: "page as playlist" example
 ------------------------------------------

 Clicks on links to MP3s are intercepted via JS, calls are
 made to SoundManager to load/play sounds. CSS classes are
 appended to the LI parent, which are used to highlight the
 current play state and so on.

 Class names are applied in addition to "sm2_link" base.

 Default:

 sm2_link

 Additional states:

 sm2_playing
 sm2_paused

 eg.

 <!-- default -->
 <li class="sm2_link"><a href="some.mp3">some.mp3</a></li>

 <!-- playing -->
 <li class="sm2_link sm2_playing"><a href="some.mp3">some.mp3</a></li>

 The script also injects an HTML template containing control bar
 and timing elements, which can also be targeted with CSS.


 Note you don't necessarily require ul.playlist for your use
 if only using one style on a page. You can just use .sm2_link
 and so on, but isolate the CSS you want.

 Side note: Would do multiple class definitions eg.

 li.sm2_default.sm2_playing{}

 .. except IE 6 has a parsing bug which may break behaviour,
 applying sm2_playing {} even when the class is set to sm2_default.


 If you want to make your own UI from scratch, here is the base:

 Default + hover state, "click to play":

 li.sm2_link {}
`li.sm2_link:hover {}

 Playing + hover state, "click to pause":

 li.sm2_playing {}
 li.sm2_playing:hover {}

 Paused + hover state, "click to resume":

 li.sm2_paused {}
 li.sm2_paused:hover {}

*/


/* background-image-based CSS3 example */

ul.playlist {
 list-style-type:none;
 margin:0px;
 padding:0px;
}

ul.playlist li {
 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 position:relative;
 display:block;
 width:auto;
 font-size:2em;
 color:#666;
 padding:0.25em 0.5em 0.25em 0.5em;
 border:none;
 background:transparent;
 background-image:url('play.gif');
 background-repeat:no-repeat;
 background-position:3px 6px;
 -webkit-transition-property: hover;
 -webkit-transition: background-color 0.15s ease-in-out;
}

ul.playlist li a {
 margin-left:10px;
 text-transform:uppercase;
 display:block;
 text-decoration:none;
 font-weight:normal;
 color:#9A0000;
 font-size:13pt;
 outline:none;
 position:relative;
 z-index:2;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused,
ul.playlist li.sm2_playing a {
 color:#fff;
 border-radius:3px;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
}

ul.playlist li:hover {
 background-color:#1E1E1E;
}

ul.playlist li:hover a {
 color:#9A0000;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_playing:hover,
ul.playlist li.sm2_paused {
 background:#1E1E1E;
}


ul.playlist li.sm2_playing:hover a,
ul.playlist li.sm2_playing a,
ul.playlist li.sm2_paused a {
 margin-left:15px;
 color:#9A0000;
}

ul.playlist li.sm2_playing, ul.playlist li.sm2_playing:hover{
 background-image:url('pause.gif');
 background-repeat:no-repeat;
 background-position:10px 10px;
}

ul.playlist li.sm2_paused, ul.playlist li.sm2_paused:hover{
 background-image:url('play.gif');
 background-repeat:no-repeat;
 background-position:3px 6px;
}


ul.playlist li .controls {
 display:none;
}

ul.playlist li.sm2_playing .controls,
ul.playlist li.sm2_paused .controls {
 position:relative;
 display:block;
}

ul.playlist li:hover .controls .statusbar {
 background:#5588bb;
}

ul.playlist li .controls {
 position:relative;
 margin-top:0.25em;
 margin-bottom:0.25em;
 background:#99ccff;
}

ul.playlist li .controls .statusbar {
 position:relative;
 height:0.5em;
 background:#ccddff;
 border:2px solid #fff;
 border-radius:2px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 overflow:hidden;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading {
 position:absolute;
 left:0px;
 top:0px;
 height:0.5em;
}

ul.playlist li .controls .statusbar .position {
 background-color:#9A0000;
 border-right:3px solid #9A0000;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

ul.playlist li .controls .statusbar .loading {
 background:#bbb;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading {
 width:0px;
}

ul.playlist li .timing {
 position:absolute;
 display:none;
 text-align:right;
 right:5px;
 top:5px;
 width:auto;
 height:1em;
 padding:4px 5px 3px 5px;
 background:#transparent;
 color:#999999;
 letter-spacing:0px;
 font:small normal "lucida console",monaco,courier,terminal,system;
 line-height:1em;
}

ul.playlist li:hover .timing {
 z-index:2;
}

ul.playlist li .timing div.sm2_timing {
 margin:0px;
 padding:0px;
 margin-top:-1em;
}

ul.playlist li.sm2_playing .timing,
ul.playlist li.sm2_paused .timing {
 display:block;
}

#control-template {
 display:none;
}