{header}
<div class="block_narrow">
    {menu_page}
</div>

<!-- begin_edge_style -->
<style>
    .hide_edge{
        display: none;
    }
</style>
<!-- end_edge_style -->

<script Language="JavaScript" type="text/javascript">

$(document).ready(function(){
    $("#place_edit_form").validate({
        rules: {
            song_title: "required",
            song_about: "required"
        },
        messages: {
        	song_title: "{j_please_specify_title}",
        	song_about: "{j_please_enter_text}"
        }
    })
});

</script>

<script type="text/javascript" src="{url_main}_server/swfobject/swfobject.js{cache_version_param}"></script>

<div class="block_main">
    <h2>{l_title_current}{song_title_header}</h2>

    <div class="bl_form">

        <form method="POST" id="place_edit_form" action="{url_main}administration/music_song_edit.php?cmd=update&song_id={song_id}">

        <label>{l_listen_song}:</label>

        <audio class="player_audio" src="{song_url}" controls></audio>

        <label>{l_song_title}:</label>
        <input type="text" name="song_title" value="{song_title}">

        <label class="hide_edge">{l_song_year}:</label>
        <select class="input hide_edge" name="song_year" id="song_year">
        {song_year_options}
        </select>

        <label class="hide_edge">{l_song_about}:</label>
        <textarea name="song_about" id="song_about" class="textarea_small hide_edge">{song_about}</textarea>

        <div style="height:20px"></div>

        <h2>{l_edit_photos}</h2>

<div style="width: 100%;  height: 180px;">
        <!-- begin_photo_edit -->

<script type="text/javascript">

$(document).ready(function() {
    create_gallery()
});

function create_gallery()
{
    $('.edit_image_gallery').lightBox({
        imageLoading:           '{url_tmpl_administration}images/lightbox-ico-loading.gif',
        imageBtnPrev:           '{url_tmpl_administration}images/lightbox-btn-prev.gif',
        imageBtnNext:           '{url_tmpl_administration}images/lightbox-btn-next.gif',
        imageBtnClose:          '{url_tmpl_administration}images/lightbox-btn-close.gif',
        imageBlank:             '{url_tmpl_administration}images/lightbox-blank.gif'
        });
}

function edit_delete_image(image_id)
{
    if(confirm('{l_this_action}'))
    {
        $('#edit_image_' + image_id).fadeOut(400, function() {
            $('#edit_image_' + image_id).remove();
            create_gallery();
            $.ajax({
                    type: 'POST',
                    url: '{url_main}administration/music_song_image_delete_ajax.php',
                    data: {
                        image_id: image_id
                        }
                  });
            });
    }
}

</script>

            <!-- begin_photo-->
            <div style="width:24%;float: left;" id="edit_image_{image_id}">
                <a class="edit_image_gallery" href="{image_file}"><img src="{image_thumbnail}"></a>
                <p><a style="cursor: pointer;" onClick="return edit_delete_image({image_id});">{l_delete}</a></p>
                <!-- begin_photo_odd-->
                <!-- end_photo_odd-->
                <!-- begin_photo_even-->
                <!-- end_photo_even-->
                <div style="height:15px"></div>
            </div>
            <!-- end_photo-->
        <!-- end_photo_edit -->
        </div>

        <div class="clear" style="height:20px"></div>

        <div class="wrap_button fl_right">
            <button class="button submit" type="submit">{l_save_changes}</button>
            <div class="button_submit_instruction">{l_or_use_ctrl_s}</div>
        </div>
        </form>
    </div>

    <div class="empty"></div>
</div>
{footer}