function showFotobabble (divId, fotobabbleId, autoPlay, baseUrl) {
    showFotobabbleSized(divId, fotobabbleId, "", autoPlay, baseUrl, 400, 600);
}

function showFotobabbleSized (divId, fotobabbleId, title, autoPlay, baseUrl, h, w) {
    showFotobabbleSizedNamedPlayer(divId, fotobabbleId, title, autoPlay, baseUrl, h, w, "default");

}

function showFotobabbleSizedNamedPlayer (divId, fotobabbleId, title, autoPlay, baseUrl, h, w, layout) {
    showFotobabbleSizedNamedPlayer(divId, fotobabbleId, title, autoPlay, baseUrl, h, w, loyout, "large");
}

function showFotobabbleSizedNamedPlayer (divId, fotobabbleId, title, autoPlay, baseUrl, h, w, layout, size) {
// This method displays the fotobabble identified by fotobabbleId, in the div with id divId.
// Parameters:
// divId - the id of the div to display the fotlocalhostobabble in
// fotobabbleId - the id of the fotobabble to display
// autoPlay - true if the fotobabble should play immediately, false if the user should click to play
    if ((layout == null) || (layout == '')  || (layout == "null")) {
        layout = "default";
    }

    if (layout != 'default') {
        title = ''
    }

    document.getElementById(divId).innerHTML = '<h1 class="babbleTitle">'+title+'</h1><br/>'
                               + '<object width="'+w+'" height="'+h+'"> '
				               +'<param name="movie" value="'+baseUrl+'/mediafiles/templates/basicslideshow/fb.swf?v=2"></param>'
				               +'<param name="allowFullScreen" value="true"></param>'
                                +'<param name="bgcolor" value="#000000"></param>'                                                    
                                +'<param name="wmode" value="transparent"></param>'                                                    
				               +'<param name="allowscriptaccess" value="always"></param>'
				               +'<param name="FlashVars" value="autoPlay=' + autoPlay + '&remoteXML=true&appURL='+baseUrl+'&id='+fotobabbleId+'&size'+size+'&increment=true&layout='+layout+'"/>'
				               +'<PARAM NAME=BASE VALUE="'+baseUrl+'"/>'
				               +'<embed src="'+baseUrl+'/mediafiles/templates/basicslideshow/fb.swf?v=2"'
				               +'  type="application/x-shockwave-flash"'
				               + ' FlashVars="autoPlay=' + autoPlay + '&remoteXML=true&appURL='+baseUrl+'&id='+fotobabbleId+'&size='+size+'&increment=true&layout='+layout+'"'
				               + ' BASE="'+baseUrl+'"'
				               +'  allowscriptaccess="always" wmode="transparent" bgcolor="#000000"'
				               +'  allowfullscreen="true"'
				               +'  width="'+w+'"'
				               +'  height="'+h+'"></embed>'
				               +'</object>'
  }

function showFotobabbleHTML5Player1 (divId, imageUrl, title, mp3Url, layout, backgroundImageUrl) {
// This method displays the fotobabble identified by fotobabbleId, in the div with id divId.
// Parameters:
// divId - the id of the div to display the fotlocalhostobabble in
// fotobabbleId - the id of the fotobabble to display
// autoPlay - true if the fotobabble should play immediately, false if the user should click to play

    document.getElementById(divId).innerHTML = '<h1 class="babbleTitle">'+title+'</h1><br/>'
		+ '<div class="fotobabble" >'
		+ '<p id="foto" onClick="playClicked(this);">'
        + '<img id="html5Image" src="'+imageUrl+'"><span id="bttnPlayFb" ></span></p>'
	    + '<div id="radplayer"><div id="duration" class="player_control" ><div id="duration_background"  onClick="durationClicked(event);" ><div id="duration_bar" class="duration_bar"></div></div></div>'
        + '<div id="volume_control" class="player_control" onClick="volumeChangeClicked(event);"><div id="volume_background"  ><div id="volume_bar"></div></div></div><input type="button" class="player_control"  id="volume_button" onClick="volumeClicked();" value="Vol"></div>'
        + '<audio id="aplayer" src="'+mp3Url+'" onTimeUpdate="timeUpdate();" onEnded="trackEnded();" ><b>Your browser does not support the <code>audio</code> element. </b></audio>'
        + '<img src="../images/big-play.png" id="bigPlay">'
        + '<img src="../images/big-pause.png" id="bigPause">'
        + '<br clear="left">'
         + '</div>'

 setupButtonAndProgressBar();
  }

function showFotobabbleHTML5Player(divId, imageUrl, title, mp3Url, layout, backgroundImageUrl) {
// This method displays the fotobabble identified by fotobabbleId, in the div with id divId.
// Parameters:
// divId - the id of the div to display the fotlocalhostobabble in
// fotobabbleId - the id of the fotobabble to display
// autoPlay - true if the fotobabble should play immediately, false if the user should click to play

    var playerHTML = '';


    if (layout == 'default') {
		playerHTML = playerHTML
        +'<h1 class="babbleTitle">'+title+'</h1><br/>'
		+ '<div class="fotobabble" >'
        + '<p id="foto" onClick="playClicked(this);">'
        + '<img id="html5Image" src="'+imageUrl+'"><span id="bttnPlayFb" ></span></p>';
    } else {
        playerHTML = playerHTML
        +'<h1 class="babbleTitle"></h1><br/>'
        + '<div class="fotobabble" >'
        +'<div id=\"themeWrapper\" style=\"background:url('+backgroundImageUrl+') top left no-repeat\" />'
        + '<p id="foto" onClick="playClicked(this);">'
        +  '<span id="themeTitle">'+title+'</span><img id="html5ThemeImage" src="'+imageUrl+'"/><span id="bttnPlayFb" ></span></p>';
    }

        playerHTML = playerHTML
	    + '<div id="radplayer"><div id="duration" class="player_control" ><div id="duration_background"  onClick="durationClicked(event);" ><div id="duration_bar" class="duration_bar"></div></div></div>'
        + '<div id="volume_control" class="player_control" onClick="volumeChangeClicked(event);"><div id="volume_background"  ><div id="volume_bar"></div></div></div><input type="button" class="player_control"  id="volume_button" onClick="volumeClicked();" value="Vol"></div>'
        + '<audio id="aplayer" src="'+mp3Url+'" onTimeUpdate="timeUpdate();" onEnded="trackEnded();" ><b>Your browser does not support the <code>audio</code> element. </b></audio>'
        + '<img src="../images/big-play.png" id="bigPlay">'
        + '<img src="../images/big-pause.png" id="bigPause">'
        + '<br clear="left">'
         + '</div>';
    document.getElementById(divId).innerHTML = playerHTML;

    setupButtonAndProgressBar();
  }


function showFotobabbleNoAudio(divId, imageUrl, title, mp3Url, layout, backgroundImageUrl) {
// This method displays the fotobabble identified by fotobabbleId, in the div with id divId.
// Parameters:
// divId - the id of the div to display the fotlocalhostobabble in
// fotobabbleId - the id of the fotobabble to display
// autoPlay - true if the fotobabble should play immediately, false if the user should click to play

    var playerHTML = '';
		playerHTML = playerHTML
		+ '<div class="fotobabble" >'
        + '<p id="foto">'
        + '<img id="html5Image" src="'+imageUrl+'"></p>';
        + '</div>'
        +'<h1 class="babbleTitle">'+title+'</h1><br/>'
            ;


    document.getElementById(divId).innerHTML = playerHTML;

    //setupButtonAndProgressBar();
  }



function editFotobabble (divId, fotobabbleId, env) {

}

function showFotobabbleSlideshow (divId, username, tag) {
}



function openOverlay(overlay, modal) {
    Effect.Appear(overlay, {duration:0.1});
    if (modal) {
        Effect.Appear('overlayBackground', {duration:0.1});

    }
}

function closeOverlay(overlay, modal) {
    Effect.Fade(overlay, {duration:0.1});
    if (modal) {
        Effect.Fade('overlayBackground', {duration:0.1});
    }
}