{if $mode =='show_settings'}
<h2>ClipBucket Website Player Settings</h2>
<p></p>

<div class="controller scrolltoFixed white-grad">
    <div class="buttons">
        <div class="right-button">
            <a href="#" onclick="$('#do-action').attr('name','update'); $('#player_settings').submit(); return false;" class="btn btn-primary">Save</a>
        </div>
    </div>
</div>

<form action="manage_players.php?mode=show_settings" method="post" enctype="multipart/form-data" name="player_settings" id="player_settings" class="form-horizontal">
    <input type="hidden" name="" value="do" id="do-action" />
    <div class="control-group">
        <label class="control-label" for="pak_license">Pakplaye License</label>
        <div class="controls">
            <input type="text" name="pak_license" id="pak_license" value="{$row.pak_license}" class="input-xlarge" />
            <p class="help-block">If you have pakplayer license, please enter it here</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="autoplay_video_0">Autoplay</label>
        <div class="controls">
            <label class="radio inline"><input type="radio" name="autoplay_video" value="yes" id="autoplay_video_0" {if $row.autoplay_video=='yes'} checked="checked"{/if}  /> Yes</label>
            <label class="radio inline"><input type="radio" name="autoplay_video" value="no" id="autoplay_video_1" {if $row.autoplay_video=='no'} checked="checked"{/if}  /> No</label>
            <p class="help-block">If yes, all videos will be played automatically</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="use_playlist_0">Use Playlist</label>
        <div class="controls">
            <label class="radio inline"><input type="radio" name="use_playlist" value="yes" id="use_playlist_0" {if $row.use_playlist=='yes'} checked="checked"{/if}  /> Yes</label>
            <label class="radio inline"><input type="radio" name="use_playlist" value="no" id="use_playlist_1" {if $row.use_playlist=='no'} checked="checked"{/if}  /> No</label>
            <p class="help-block">By turning this on, player will turn on playlists feature in player (if available)</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="logo_file">Logo File</label>
        <div class="controls">
            <p><img src="{website_logo}" /></p>
            <input type="file" name="logo_file" id="logo_file" />
            <p class="help-block">Logo file that will display on your flash player</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="logo_placement">Logo Placement</label>
        <div class="controls">
            <select name="logo_placement" id="logo_placement" class="input-xlarge">
                <option value="tl" {if $row.logo_placement=='tl'} selected="selected"{/if}>Top Left</option>
                <option value="tr" {if $row.logo_placement=='tr'} selected="selected"{/if}>Top Right</option>
                <option value="br" {if $row.logo_placement=='br'} selected="selected"{/if}>Bottom Right</option>
                <option value="bl" {if $row.logo_placement=='bl'} selected="selected"{/if}>Bottom Left</option>
            </select>
            <p class="help-block">Placement of logo</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="logo_padding">Logo Padding</label>
        <div class="controls">
            <input type="text" id="logo_padding" name="logo_padding" value="{$row.logo_padding}" class="input-xlarge" />
            <p class="help-block">Set logo padding in pixels</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="buffer_time">Buffer Time</label>
        <div class="controls">
            <input type="text" id="buffer_time" name="buffer_time" value="{$row.buffer_time}" class="input-xlarge" />
            <p class="help-block">To control the buffer seconds</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="youtube_enabled_0">Play Youtube Video Inside Player</label>
        <div class="controls">
            <label class="radio inline"><input type="radio" name="youtube_enabled" value="yes" id="youtube_enabled_0" {if $row.youtube_enabled=='yes'} checked="checked"{/if}  /> Yes</label>
            <label class="radio inline"><input type="radio" name="youtube_enabled" value="no" id="youtube_enabled_1" {if $row.youtube_enabled=='no'} checked="checked"{/if}  /> No</label>
            <p class="help-block">This will let you play youtube videos in your player</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="embed_player_width">Embed Player Width</label>
        <div class="controls">
            <input type="text" id="embed_player_width" name="embed_player_width" value="{$row.embed_player_width}" class="input-xlarge" />
            <p class="help-block">Enter embedable player width in pixels</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="embed_player_height">Embed Player Height</label>
        <div class="controls">
            <input type="text" id="embed_player_height" name="embed_player_height" value="{$row.embed_player_height}" class="input-xlarge" />
            <p class="help-block">Enter embedable player height in pixels</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="autoplay_embed0">Autoplay Embed</label>
        <div class="controls">
            <label class="radio inline"><input type="radio" name="autoplay_embed" value="yes" id="autoplay_embed0" {if $row.autoplay_embed=='yes'} checked="checked"{/if}  /> Yes</label>
            <label class="radio inline"><input type="radio" name="autoplay_embed" value="no" id="autoplay_embed1" {if $row.autoplay_embed=='no'} checked="checked"{/if}  /> No</label>
            <p class="help-block">Autoplay embeded video by default</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="pseudostreaming_0">Use PseudoStreaming</label>
        <div class="controls">
            <label class="radio inline"><input type="radio" name="pseudostreaming" value="yes" id="pseudostreaming_0" {if $row.pseudostreaming=='yes'} checked="checked"{/if}  /> Yes</label>
            <label class="radio inline"><input type="radio" name="pseudostreaming" value="no" id="pseudostreaming_1" {if $row.pseudostreaming=='no'} checked="checked"{/if}  /> No</label>
            <p class="help-block">Let users to play video from anywhere, requires h264 streaming module from webserver</p>
        </div>
    </div>
    
    <div class="control-group">
        <label class="control-label" for="pakplayer_contextmsg">Pakplayer Context Menu</label>
        <div class="controls">
            <input type="text" name="pakplayer_contextmsg" id="pakplayer_contextmsg" value="{$row.pakplayer_contextmsg}" class="input-xlarge" />
            <p class="help-block">Write what you want to display when user right clicks on pakplayer (only if have pakplayer license)</p>
        </div>
    </div>
</form>

{literal}
<style type="text/css">

#resizable-channel,#resizable{{/literal}background-image:url({$imageurl}/play_icon.png);  background-repeat:no-repeat; background-position:center{literal}}

</style>
<script type="text/javascript">
	function update_player_size(width,height,normal_player,channel_player)
	{
		var page = baseurl+'/actions/update_configs.php';
		$.post(page, 
		{ 	
			width : width,
			height : height,
			update_player_size : normal_player,
			update_channel_player_size:channel_player
		},
		function(data)
		{
			if(!data)
				alert("No data");
			else 
				$("#msg_box").html(data).show();
		},'text');
	
	}
	
	$(function() {
		$("#resizable").resizable({
			maxHeight: 800,
			maxWidth: 800,
			minHeight: 100,
			minWidth: 100,
			grid: 10,
			resize:function(event,ui){$("#width").val(ui.size.width);$("#height").val(ui.size.height);},
			stop:function(event,ui){update_player_size(ui.size.width,ui.size.height,'yes','')}
		});
		
		 $("#width").change(function () {$('#resizable').css("width",this.value+'px') ; update_player_size(this.value,$("#height").val(),'yes','') });
		 $("#height").change(function () {$('#resizable').css("height",this.value+'px');  update_player_size($("#width").val(),this.value,'yes','')  });
	});
	
	
	$(function() {
		$("#resizable-channel").resizable({
			maxHeight: 800,
			maxWidth: 800,
			minHeight: 100,
			minWidth: 100,
			grid: 10,
			resize:function(event,ui){$("#channel_width").val(ui.size.width);$("#channel_height").val(ui.size.height);},
			stop:function(event,ui){update_player_size(ui.size.width,ui.size.height,'','yes')}
		});
		
		 $("#channel_width").change(function () {$('#resizable-channel').css("width",this.value+'px') ; update_player_size(this.value,$("#channel_height").val(),'','yes') });
		 $("#channel_height").change(function () {$('#resizable-channel').css("height",this.value+'px');  update_player_size($("#channel_width").val(),this.value,'','yes')  });
	});
	</script>
{/literal}
<div class="height20"></div>
<div id="msg_box" class="alert alert-info display-none"></div>
<fieldset>
    <legend>Main website player size <button type="button" class="btn btn-mini" data-toggle="collapse" data-target="#main_player_size_body">Open</button></legend>
    <div id="main_player_size_body" class="collapse">
        <div class="height10"></div>
        <p>In order to change player size, resize the box given below or enter values in below given fields.</p>
        <div id="website_player" style="width:100%; margin:auto">
            <div id="resizable" class="ui-widget-content" style="width:{$Cbucket->configs.player_width}px; height:{$Cbucket->configs.player_height}px; margin:auto">
                <h3 class="ui-widget-header">Website Player</h3>
            </div>
            <div class="form-actions">
                <div class="form-horizontal">
                    <div class="control-group">
                        <label for="width" class="control-label">Width</label>
                        <div class="controls">
                            <input type="text" name="width" id="width" value="{$Cbucket->configs.player_width}" />
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label for="height" class="control-label">Height</label>
                        <div class="controls">
                            <input type="text" name="height" id="height" value="{$Cbucket->configs.player_height}" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>
<div class="height20"></div>

<fieldset>
    <legend>Channel player size <button type="button" class="btn btn-mini" data-toggle="collapse" data-target="#channel_player_size_body">Open</button></legend>
    <div class="height10"></div>
    <div id="channel_player_size_body" class="collapse">
        <p>In order to change player size, resize the box given below or enter values in below given fields.</p>
        <div id="channel_player" style="width:100%; margin:auto">
            <div id="resizable-channel" class="ui-widget-content" style="width:{$Cbucket->configs.channel_player_width}px; height:{$Cbucket->configs.channel_player_height}px; margin:auto">
                <h3 class="ui-widget-header">Channel Player</h3>
            </div>
            <div class="form-actions">
                <div class="form-horizontal">
                    <div class="control-group">
                        <label for="width" class="control-label">Width</label>
                        <div class="controls">
                            <input type="text" name="channel_width" id="channel_width" value="{$Cbucket->configs.channel_player_width}" />
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label for="height" class="control-label">Height</label>
                        <div class="controls">
                            <input type="text" name="height" id="channel_height" value="{$Cbucket->configs.channel_player_height}" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</fieldset>



{else}

<h2>Manage Players</h2>
<p></p>
{assign var="player_dir" value=$Cbucket->configs.player_dir}
{assign var="player_file" value=$Cbucket->configs.player_file}
{assign var="curplayer" value=$cbplayer->getPlayerDetails($player_file,$player_dir)}

<div class="manager-list">
    <fieldset>
        <legend>Current Player</legend>
        <div class="height20"></div>
        <div class="span3" style="margin-left:0px;">
            <img src="{$cbplayer->get_preview_thumb($curplayer.folder)}" class="thumbnail width240" />
        </div>
        <div id="current_player_details">
            <h3 class="template_name">{$curplayer.name}</h3>
            <p>By {if $curplayer.author_page != ''}<a href="{$curplayer.author_page}">{/if}<strong>{$curplayer.author}</strong>{if $curplayer.author_page != ''}</a>{/if}{if $curplayer.released}, Released on {$curplayer.released|date_format}{/if}</p>
            <p>{$curplayer.description}</p>
            <p>Version: {$curplayer.version} | Website: <a href="{$curplayer.website}">{$curplayer.website}</a></p>
        </div>
    </fieldset>
</div>
<div class="height20 clear"></div>
{* Listing All Avilable Players *}
{assign var='players' value=$cbplayer->get_players()}
{if $players}
<form name="player_manager" id="player_manager" method="post" action="">
    <fieldset>
        <legend>Available Players</legend>
        <div class="height20"></div>
        <div class="row show-grid list-block table">
            <input type="hidden" name="" value="do" id="do-action" />
            {foreach $players as $player}
                {if $player_file !=$player.file && $player_dir != $player.folder}
                    <div class="span3 thumbnail marginB20 relative">
                        <img src="{$cbplayer->get_preview_thumb($player.folder)}" class="width270" />
                        <div class="caption">
                                <h4>{$player.name}</h4>
                                <div class="font_12 clearfix marginT5">
                                    By {$player.author}
                                    <div class="btn-group pull-right">
                                        <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#">Options <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="manage_players.php?set=yes&folder={$player.folder}&file={$player.file}">Activate</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="font_12 clearfix marginT10 display-none" id="{$player@iteration}{$player@index}_details">
                                    <p class="font_12"><strong>Version: </strong>{$player.version}</p>
                                    <p class="font_12">{$player.description}</p>
                                </div>
                            </div>
                    </div>
                {/if}
            {/foreach}
        </div>
    </fieldset>
</form>
{/if}

{/if}