Not sure how I solved it, but here is the final code that actually works:
HTML PAGE:
<script type= text/javascript >
var so = new SWFObject( /UI/Flash/player.swf , ply , 700 , 345 , 9 , #ffffff ),
playlistUrl = XML-PLaylist ,
imageURL = /ImageVault/Images/conversionFormat_2/id_1577/scope_0/ImageVaultHandler.aspx ;
so.addParam( allowfullscreen , true );
so.addParam( allowscriptaccess , always );
so.addParam( wmode , opaque );
if (playlistUrl !== ) {
so.addVariable( playlistfile , playlistUrl);
so.addVariable( playlist , none );
so.addVariable( controlbar , bottom );
so.addVariable( backcolor , 0xDDE5FF );
so.addVariable( frontcolor , 0x142864 );
so.addVariable( screencolor , 0xffffff );
so.addVariable( enablejs , true );
so.addVariable( overstretch , true );
}
else {
so.addVariable( file , );
}
if (imageURL.length > 0) {
so.addVariable( image , imageURL);
}
so.write( preview );
</script>
And here s the JavaScript:
try {
var playlistReady = playerReady;
} cat
ch (err) {
//alert( 1 + err);
}
playerReady = function(obj) {
setTimeout(function() { checkPlaylistLoaded(obj) }, 1);
try {
playlistReady(obj);
} catch (err) {
//alert(err);
}
}
function itemHandler(obj) {
var item = obj[ index ];
var playlist = $("#" + obj[ id ]).next();
var currentItem = 0;
playlist.children().each(function() {
if (currentItem == item) {
$(this).addClass("playing");
} else {
$(this).removeClass("playing");
}
currentItem++;
});
}
function checkPlaylistLoaded(obj) {
//debugger;
var player = document.getElementById(obj[ id ]),
jsPlaylist = player.getPlaylist();
if (jsPlaylist.length > 0) {
var playlist = createPlaylist(obj);
populatePlaylist(player, jsPlaylist, playlist);
player.addControllerListener("PLAYLIST", "playlistHandler");
player.addControllerListener("ITEM", "itemHandler");
player.addControllerListener("STOP", "showPlaylist");
player.addModelListener("STATE", "stateListener");
} else {
setTimeout(function() { checkPlaylistLoaded(obj) }, 150);
}
}
function stateListener(obj) {
if (obj.newstate === PLAYING ) {
hidePlaylist();
}
if (obj.newstate === PAUSED ) {
showPlaylist();
}
}
function createPlaylist(obj) {
var playerDiv = $("#" + obj[ id ]);
playerDiv.after("<div class= jw_playlist_playlist ></div>");
return playerDiv.next();
}
function hidePlaylist() {
$( .jw_playlist_playlist ).animate({ left: "-320px" }, 1000);
}
function showPlaylist() {
$( .jw_playlist_playlist ).animate({ left: "-10px" }, 1000);
}
function playlistHandler(obj) {
var player = document.getElementById(obj[ id ]),
jsPlaylist = player.getPlaylist(),
playerDiv = $("#" + obj[ id ]),
playlist = playerDiv.next();
populatePlaylist(player, jsPlaylist, playlist);
}
function populatePlaylist(player, jsPlaylist, playlist) {
playlist.empty();
for (var i = 0; i < jsPlaylist.length; i++) {
var jsItem = jsPlaylist[i];
var alternate = "even";
if (i % 2) {
alternate = "odd";
}
playlist.append("<div id= " + getItemId(jsItem) + " class= jw_playlist_item " + alternate + " >" + dump(jsItem) + "</div>");
}
var playlistItem = 0;
playlist.children().each(function() {
var currentItem = playlistItem;
$(this).click(function() {
player.sendEvent("ITEM", currentItem);
});
playlistItem++;
});
}
function getItemId(arr) {
var output = ${link} ,
variables = getVars(output),
j;
for (j = 0; j < variables.length; j++) {
var variable = variables[j],
varName = variable.replace( ${ , ).replace( } , ),
value = arr[varName];
if (!value) {
value = ;
}
output = output.replace(variable, value);
}
return output;
}
function dump(arr) {
var output = "<div class= jw_playlist_title >${title}</div><div class= jw_playlist_description >${description}</div>",
variables = getVars(output),
j;
for (j = 0; j < variables.length; j++) {
var variable = variables[j],
varName = variable.replace( ${ , ).replace( } , ),
value = arr[varName];
if (!value) {
value = ;
}
output = output.replace(variable, value);
}
return output;
}
function dumpText(arr) {
var dumped_text = "";
if (typeof (arr) == object ) {
for (var item in arr) {
var value = arr[item];
if (typeof (value) == object ) {
dumped_text += "<div class= " + item + " >";
dumped_text += dump(value);
dumped_text += "</div>";
} else {
dumped_text += "<div class= " + item + " >" + value + "</div>";
}
}
} else {
dumped_text += arr + " (" + typeof (arr) + ")";
}
return dumped_text;
}
function getVars(str) {
return str.match(/${(.*?)}/g);
}