var myMedia = null,

    currentChapter = null,

    currentAnnotation = null,

    chapters = [],

    annotations = [];

$(function(){

var global = {

    diaporama : null,

    idAnnotation : null,

    colorsIndex : 0,

    colors : 

        ['#f39c12', '#2ecc71', '#3498db', '#9b59b6',  

        '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', 

        '#16a085', '#27ae60', '#2980b9', '#8e44ad', 

        '#f39c12', '#d35400', '#c0392b', '#bdc3c7']

};

myProject.onLoad(function() {

    $(".project-title").text(myProject.title);

    myMedia = myProject.getCurrentMedia();

    //chargement des chapitres et annotations existants

    loadInitChapters();

    loadInitAnnotation()

    IriSP.htmlPlayer(

        myMedia,

        $(".main-video"),

        {

            width: 460,

            height: 345,

            controls: true,

            autostart: true

        }

    );

    myMedia.on("timeupdate", function(t) {

        //curseur chapitre

        var wContainer = $('.chapitre-cut-wrap').width() - 1,

            pos = wContainer * t / myMedia.duration,

            btnCutChapter = $('.btn-cut-chapter'),

            wBtnCutChapter = btnCutChapter.outerWidth();

        $(".indicateur-chapter, .indicateur-annotation").css("left",pos);

        if(pos+wBtnCutChapter>wContainer){

            btnCutChapter.css("left",(pos - wBtnCutChapter));

        }else{

            btnCutChapter.css("left",pos);

        }

    });//timeupdate

});//myProject.onLoad

//--modal

    $(document).on('click', 'a.open-modal', function(e){

        var diaporama = $(this).attr('data-diaporama'),

            idAnnotation = $(this).attr('data-id');

        if(diaporama !== undefined){

            global.diaporama = diaporama;

        }

        if(idAnnotation !== undefined){

            global.idAnnotation = idAnnotation;

        }

    });

//edition image

    $('.popup').on('change', '#media-type-select', function(e){

        var typeImage = $(this).val();

        $('.input-image-url, .input-image-upload').hide();

        $('.input-image-'+typeImage).show();

    });

//bibliotheque

    //video

    $('.popup').on('click', '.bibliotheque-video a', function(e){

        e.preventDefault();

        $('.popup').modal('hide');

        $.get('template.html', function(templates){

            var videoWrap = $('#'+global.idAnnotation).find('.annotation-video-content'),

                tplVideo = $(templates).filter('#tpl-video-row').html();

            videoWrap.empty().append(tplVideo);

        });

    });

    //image

    $('.popup').on('click', '.bibliotheque-image a', function(e){

        e.preventDefault();

        var listDiaporama = $('#'+global.diaporama);

        addImageToDiaporama(listDiaporama);

        $('.popup').modal('hide');

    });

    //confirmation suppression

    $("#modal-confirm").on('click', '#btn-delete-modal', function(e){

    });

//--title-editor

$('.project-title-editor ._popover').bind('click',function(e){e.preventDefault()});

    $('.project-title-editor ._popover').popover({

        html : true,

        content : function(){

            var previousValue = $('.project-title').text(),

                formInput = 

                    '<form action="#" class="project-title-editor-form">'+

                        '<input type="text" class="project-title-editor-input" value="'+previousValue+'">'+

                    '</form>';

            return formInput;

        }

    });

    $('body').on('click', function (e) {

        $('._popover').each(function () {

            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {

                $(this).popover('hide');

            }

        });

    });

    $('body').on('submit', '.project-title-editor-form', function(e){

        e.preventDefault();

        $('._popover').popover('hide');

    });

    $(document).on('keyup', '.project-title-editor-input', function() {

        $('.project-title').html($(this).val());

    });

//######################## chapter

//edit

    $('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){

        e.preventDefault();

        var idChapter = $(this).attr('data-chapter-id');

        loadFormChapter(idChapter);

    });

    $('.chapter-segments').on('click', 'li', function(){

        var idChapter = $(this).attr('id');

        loadFormChapter(idChapter);

    });

    $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){

        var name = $(this).attr('name'),

            value = $(this).val();

        currentChapter[name] = value;

        if(name == 'title'){

            var idChapter = $(this).parents('form').attr('data-chapter-id');

            $('.chapter-segments').find('#'+idChapter).text(value);

            $('#row-list-chapter-'+idChapter).find('td:first').text(value);

        }

    });

    function loadFormChapter(idChapter){

        currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });

        var chapterWrap = $('.chapter-widget-info'),

            indexChapter = _.indexOf(chapters, currentChapter),

            beginTangle = (indexChapter>0) ? true : false,

            endTangle = (indexChapter<(chapters.length-1)) ? true : false;

        currentChapter.beginTangle = beginTangle;

        currentChapter.endTangle = endTangle;

        $.get('template.html', function(templates){

            var tpl = $(templates).filter('#tpl-chapter-edit').html();

            tpl = Mustache.render(tpl, currentChapter);

            chapterWrap.empty().append(tpl);

            chapterWrap.find('.tag-it').tagit(tagitParam);

        });

    }

//supprimer

$('.list-chapter-wrap').on('click', '.btn-delete-chapter', function(e){

    e.preventDefault();

    if(chapters.length == 1){alert('Le projet doit contenir au moins un chapitre.'); return;}

    var idChapter = $(this).attr('data-chapter-id'),

        chapter = _.find(chapters, function(c){ return c.id == idChapter; }),

        indexChapter = _.indexOf(chapters, chapter),

        chapterModify;

    if(indexChapter == 0){

        chapterModify = chapters[1];

        chapterModify.setBegin(0);

    }else{

        chapterModify = chapters[indexChapter-1];

        //var newEnd = new IriSP.Model.Time(chapter.end)

        chapterModify.setEnd(chapter.end);

    }

    chapters = _(chapters).reject(function(c) { return c.id == idChapter; });

    renderChapter();

    //si le formulaire est visible

    if($('#form-chapter-edit-'+idChapter).length){

        $('#form-chapter-edit-'+idChapter).remove();

    }

});

//nouveau chapitre

    function newChapter(dataChapter){

        var chapter = new IriSP.Model.Annotation(false, myProject);

            chapter.setMedia(myMedia.id);

            chapter.setBegin(dataChapter.begin);

            chapter.setEnd(dataChapter.end);

            chapter.title = dataChapter.title;

            chapter.description = dataChapter.description;

            chapter.keywords = dataChapter.keywords;

            chapter.color = global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];

        chapters.push(chapter);

        renderChapter();

        loadFormChapter(chapter.id);

    }

    $('.chapter-widget').on('click', '.btn-cut-chapter', function(e){

        e.preventDefault();

        var dataChapter = {

                title : 'New',

                begin : myMedia.currentTime,

                end : organizeNewChapter(myMedia.currentTime),

                description : 'description',

                keywords : ['tag1','tag2']

            };

        newChapter(dataChapter);

    });

    function organizeNewChapter(beginNew){

        var returnEnd;

        $.each(chapters, function(k, v){

            var begin = v.begin,

                end = v.end;

            if(beginNew>=begin && beginNew<=end){

                returnEnd = new IriSP.Model.Time(end);

                v.setEnd(beginNew); 

            }

        });

        return returnEnd;

    }

    function renderChapter(){

        var chapterSegmentWrap = $('.chapter-segments'),

            wChapterSegmentWrap = chapterSegmentWrap.width(),

            chapterList = $('.list-chapter-rows-wrap');

        chapters = _.sortBy(chapters, function(c){

            return c.begin;

        });

        chapterSegmentWrap.empty();

        chapterList.empty();

        $.each(chapters, function(k, v){

            //form

            if($('#form-chapter-edit-'+v.id).length){

                loadFormChapter(v.id);

            }

            //segments

            var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration),

                segment = $('<li>'+v.title+'</li>').css({

                    width : width,

                    backgroundColor : v.color

                }).attr('id', v.id);

            chapterSegmentWrap.append(segment);

            //liste

            $.get('template.html', function(templates){

                var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();

                tplChapterRow = Mustache.render(tplChapterRow, v);

                chapterList.append(tplChapterRow);

            });

        });

    }

//init

    function loadInitChapters(){//nouveau projet, 1 chapitre

        var dataChapter = {

                title : 'New',

                begin : 0,

                end : myMedia.duration,

                description : 'description',

                keywords : ['tag1','tag2']

            };

        newChapter(dataChapter);

    }

//######################## annotation

    function loadInitAnnotation(){//nouveau projet, 1 chapitre

        var dataAnnotation = {

                title : 'Titre azerty',

                begin : myMedia.duration/5,

                end : myMedia.duration/3,

                description : 'description',

                type : 'video',

                keywords : ['ideal', 'tag']

            };

        newAnnotation(dataAnnotation);

    }

    function newAnnotation(dataAnnotation){

        var annotation = new IriSP.Model.Annotation(false, myProject);

            annotation.setMedia(myMedia.id);

            annotation.setBegin(dataAnnotation.begin);

            annotation.setEnd(dataAnnotation.end);

            annotation.title = dataAnnotation.title;

            annotation.description = dataAnnotation.description;

            annotation.type = dataAnnotation.type;

            annotation.color = global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];

            annotation.keywords = dataAnnotation.keywords;

        annotations.push(annotation);

    }

    function renderAnnotation(){

        var timeline = $('.timeline-annotations'),

            wTimeline = timeline.width(),

            annotationList = $('#list-annotations-rows');

        annotations = _.sortBy(annotations, function(c){