/*

 * Main Timeline code

 */

window.Tlns = {

    Utils : {},

    Defaults : {},

    Templates : {},

    Classes : {}

};

/* Utility Functions */

Tlns.Utils.SetDefaults = function(_object, _defaults, _options) {

    var _options = _options || {};

    _(_defaults).each(function(_v, _k) {

        if(/^m(in|ax)_/.test(_k)) {

            var _tab = _k.split('_')

            if( typeof _object[_tab[1]] !== "undefined") {

                var _fn = (_tab[0] === "min" ? Math.max : Math.min);

                _object[_tab[1]] = _fn(_object[_tab[1]], _v);

            }

        } else {

            if( typeof _options[_k] !== "undefined") {

                _object[_k] = _options[_k];

            } else {

                _object[_k] = _v;

            }

        }

    });

}

Tlns.Utils.dateFormat = function(_date, _template) {

    if (typeof _data !== "object") {

        _date = new Date(_date);

    }

    function zeroPad(_n) {

        return (_n < 10 ? "0" : "") + _n

    }

    var _params = {

        hours: _date.getHours(),

        "0hours": zeroPad(_date.getHours()),

        minutes: _date.getMinutes(),

        "0minutes": zeroPad(_date.getMinutes()),

        seconds: _date.getSeconds(),

        "0seconds": zeroPad(_date.getSeconds()),

        dayOfWeek: ["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"][_date.getDay()],

        shortDayOfWeek: ["Dim","Lun","Mar","Mer","Jeu","Ven","Sam"][_date.getDay()],

        dayOfMonth: _date.getDate(),

        "0dayOfMonth": zeroPad(_date.getDate()),

        monthNumber: 1+_date.getMonth(),

        "0monthNumber": zeroPad(1+_date.getMonth()),

        monthName: ["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"][_date.getMonth()],

        shortMonthName: ["jan","fev","mar","avr","mai","jun","jul","aou","sep","oct","nov","dec"][_date.getMonth()],

        year: _date.getFullYear()

    }

    return Mustache.to_html(_template, _params);

}

Tlns.Utils.guid = function() {

    return 'xxxx-xxxx-xxxx-xxxx'.replace(/x/g,function() {

        return Math.floor(Math.random()*16).toString(16);

    });

}

Tlns.Utils.drawArrow = function(_ctx, _color, _x1, _y1, _x2, _y2) {

    _ctx.strokeStyle = _color;

    _ctx.fillStyle = _color;

    _ctx.beginPath();

    _ctx.moveTo(_x1,_y1);

    _ctx.lineTo(_x2,_y2);

    _ctx.stroke();

    var _mod = Math.sqrt(Math.pow(_x2 - _x1, 2) + Math.pow(_y2 - _y1, 2)),

        _xu = (_x2 - _x1) / _mod,

        _yu = (_y2 - _y1) / _mod,

        _xm = (_x1 + _x2) / 2,

        _ym = (_y1 + _y2) / 2,

        _arrowWidth = 4,

        _arrowLength = 8,

        _x3 = _xm - _arrowLength * _xu + _arrowWidth * _yu,

        _y3 = _ym - _arrowLength * _yu - _arrowWidth * _xu,

        _x4 = _xm - _arrowLength * _xu - _arrowWidth * _yu,

        _y4 = _ym - _arrowLength * _yu + _arrowWidth * _xu;

    _ctx.beginPath();

    _ctx.moveTo(_x3, _y3);

    _ctx.lineTo(_xm, _ym);

    _ctx.lineTo(_x4, _y4);

    _ctx.fill();

    _ctx.stroke();

}

/* Defaults */

Tlns.Defaults.Timeline = {

    container : "timeline",

    width : 950,

    height : 200,

    url_univers : '',

    min_width : 400,

    min_height : 100,

    main_width : 800,

    timescales : [{

        label : "Mois",

        span : 32 * 86400 * 1000,

        grid_interval : 5 * 86400 * 1000,

        grid_date_format : '{{dayOfMonth}} {{shortMonthName}}',

        start_date_format : '{{dayOfMonth}} {{shortMonthName}}',

        end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{year}}'

    }, {

        label : "Semaine",

        span : 8 * 86400 * 1000,

        grid_interval : 86400 * 1000,

        grid_date_format : '{{shortDayOfWeek}} {{0dayOfMonth}}/{{0monthNumber}}',

        start_date_format : '{{dayOfMonth}} {{shortMonthName}}',

        end_date_format : '{{dayOfMonth}} {{shortMonthName}}'

    }, {

        label : "2 jours",

        span : 2 * 86400 * 1000,

        grid_interval : 8 * 3600 * 1000,

        grid_date_format : '{{shortDayOfWeek}} {{0dayOfMonth}}/{{0monthNumber}} {{hours}}h',

        start_date_format : '{{dayOfMonth}} {{shortMonthName}}',

        end_date_format : '{{dayOfMonth}} {{shortMonthName}}'

    }, {

        label : "Demi-Journée",

        span : 12 * 3600 * 1000,

        grid_interval : 2 * 3600 * 1000,

        grid_date_format : '{{hours}}h',

        start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h',

        end_date_format : '{{dayOfMonth}} {{shortMonthName}} {{hours}}h'

    }, {

        label : "3 Heures",

        span : 3 * 3600 * 1000,

        grid_interval : 30 * 60 * 1000,

        grid_date_format : '{{0hours}}:{{0minutes}}',

        start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{0hours}}:{{0minutes}}',

        end_date_format : '{{0hours}}:{{0minutes}}'

    }, {

        label : "1 Heure",

        span : 60 * 60 * 1000,

        grid_interval : 15 * 60 * 1000,

        grid_date_format : '{{0hours}}:{{0minutes}}',

        start_date_format : '{{dayOfMonth}} {{shortMonthName}} {{0hours}}:{{0minutes}}',

        end_date_format : '{{0hours}}:{{0minutes}}'

    }],

    level: 0,

    central_time: 0,

    sync_now: true,

    url_occurrences: '',

    occurrences: [],

    cluster_spacing: 10,

    tooltip_date_format: '{{dayOfMonth}} {{shortMonthName}} {{year}} {{0hours}}:{{0minutes}}'

}

for (var _i = 0; _i < Tlns.Defaults.Timeline.timescales.length; _i++) {

    Tlns.Defaults.Timeline.timescales[_i].level = _i;

}

/* Templates */

Tlns.Templates.Timeline = '<div class="Tl-TopBar"><div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-AddButton"></div></div><div class="Tl-TopBar-Spacer Tl-Border-Right"></div>'

    + '<div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-PreviousButton"></div></div><div class="Tl-TopBar-TimeSpan Tl-TopBar-TextBtn Tl-Border-Right">--/--</div>'

    + '<div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-SyncButton"></div></div><div class="Tl-TopBar-Button Tl-Border-Right"><div class="Tl-TopBar-NextButton"></div></div><div class="Tl-TopBar-Spacer Tl-Border-Right"></div>'

    + '<div class="Tl-TopBar-Timescales">{{#timescales}}<div class="Tl-TopBar-Button Tl-TopBar-TextBtn Tl-Border-Right" data-level="{{level}}">{{label}}</div>{{/timescales}}</div></div>'

    + '<div class="Tl-BottomPart"><ul class="Tl-UniversLabels"></ul>'

    + '<div class="Tl-MainPart"><div class="Tl-Layer Tl-Grid"></div><canvas class="Tl-Layer Tl-Canvas"></canvas><canvas class="Tl-Layer Tl-Linking-Canvas"></canvas><div class="Tl-Layer Tl-Occurrences"></div>'

    + '<ul class="Tl-Adding"><li class="Tl-AddingTitle">Ajout d\'une occurrence</li><li><span>Narrative</span><div class="Tl-AddOccurrence Tl-Occnarrative" occurrence-type="narrative" title="Glisser sur la frise chronologique pour ajouter"></div></li>'

    + '<li><span>De Publication</span><div class="Tl-AddOccurrence Tl-Occpublication" occurrence-type="publication" title="Glisser sur la frise chronologique pour ajouter"></div></li></ul></div>'

    + '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Tip-Top"></div><div class="Tl-Overlay-Main"></div><div class="Tl-Overlay-Tip-Bottom"></div></div></div></div></div>';

Tlns.Templates.Univers = '<span class="Tl-UniversText">{{title}}</span>';

Tlns.Templates.Occurrence = '{{#clusters}}<div class="Tl-Cluster Tl-Occ{{type}}" style="left: {{x}}px; top: {{y}}px;" cluster-contents="{{contents}}">'

    + '<div class="Tl-ClusterCount">{{occurrences.length}}</div></div>{{/clusters}}'

    + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccOnGrid Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}" style="left: {{x}}px; top: {{y}}px;">'

    + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}{{#open_cluster}}<div class="Tl-ClusterOverlay" style="left: {{x}}px; top: {{y}}px;">'

    + '{{#occurrences}}<div class="Tl-Occurrence Tl-OccInCluster Tl-Occ{{type}}{{#editing}} Tl-Editing{{/editing}}" occurrence-id="{{id}}">'

    + '{{#locked}}<div class="Tl-Locked"></div>{{/locked}}<div class="Tl-Link"{{#editing}} style="display: block"{{/editing}}></div></div>{{/occurrences}}</div>{{/open_cluster}}';

Tlns.Templates.OccurrenceTooltip = '<h3 class="Tl-Tooltip-Title">{{title}}</h3><p class="Tl-Tooltip-Date">{{formatted_date}}</p>'

    + '<p class="Tl-Tooltip-Description">{{description}}</p><p class="Tl-Tooltip-Characters">{{univers.mainCharacter}}{{#characters}}, {{.}}{{/characters}}</p>'

/* Classes */

Tlns.Classes.Timeline = function(_options) {

    /* Setting Defaults */

    Tlns.Utils.SetDefaults(this, Tlns.Defaults.Timeline, _options);

    /* Setting container CSS */

    this.$ = $('#' + this.container);

    this.$.addClass('Tl-Main');

    this.$.css({

        width : this.width + "px",

        height : this.height + "px"

    });

    this.$.html(Mustache.to_html(Tlns.Templates.Timeline, this));

    this.main_height = this.height - this.$.find('.Tl-TopBar').outerHeight();

    this.$.find('.Tl-BottomPart').css("height", this.main_height + "px");

    this.$.find('.Tl-MainPart').css("width", this.main_width + "px");

    this.$.find('.Tl-Overlay-Container').css("left", (this.$.find('.Tl-BottomPart').outerWidth() - this.main_width) + "px");

    this.$.find('canvas.Tl-Layer').attr({

        width: this.main_width,

        height: this.main_height

    });

    var _o = this.$.find('.Tl-MainPart').offset();

    this.dragging_bounds = {

        left: _o.left,

        top: _o.top,

        right: _o.left + this.$.find('.Tl-MainPart').outerWidth(),

        bottom: _o.top + this.$.find('.Tl-MainPart').outerHeight(),

    };

    var _this = this;

    this.throttledDrawGrid = _.throttle(function() {

        _this.drawGrid();

    }, 150);

    this.setLevel(this.level);

    this.$.find('.Tl-TopBar-Timescales>div').click(function() {

        _this.setLevel($(this).attr("data-level"));

    });

    this.$.find('.Tl-TopBar-SyncButton').click(function() {

        _this.sync_now = !_this.sync_now;

        _this.drawGrid();

    })

    this.$.find('.Tl-TopBar-PreviousButton').click(function() {

        _this.offsetTime(-_this.timescales[_this.level].span / 4);

    });

    this.$.find('.Tl-TopBar-NextButton').click(function() {

        _this.offsetTime(_this.timescales[_this.level].span / 4);

    });

    this.$.find('.Tl-MainPart').mousedown(function(_event) {

        _this.onMouseDown(_event);

        return false;

    });

    this.$.find('.Tl-MainPart').mousemove(function(_event) {

        _this.onMouseMove(_event);

        return false;

    });

    this.$.find('.Tl-MainPart').mouseup(function(_event) {

        _this.onMouseUp(_event);

        return false;

    });

    this.$.find('.Tl-MainPart').mousewheel(function(_event, _delta) {

        var _newLevel = Math.max(0,Math.min(_this.timescales.length-1, (_delta < 0 ? -1 : 1) + parseInt(_this.level)));

        if (_newLevel != _this.level) {

            _this.hideTooltip();

            var _deltaX = _event.pageX - _this.dragging_bounds.left,

                _tAtMouse = _this.timeFromMouse(_event.pageX),

                _newScale = _this.main_width / (_this.timescales[_newLevel].span),

                _newStart = _tAtMouse - _deltaX / _newScale;

            _this.central_time = _newStart + _this.timescales[_newLevel].span / 2;

            _this.setLevel(_newLevel);

        }

        return false;

    });

    this.$.find('.Tl-Overlay-Box').mouseover(function(_event) {

        $(this).show();

    }).mouseout(function(_event) {

        $(this).hide();

    });

    this.$.find('.Tl-TopBar-AddButton').click(function() {

        $(this).toggleClass('active');

        _this.$.find('.Tl-Adding').toggle();

    });

    this.$.find('.Tl-AddOccurrence').mousedown(function(_event) {

        var _el = $(this),

            _type = _el.attr("occurrence-type"),

            _d = _this.timeFromMouse(_event.pageX),

            _u = _this.universFromMouse(_event.pageY),

            _occ = _this.createOrUpdateOccurrence(

                _type,

                {

                    date: _d,

                    titre: '<Nouvelle occurrence>',

                    univers: _this.univers[_u].id,

                    publie: true

                }

            );

        _occ.just_created = true;

        _occ.editing = true;

        _this.editing_occurrence = _occ;

        _this.dragging_type = "occurrence";

        window.setTimeout(function () {

            _this.$.find('.Tl-TopBar-AddButton').removeClass('active');

            _this.$.find('.Tl-Adding').hide();

        }, 200);

        _this.throttledDrawGrid();

    }).mouseup(function(_event) {

        _this.onMouseUp(_event);

        return false;

    });

    /* Loading Univers */

    $.getJSON(this.url_univers, function(_data) {

        _this.onUniversLoaded(_data);

    });

}