var Calendar = (function () {
    var self,
        months = ['Jan', 'Feb', 'Marth', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        clickEvent,
        isDateCalendar = true,
        isHide = true,
        isAppended = false,
        year,
        month,
        date;

    // Takes 2 argument : event - callback to send info over click and type : date or month
    function Calendar(event, type) {
        this.append = append;
        this.toggleType = toggleType;
        this.hide = hide;
        this.show = showCalendar;
        this.getType = getCalendarType;
        this.getDate = getDate;
        this.isHide = getIsHide;
        clickEvent = event;
        isDateCalendar = type == 'month' ? false : true;
    }

    // Variables And Styles
    var div = document.createElement('div');

    div.style.display = 'inline-block';
    div.style.float = 'left';

    var calendarConteiner = div.cloneNode(true);
    var calendarBtnHolder = div.cloneNode(true);
    var calendarBody = div.cloneNode(true);
    var clickableObject = div.cloneNode(true);

    // INLINE-STYLES
    calendarConteiner.style.display = 'none';
    calendarConteiner.style.position = 'fixed';
    calendarConteiner.style.width = '500px';
    calendarConteiner.style.zIndex = '1000';

    calendarBody.style.boxSizing = 'border-box';
    calendarBody.style.width = '100%';

    clickableObject.style.border = '1px solid #dddddd';
    clickableObject.style.boxSizing = 'border-box';
    clickableObject.style.textAlign = 'center';

    calendarBtnHolder.style.width = '100%';

    var middleMonthBtn = clickableObject.cloneNode(true);
    var middleYearBtn = clickableObject.cloneNode(true);


    // Static Functions

    //Appending Calendar to DOM
    function append() {
        if (isAppended) throw new Error('Already Appended!');
        showCalendar();
        buildControlPanel('Година', year);
        buildControlPanel('Месец', months[month]);
        hide();
        calendarConteiner.appendChild(calendarBody)
        document.body.appendChild(calendarConteiner);
        isAppended = true;
    }

    //Change calendar Type from Date to Month and vice versa
    function toggleType() {
        isDateCalendar = !isDateCalendar;
    }

    //Change Visibility of Calendar to display:none to display:inline-block and vice versa
    function hide() {
        isHide = true;
        calendarConteiner.style.display = 'none';
    }

    // Return Calendar Type - date or month
    function getCalendarType() {
        if (isDateCalendar) {
            return 'date';
        } else {
            return 'month';
        }
    }

    //Return date, month, year, new Date Object, Date as String - format m.d.yyyy
    function getDate() {
        return { date: date, month: month, year: year, DateAsObject: new Date(year, month, date, 0, 0, 0, 0, 0), DateAsString: date + '.' + (month + 1) + '.' + year };
    }

    //Tells if calendar is hidden(display:none) or visible
    function getIsHide() { return isHide };

    //Show Calendar with current date or by given new Date Object and position relative to HTMLElement or coordinates : x and y
    //example : {relativeElement: HTMLElement, coordinates: {x : 123, y: 123}};
    function showCalendar(dateObject, position) {
        if (dateObject && Object.prototype.toString.call(dateObject).slice(8, -1) != 'Date') throw new TypeError('Only Date Object are allowed!');
        if (dateObject == 'Invalid Date') throw new Error('Invalide Date Object');
        var d = dateObject || new Date();

        date = d.getDate();
        month = d.getMonth();
        year = d.getFullYear();

        if (position) calculatePosition(position);

        middleMonthBtn.textContent = 'Месец - ' + months[month];
        middleYearBtn.textContent = 'Година - ' + year;

        calendarConteiner.style.display = '';
        isHide = false;
        (isDateCalendar) ? buildDates() : buildMonths();
    }


    //Calculate Calendar Position relative to HTMLElement or coordinates : x and y
    function calculatePosition(position) {
        if (position.coordinates) {
            calendarConteiner.style.top = (position.coordinates.y || 0) + 'px';
            calendarConteiner.style.left = (position.coordinates.x || 0) + 'px';
        }
        else if (position.relativeElement) {
            calendarConteiner.style.top = position.relativeElement.offsetTop + 'px';
            calendarConteiner.style.left = (position.relativeElement.offsetLeft + position.relativeElement.offsetWidth) + 'px';
        }
    }

    // Build Functions

    function buildControlPanel(name, data) {
        var leftBtn = clickableObject.cloneNode(true),
            rightBtn = clickableObject.cloneNode(true);

        leftBtn.textContent = '<';
        rightBtn.textContent = '>';

        if (name == 'Година') middleYearBtn.textContent = name + ' - ' + year;
        else middleMonthBtn.textContent = name + ' - ' + months[month];

        leftBtn.style.width = '10%'
        rightBtn.style.width = '10%';
        middleYearBtn.style.width = '80%';
        middleMonthBtn.style.width = '80%';

        AttachEventsToControlPanel(leftBtn, rightBtn, name)

        calendarBtnHolder.appendChild(leftBtn);
        if (name == 'Година') calendarBtnHolder.appendChild(middleYearBtn)
        else calendarBtnHolder.appendChild(middleMonthBtn)
        calendarBtnHolder.appendChild(rightBtn);
        calendarConteiner.appendChild(calendarBtnHolder);
    }

    function buildYears() {
        var firstYearToShow = Number(year) - 4,
            leftChangeYearBtn = div.cloneNode(true),
            rightChangeYearBtn = div.cloneNode(true),
            yearClickableObject = clickableObject.cloneNode(true);

        yearClickableObject.style.width = (100 / 3) + '%';

        calendarBody.innerHTML = '';

        calendarBody.appendChild(leftChangeYearBtn);
        for (var i = firstYearToShow; i <= firstYearToShow + 8; i++) {
            var currentYear = yearClickableObject.cloneNode(true);
            currentYear.textContent = i;
            currentYear.onclick = YearClickableObjectFunc;
            calendarBody.appendChild(currentYear);
        }
        calendarBody.appendChild(rightChangeYearBtn);
    }

    function buildMonths() {
        var monthClickableObject = clickableObject.cloneNode(true);
        monthClickableObject.style.width = (100 / 4) + '%';

        calendarBody.innerHTML = '';
        for (var i = 0; i < months.length; i++) {
            var currentMonth = monthClickableObject.cloneNode(true);
            currentMonth.textContent = months[i];
            currentMonth.onclick = MonthClickableObjectFunc;
            calendarBody.appendChild(currentMonth);
        }
    }

    function buildDates() {
        calendarBody.innerHTML = '';

        var firstMonthDay = new Date(year, month, 1, 0, 0, 0, 0).getDay(),
            lastMonthDay = new Date(year, Number(month) + 1, 0, 0, 0, 0, 0).getDay(),
            MonthDays = new Date(year, Number(month) + 1, 0, 0, 0, 0, 0).getDate(),
            prevMonthDays = new Date(year, Number(month) + 1, 0, 0, 0, 0, 0).getDate(),
            dateClickableObject = clickableObject.cloneNode(true);

        dateClickableObject.style.width = (100 / 7) + '%';

        for (var i = 0; i < days.length; i++) {
            var DaysAsNames = dateClickableObject.cloneNode(true);
            DaysAsNames.textContent = days[i];
            calendarBody.appendChild(DaysAsNames);
        }

        for (var i = prevMonthDays - firstMonthDay + 1; i <= prevMonthDays; i++) {
            var lastMonthBlurryDay = dateClickableObject.cloneNode(true);
            lastMonthBlurryDay.textContent = i;
            lastMonthBlurryDay.style.color = '#bbbbbb';
            calendarBody.appendChild(lastMonthBlurryDay);
        }

        for (var i = 1; i <= MonthDays; i++) {
            var thisMonthDay = dateClickableObject.cloneNode(true);
            thisMonthDay.textContent = i;
            thisMonthDay.onclick = DateClickableObjectFunc;
            thisMonthDay.style.cursor = 'pointer';
            calendarBody.appendChild(thisMonthDay);
        }

        for (var i = lastMonthDay + 1; i <= 6; i++) {
            var lastMonthBlurryDay = dateClickableObject.cloneNode(true);
            lastMonthBlurryDay.style.color = '#bbbbbb';
            lastMonthBlurryDay.textContent = i - lastMonthDay;
            calendarBody.appendChild(lastMonthBlurryDay);
        }
    }


    // Event Functions

    function MonthClickableObjectFunc() {
        for (var i = 0; i < months.length; i++) {
            if (months[i] == this.textContent) {
                month = i;
                break;
            }
        }
        if (!isDateCalendar) {
            clickEvent(new Date(year, month, 1, 0, 0, 0, 0));
        } else {
            buildDates();
        }
        middleMonthBtn.textContent = 'Месец - ' + months[month];
    }

    function DateClickableObjectFunc() {
        date = this.textContent;
        clickEvent(new Date(year, month, date, 0, 0, 0, 0, 0));
    }

    function YearClickableObjectFunc() {
        year = this.textContent;
        middleYearBtn.textContent = 'Година - ' + year;
        buildMonths();
    }


    function AttachEventsToControlPanel(leftBtn, rightBtn, name) {
        leftBtn.onclick = function () {
            if (name == 'Година') {
                year = Number(year) - 1;
                middleYearBtn.textContent = name + ' - ' + year;
            } else if (months[Number(month) - 1]) {
                month = month - 1
                middleMonthBtn.textContent = name + ' - ' + months[month];
            }
            if (isDateCalendar) buildDates();
        }

        middleYearBtn.onclick = buildYears;
        middleMonthBtn.onclick = buildMonths;

        rightBtn.onclick = function () {
            if (name == 'Година') {
                year = Number(year) + 1;
                middleYearBtn.textContent = name + ' - ' + year;
            } else if (months[Number(month) + 1]) {
                month = month + 1
                middleMonthBtn.textContent = name + ' - ' + months[month];
            }
            if (isDateCalendar) buildDates();
        }
    }

    return Calendar;
})();