Element.prototype.addStyles = function (styles) {
    if (!styles || Object.prototype.toString.call(styles).slice(8, -1) != 'Object') throw new Error('Styles accept object');
    for (var style in styles) { this.style[style] = styles[style]; }
}

var Schedule = (function () {
    var _conteinerHeight,
        _conteinerWidth,
        _FromDate,
        _ToDate,
        _userName,
        SCHEDULE_START_HOUR = 9,
        self;

    function Schedule(sportClassesArray, width, height, FromDate, ToDate, userName) {
        _conteinerHeight = height;
        _conteinerWidth = width;
        _FromDate = new Date(FromDate);
        _ToDate = new Date(ToDate);
        _userName = userName;
        self = this;
        addStylesToConteiners();
        buildSchedule(sportClassesArray);
        this.append = append;
        this.RebuildSchedule = buildSchedule;
    }

    var div = document.createElement('div');

    div.addStyles({ display: 'inline-block', float: 'left', boxSizing: 'border-box' });

    var ScheduleConteiner = div.cloneNode(true),
        ScheduleColumn = div.cloneNode(true),
        ScheduleClass = div.cloneNode(true),
        onHoverWindow = div.cloneNode(true);

    //Static Functions

    function append(conteiner) {
        fillConteinerWithColumns();
        conteiner.appendChild(ScheduleConteiner);
        return self;
    }


    // Help Functions

    function addStylesToConteiners() {
        ScheduleConteiner.addStyles({ width: (_conteinerWidth + 'px'), height: (_conteinerHeight + 'px'), border: '1px solid green', position: 'relative' });
        ScheduleColumn.addStyles({ width: (100 / 7) + '%', height: _conteinerHeight + 'px', border: '1px solid red' });

        ScheduleClass.addStyles({ width: (100 / 7) + '%', height: (_conteinerHeight / 12) + 'px', borderRadius: '7px', position: 'absolute', border: '1px solid black' });

        onHoverWindow.addStyles({ width: ((100 / 7) * 2) + '%', borderRadius: '10px', position: 'absolute', border: '1px solid black' });

    }

    //Build Functions

    function buildSchedule(sportClassesArray) {
        for (var a = 0; a < sportClassesArray.length; a++) {
            for (var b = 0; b < sportClassesArray[a].Dates.length; b++) {
                buildScheduleClass(sportClassesArray[a], sportClassesArray[a].Dates[b], sportClassesArray[a].UserNames);
            }
        }
    }

    function buildScheduleClass(sportClass, date, usersArray) {
        var d = new Date(date);
        var currentClass = ScheduleClass.cloneNode(true);
        var Name = sportClass.Name;
        var ShortDisc = sportClass.ShortDiscription;
        var ClassImg = sportClass.ImageData;
        var row = div.cloneNode(true);

        var daysFromBegginingOfWeek = Math.floor((d.valueOf() - _FromDate.valueOf()) / 86400000),
            minutePercent = _conteinerHeight / 720 * 100 / 720;

        currentClass.style.left = (daysFromBegginingOfWeek * (100 / 7)) + '%';
        currentClass.style.top = ((((d.getHours() - SCHEDULE_START_HOUR) * 60) + d.getMinutes()) * minutePercent) + '%';

        currentClass.innerHTML = '<div style="width:100%;height:50%;overflow:hidden;margin:0 2px;" title="' + Name + '">' + Name + '</div>' +
            '<div style="width:100%;height:50%;overflow:hidden;margin:0 2px;">' + d.toDateString().split(' ').splice(1).join(' ') + '</div>';

        currentClass.onmouseover = function (e) {
            buildOnHoverWindow(Name, d, ShortDisc, '', usersArray);
        }

        currentClass.onmouseleave = function () {
            try {
                document.body.removeChild(onHoverWindow);
            } catch (e) {

            }
        }

        ScheduleConteiner.appendChild(currentClass);
        // Add onmouseover and onmouseleave
    }

    function buildOnHoverWindow(name, date, shortDisc, imgStr) {
        var d = date.toDateString().split(' ').splice(1).join(' ') + ' ' + date.getHours() + ':' + date.getMinutes() + ':00';
        onHoverWindow.innerHTML = '<div style="width:100%;margin-bottom:15px;"><img src="' + imgStr + '" style="width:20%;height:20%"/><div style="width:30%;display:inline-block;">' + name + '</div>' +
            '<div style="float:right; margin: 0 3px;">' + d + '</div></div><div style="width:100%;margin-bottom:15px;"><div style="width:35%;display:inline-block;">Кратко Описание:</div>' +
            '<div style="width:60%;display:inline-block;">' + shortDisc + '</div></div>';

        document.body.appendChild(onHoverWindow);
    }

    function fillConteinerWithColumns() {
        for (var i = 0; i < 7; i++) {
            var columnCoppy = ScheduleColumn.cloneNode(true);
            ScheduleConteiner.appendChild(columnCoppy);
        }
    }

    return Schedule;
})();

var obj = [
    {
        Name: 'Kangoo',
        ShortDiscription: 'PROSTO NQKWO OPISANIE ZA TEST',
        Dates: [
            '2015-02-22 13:30:00', '2015-02-23 15:00:00', '2015-02-25 12:30:00'
        ]
    },
    {
        Name: 'Aerobic',
        ShortDiscription: 'Aerobic',
        Dates: [
            '2015-02-22 14:30:00', '2015-02-23 16:00:00', '2015-02-25 13:30:00'
        ]
    },
        {
            Name: 'OMG',
            ShortDiscription: 'OMG',
            Dates: [
                '2015-02-22 17:30:00', '2015-02-23 18:00:00', '2015-02-25 15:30:00'
            ]
        },
                {
                    Name: 'ASD',
                    ShortDiscription: 'ASD',
                    Dates: [
                        '2015-02-26 17:30:00', '2015-02-27 18:00:00', '2015-02-28 15:30:00'
                    ]
                },
]


var sc = new Schedule(obj, 800, 700, '2015-02-22', '2015-02-28').append(document.body);