/*

 * Main Timeline code

 */

window.Tlns = {

    Utils : {},

    Defaults : {},

    Templates : {},

    Classes : {}

};

/* Utility Functions */

Tlns.Utils.zeroPad = function(_n) {

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

}

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 = Math[_tab[0] === "max" ? "min":"max"];

                _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 _date !== "object") {

        _date = new Date(parseInt(_date));

    }

    var _params = {

        hours: _date.getHours(),

        isDayStart: !_date.getHours(),

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

        minutes: _date.getMinutes(),

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

        seconds: _date.getSeconds(),

        "0seconds": Tlns.Utils.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": Tlns.Utils.zeroPad(_date.getDate()),

        monthNumber: 1+_date.getMonth(),

        "0monthNumber": Tlns.Utils.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.timeFieldProcess = function(_val) {

    var _h = 0,

        _m = 0,

        _matches = _val.match(/(\d+)/g);

    if (_matches && _matches.length) {

        _h = Math.min(23, +(_matches[0]));

        if (_matches.length > 1) {

            _m = Math.min(59, +(_matches[1]));

        }

    }

    return {

        hours: _h,

        minutes: _m,

        text: Tlns.Utils.zeroPad(_h) + ':' + Tlns.Utils.zeroPad(_m)

    }

};

Tlns.Utils.dateFieldProcess = function(_val) {

    var _now = new Date(),

        _y = _now.getFullYear(),

        _m = 1 + _now.getMonth(),

        _d = _now.getDate(),

        _matches = _val.match(/(\d+)/g);

    if (_matches && _matches.length) {

        _d = Math.min(31, +(_matches[0]));

        if (_matches.length > 1) {

            _m = Math.min(12, +(_matches[1]));

        }

        if (_matches.length > 2) {

            _y = parseInt(_matches[2]);

            if (_y < 2000) {

                _y += 2000;

            }

            _y = Math.min(2020, Math.max(2000, _y));

        }

    }

    return {

        year: _y,

        month: _m,

        date: _d,

        text: Tlns.Utils.zeroPad(_d) + '/' + Tlns.Utils.zeroPad(_m) + '/' + _y

    }

};

/* Defaults */

Tlns.Defaults.Timeline = {

    email: "",

    token: "",

    container : "timeline",

    width : 790,

    height : 225,

    min_width : 400,

    min_height : 100,

    main_width : 726,

    linelabels : [

        "RDV",

        "Actu",

        "Appels",

        "Persos"

    ],

    picto_url: "img/",

    timescales : [{

        label : "Semaine",

        span : 7 * 86400 * 1000,

        grid_interval : 86400 * 1000,

        grid_date_format : '{{dayOfMonth}} {{monthName}}',

        min_importance : 0

    }, {

        label : "3 jours",

        span : 3 * 86400 * 1000,

        grid_interval : 6 * 3600 * 1000,

        grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',

        min_importance : 0

    }, {

        label : "Journée",

        span : 86400 * 1000,

        grid_interval : 2 * 3600 * 1000,

        grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',

        min_importance : 0

    }, {

        label : "Demi-Journée",

        span : 6 * 3600 * 1000,

        grid_interval : 3600 * 1000,

        grid_date_format : '{{^isDayStart}}{{0hours}}h{{0minutes}}{{/isDayStart}}{{#isDayStart}}{{dayOfMonth}} {{shortMonthName}}{{/isDayStart}}',

        min_importance : 0

    }],

    level: 0,

    central_time: 0,

    sync_now: true,

    api_endpoint: "",

    api_method: "searchForTimelineEdito",

    occurrences: [],

    grid_spacing: 12,

    tooltip_date_format: '{{dayOfMonth}} {{monthName}} {{year}} à {{0hours}}:{{0minutes}}',

    class_info: {

        "Cms\\Previously": {

            label: "Précédemment",

            univers_id: 0,

            picto: "previously.png",

            show: true

        },

        "Cms\\Chapter": {

            label: "Roman",

            univers_id: 0,

            picto: "roman.png",

            show: true

        },

        "Cms\\FlashTrash": {

            label: "JT",

            univers_id: 0,

            picto: "flash.png",

            show: true

        },

        "Cms\\Article": {

            label: "Article",

            univers_id: 1,

            show: true

        },

        "Cms\\Poll": {

            label: "Sondage",

            univers_id: 2,

            picto: "sondage.png",

            show: true

        },

        "Cms\\CallWitness": {

            label: "Appel à Témoins",

            univers_id: 2,

            picto: "temoignage.png",

            show: true

        },

        "Cms\\Rule": {

            label: "Règle du jour",

            univers_id: 2,

            picto: "regle.png",

            show: true

        },

        "Cms\\CallCharacter": {

            label: "Appel à Personnage",

            univers_id: 3,

            show: true

        },

        "Cms\\SweetCadaver": {

            label: "Cadavre exquis",

            univers_id: 3,

            show: true

        }

    },

    maxtime: false,

    url_base: ""

};

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-Main"><div class="Tl-Grid"></div><div class="Tl-TopBar"></div>'

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

    + '<div class="Tl-MainPart"><div class="Tl-Occurrences"></div>'

    + '</div></div><div class="Tl-Slider-Container"><a class="Tl-Slider-Zoom-In" href="#"></a><div class="Tl-Slider"></div><a class="Tl-Slider-Zoom-Out" href="#"></a></div>'

    + '<div class="Tl-Overlay-Container"><div class="Tl-Overlay-Box"><div class="Tl-Overlay"><div class="Tl-Overlay-Main"></div></div></div></div></div></div>'

    + '<div class="Tl-Details"></div>';

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

Tlns.Templates.Occurrence =

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

    + '{{#image}}<img src="{{image}}" />{{/image}}'

    + '</div>{{/occurrences}}';

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

Tlns.Templates.OccurrenceDetails = '<div class="Tl-Detail"><div class="Tl-Detail-X"></div><img class="Tl-Detail-Image" src="{{detail_image}}" />'

    + '<h2 class="Tl-Detail-Title">{{title}}</h2><p class="Tl-Detail-Description">{{detail_description}}</p>'

    + '<div class="Tl-Detail-Bottom"><span class="Tl-Detail-Date">Publié le {{formatted_date}}</span><a class="Tl-Detail-Read" href="{{url}}" target="_blank">Lire la suite</a></div></div>';

/* Classes */

Tlns.Classes.Timeline = function(_options) {

    /* Setting Defaults */

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

    /* Setting container CSS */

    this.$ = $('#' + this.container).html(Mustache.to_html(Tlns.Templates.Timeline, this));

    this.$.find('.Tl-Main').css({

        width : this.width + "px",

        height : this.height + "px"

    });

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

    this.main_height = this.height - this.top_height;

    //this.main_height = this.height - 27;

    var labelsWidth = this.$.find('.Tl-UniversLabels').width();

    this.main_width = this.width - labelsWidth - this.$.find('.Tl-Slider-Container').width();

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

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

    this.$.find('.Tl-Grid').css({

        "left": labelsWidth + "px",

        "width": this.main_width + "px"

    });

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

    this.$slider = this.$.find('.Tl-Slider');

    var $mainpart = this.$.find('.Tl-MainPart'),

        _o = $mainpart.offset();

    this.dragging_bounds = {

        left: _o.left,

        top: _o.top,

        right: _o.left + $mainpart.outerWidth(),

        bottom: _o.top + $mainpart.outerHeight(),

    };

    var _this = this;

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

        _this.drawGrid();

    }, 150);

    var $scrollgroup = this.$.find('.Tl-AnotherGroup');

    $scrollgroup.mousedown(function(_event) {

        _this.onMouseDown(_event);

        return false;

    });

    $scrollgroup.mousemove(function(_event) {

        _this.onMouseMove(_event);

        return false;

    });

    $scrollgroup.mouseup(function(_event) {

        _this.onMouseUp(_event);

        return false;

    });

    $scrollgroup.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,

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

            _this.central_time = _this.maxtime ? Math.min(_newTime, _this.maxtime) : _newTime;

            _this.setLevel(_newLevel);

        }

        return false;

    });

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

        $(this).show();

    }).mouseout(function(_event) {

        $(this).hide();

    });

    this.$slider.slider({

        orientation: "vertical",

        min: 0,

        max: this.timescales.length - 1,

        value: this.level,

        slide: function(e, ui) {

            _this.setLevel(ui.value);

        }

    });