var myMedia = undefined,

    currentChapter = undefined,

    currentAnnotation = undefined,

    currentSlider = undefined,

    secMiniChapter = 10;

$(function(){

    var global = {

        colorsIndex : 0,

        colors : 

            ['#1abc9c', '#3498db', '#9b59b6', '#2ecc71',  

            '#f1c40f', '#ecf0f1', '#e67e22', '#e74c3c', '#95a5a6',

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

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

    };

    function getTemplate(idTpl){

        return $('#templates').find(idTpl).html();

    }

    myProject.onLoad(function() {

        myProject.regenerateTags = true;

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

        $('.project-title-nav').text(myProject.title);

        myMedia = myProject.getCurrentMedia();

        var anntypes = myProject.getAnnotationTypes().searchByTitle("chapitrage");

        if (!anntypes.length) {

            chapterAnnType.title = "chapitrage";

        } else {

            chapterAnnType = anntypes[0];

        }

        //load Chapitre

        chapters = chapterAnnType.getAnnotations();

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

            v.color = getRandomColor();

        });

        renderChapter();

        //load Annotations

        var anntypes = myProject.getAnnotationTypes().searchByTitle("annotations");

        if (!anntypes.length) {

            annotationsAnnType.title = "annotations";

        } else {

            annotationsAnnType = anntypes[0];

        }

        annotations = annotationsAnnType.getAnnotations();

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

            var type = v.content.mimetype.split('-');

            type = type[type.length-1]

            v.type = type;

            v.color = getRandomColor();

        });

        renderAnnotation();

        IriSP.htmlPlayer(

            myMedia,

            $(".main-video"),

            {

                width: 460,

                height: 345,

                controls: true,

                autostart: true,

                url_transform: function(src) {

                    return [{

                        type: "video/mp4",

                        src: src.replace(/\.[\d\w]+$/,'.mp4').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')

                    }, {

                        type: "video/webm",

                        src: src.replace(/\.[\d\w]+$/,'.webm').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')

                    }];

                }

            }

        );

        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);

            }

            $('.info-time').text(t)

            //annotations view

            refreshAnnotationDisplay(t);

        });//timeupdate

    });//myProject.onLoad

/* Display annotation in timeline */

    //survol

    $(document).on('mouseover', '.timeline-annotations .annotation, #list-annotations-rows tr, .item-display-annotation' , function(){

        if(!$(this).hasClass('shadow')) {

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

            $('#annotation-timeline-'+idAnnotation+', #row-list-annotation-'+idAnnotation+', #item-current-annotation-'+idAnnotation).addClass('shadow');

        }

    });

    $(document).on('mouseover', '.chapter-segment, .row-list-chapter' , function(){

        if(!$(this).hasClass('shadow')) {

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

            $('#row-list-chapter-'+idChapter+', #'+idChapter+', #form-chapter-edit-'+idChapter).addClass('shadow');

        }

    });

    $(document).on('mouseout', '.shadow' , function(){

        $('.shadow').removeClass('shadow');

    });

    $(document).on('click', '.annotation, .item-display-annotation', function(e){

        e.preventDefault();

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

            annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });

        myMedia.setCurrentTime(annotation.begin);

        if($('#tab-annotation-'+idAnnotation).length){

            $('a[href=#tab-annotation-'+idAnnotation+']').tab('show');

        }else{

            openTab(annotation.type, annotation);

        }

    });

    function refreshAnnotationDisplay(t){

        var currentAnnotationsDisplay = new Array();

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

            if(v.begin <= t && v.end >= t){

                currentAnnotationsDisplay.push(v.id);

                if(!$('#item-current-annotation-'+v.id).length){

                    var itemAnnotation = getTemplate('#tpl-item-annotation-display');

                    v.iconTab = getIcon(v.type);

                    itemAnnotation = Mustache.render(itemAnnotation, v);

                    $('.list-current-annotations').append(itemAnnotation)

                }

            }

        });

        $.each($('.list-current-annotations li'), function(k, v){

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

                annotationDisplayView = $('.annotation-display-view');

            if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché

                $('#item-current-annotation-'+idAnnotation).remove();

                if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){

                    annotationDisplayView.hide();

                }

            }

        });

        if(currentAnnotation !== undefined){ 

            showCurrentAnnotationInTimeline(currentAnnotation.id);

        }

    }

    function showCurrentAnnotationInTimeline(idAnnotation){

        $('.annotation').removeClass('editing');

        $('#annotation-timeline-'+idAnnotation).addClass('editing');

    }

    $('.list-current-annotations').on('click', 'a', function(e){

        e.preventDefault();

    });

/*  Modal */

    //confirmation suppression

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

        var typeDelete = $(this).attr('data-type-delete'),

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

        if(typeDelete == 'chapter' || typeDelete == 'annotation'){

            e.preventDefault();

            if(typeDelete == 'chapter') deleteChapter(idAnnotation);

            if(typeDelete == 'annotation') deleteAnnotation(idAnnotation);

        }

    });

/* Title project */

    $(document).on('click', '.project-title-editor i, .project-title', function () {

        var html = $('.project-title').html();

        var input = $('<input type="text" />');

        input.val(html);

        $('.project-title').replaceWith(input);

        input.focus().keypress(function(e){

            code = (e.keyCode ? e.keyCode : e.which);

            if (code == 13) $(this).blur();

        });

    });

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

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

        myProject.title = newTitle;

        $(this).replaceWith('<span class="project-title">'+newTitle+'</span></td>');

        $('.project-title-nav').text(newTitle);

        disabledPreview();

    });

/*  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);

            $(this).parents('form').find('.btn-delete-chapter').attr('data-title', value);

        }

        disabledPreview();

    });

    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;

        var tpl = getTemplate('#tpl-chapter-edit');

            tpl = Mustache.render(tpl, currentChapter);

            chapterWrap.empty().append(tpl);

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

        myMedia.setCurrentTime(currentChapter.begin);

    }

    //delete chapter

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

        e.preventDefault();

        if(chapters.length == 1){

            $('#modal-alert .alert-message').hide();

            $('#modal-alert #alert-chapter-number').show();

            $('#modal-alert').modal('show');

            return;

        }

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

            btnDeleteModal = $("#modal-confirm #btn-delete-modal");

        btnDeleteModal.attr('data-type-delete', 'chapter');

        btnDeleteModal.attr('data-id', idChapter);

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

            urlDelete = $(this).attr('href');

        $("#modal-confirm #btn-delete-modal").attr('href', urlDelete).focus();

        $("#modal-confirm .modal-body").find('.titleMedia').text(titleMedia);

        $("#modal-confirm").modal('show');

    });

    $(document).on('click', '.btn-ok-chapter', function(e){

        e.preventDefault();

        $('.form-chapter-edit').remove();

    });

    function deleteChapter(idChapter){

        $("#modal-confirm").modal('hide');

        var 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.removeId(idChapter);

        myProject.getAnnotations().removeId(idChapter, true);

        renderChapter();

        //si le formulaire est visible

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

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

        }

        disabledPreview();

    }

    function getRandomColor(){

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

    }

    //nouveau chapitre

    function newChapter(dataChapter, render){

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

            chapter.setMedia(myMedia.id);

            chapter.setBegin(dataChapter.begin);

            chapter.setEnd(dataChapter.end);

            chapter.setAnnotationType(chapterAnnType.id);

            chapter.title = dataChapter.title;

            chapter.description = dataChapter.description;

            chapter.keywords = dataChapter.keywords;

            chapter.color = getRandomColor();

        chapters.push(chapter);