
{% extends 'noel/staticpage.html' %}

{% load thumbnail %}
{% block extra_head %}
    {{ block.super }}
    <script src="/static/js/upload/chunkupload.js"></script>
    <script src="/static/js/upload/itfUpload.js"></script>
    <script>
GALLERY_ID = {{ gallery.id }};
$(function() {
    $('#uploadImages').uploadQueue({'addURL': '/mediagallery/upload/', 'id': GALLERY_ID });
    //var itfQ = ItfUploadQueue({'addURL': '/mediagallery/upload/'}, $('#uploadImages'));

    $('#uploadImages').delegate(".deleteItem", "click", function(e) {
        if (!confirm("Are you sure you wish to delete this image?")) {
            return false;
        }
        var $this = $(e.target);
        //console.log($this);
        var id = $this.parents('.photoContainer').find('.photoId').val();
        var url = "/mediagallery/delete_photo/" + id;

        $.get(url, {}, function(response) {
            //alert("hi");
        });
        $this.parents('.photoContainer').fadeOut(); 
    });

    $('#youtubeVideos').delegate(".deleteVideo", "click", function(e) {
        if (!confirm("Are you sure you wish to delete this video?")) {
            return false;
        }
        var $this = $(e.target);
        var id = $this.closest('li').attr("data-id");
        var url = "/mediagallery/delete_youtube/" + id;
        $.get(url, {}, function(response) {
            
        });
        $this.closest('li').fadeOut();
    });

    $('#links').delegate(".deleteLink", "click", function(e) {
        if (!confirm("Are you sure you wish to delete this link?")) {
            return false;
        }
        var $this = $(e.target);
        //console.log($this.closest('li'));
        var id = $this.closest('li').attr("data-id");
        var url = "/mediagallery/delete_link/" + id;
        $.get(url, {}, function(response) {
            
        });
        $this.closest('li').fadeOut();
    });


    $('#uploadImages').delegate(".photoTitle", "blur", function(e) {
        var $this = $(e.target);
        //alert($this.val());
        var title = $this.val();
        var id = $this.parents('.photoContainer').find('.photoId').val();
        var url = "/mediagallery/edit_photo/" + id;
        $.get(url, {'title': title}, function(response) {

        });
    });

    $('.galleryTitle').blur(function() {
        var title = $(this).val();
        var url = "/mediagallery/edit_title/" + GALLERY_ID;
        $.get(url, {'title': title}, function(response) {
            
        });
    });

    $('#addYoutubeVideo').click(function(e) {
        e.preventDefault();
        var yt_url = $.trim($('#youtubeURL').val());
        if (yt_url.indexOf("http://youtu.be") == -1) {
            alert("please enter a valid youtube share link");
            return;
        }
        var $this = $(this);
        $this.attr("disabled", "disabled");
        $this.text("Adding...");
        var url = "/mediagallery/add_youtube/" + GALLERY_ID;
        $.get(url, {'url': yt_url}, function(data) {
            $('#youtubeURL').val('');
            $this.removeAttr("disabled");
            $this.text("Add");
            var $ul = $('#youtubeVideos');
            var $li = $('<li />')
                .attr("data-id", data.id)
                .appendTo($ul);
            var $img = $('<img />').attr("src", data.thumbnail).appendTo($li);
            var $title = $('<div />').addClass("videoTitle").text(data.title).appendTo($li);
            var $delete = $('<span />')
                .addClass("deleteVideo")
                .text("X")
                .appendTo($li);  
        }, "json");
    });
    
    $('#addLink').click(function(e) {
        e.preventDefault();
        var linkURL = $.trim($('#linkURL').val());
        if (linkURL === '') {
            alert("please enter a link");
            return;
        }
        var $this = $(this);
        $this.attr("disabled", "disabled");
        var title = prompt("Please enter a title for the link");
        var url = "/mediagallery/add_link/" + GALLERY_ID;
        $.get(url, {'url': linkURL, 'title': title}, function(data) {
            $('#linkURL').val('');
            console.log(data);
            $this.removeAttr("disabled");
            var $ul = $('#links');
            var $li = $('<li />')
                .attr("data-id", data.id)
                .appendTo($ul);
            var $title = $('<div />').addClass("linkTitle").text(data.title).appendTo($li);
            var $url = $('<a />').attr("href", data.url).text(data.url).appendTo($li);
            var $delete = $('<span />')
                .addClass("deleteLink")
                .text("X")
                .appendTo($li);  
        }, "json");        
    });

});


    </script>
    <style>
#uploadImages {
    min-width: 400px;
    min-height: 300px;
    max-width: 50%;
    padding: 10px;
}

.progressBar {
    height: 10px;
    background: #00f;
}

.deleteItem, .deleteLink {
    font-weight: bold;
    cursor: pointer;
    vertical-align: top;

}

.deleteItem {
    padding-top: 6px;
    display: inline-block;
}

.closinglightbox {
    padding: 10px;
}

.section {
    margin-bottom: 18px;
}

.section h3 {
    font-size: 18px;
    text-align: center;
    font-weight: bold;
}
    </style>
{% endblock %}

{% block main_content %}
    <h1 class="lightboxHeading inlineBlock">Gallery Title:</h1> <input class="galleryTitle" value="{{ gallery.title }}" />

    <div id="uploadImages" class="section">
        <h3 class="orange inlineBlock">Upload Images</h3>
        <input type="file" id="uploadImageFiles" multiple />
        
        <ul id="photosContainer">
            {% for photo in photos %}
            <li class="photoContainer">
                {% if photo.image %}
                    {% thumbnail photo.image "100x100" crop="center" as thumb %}
                    <img src="{{ thumb.url }}" />
                    {% endthumbnail %}
                {% endif %}
                <input class="photoTitle" value="{{ photo.title }}" />
                <span class="deleteItem">X</span>
                <input type="hidden" class="photoId" value="{{ photo.id }}" />
            </li>
            {% endfor %}
        </ul>
    </div>

    <div id="addVideos" class="section">
        <h3 class="orange inlineBlock">Add Youtube Videos</h3>
        <div id="addYoutubeVideos">
            Youtube Share Link: <input type="text" id="youtubeURL" placeholder="eg. http://youtu.be/Wo_mFYW-jLU" />
            <button id="addYoutubeVideo">Add</button>

            <ul id="youtubeVideos">
                {% for vid in youtube_videos %}
                <li data-id="{{ vid.id }}">
                    <img src="{{ vid.thumbnail }}" />
                    <div class="videoTitle">{{ vid.title }}</div>
                    <span class="deleteVideo">X</span>
                </li>
                {% endfor %}
            </ul>
        </div>

    </div>

    <div id="addLinks" class="section">
        <h3 class="orange inlineBlock">Other Links to Online Media</h3>
        <p>Link: <input type="text" id="linkURL" placeholder="eg. http://flickr.com/xyz" /><button id="addLink">Add</button></p>
        

        <ul id="links">
            {% for link in links %}
            <li data-id="{{ link.id }}">
                <div class="linkTitle">{{ link.title }}</div>
                <a target="_blank" href="{{ link.url }}">{{ link.url }}</a>
                <span class="deleteLink">X</span>
            </li>
            {% endfor %}
        </ul>

    </div>
    <br>
    <a href="Javascript:close()" class="closinglightbox">Done</a>
{% endblock %}
