var _picker = new PPDateTimePicker();

function PPDateTimePicker() {
    
    this.bindedElements = new Array();
    
    this.currentElement = null;
    
    this.months = [
        'January', 'February', 'March', 'April',
        'May', 'June', 'July', 'August', 'September',
		'October', 'November', 'December'];

    this.shortMonths = [
        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
    this.days = [
        'Sunday', 
        'Monday', 
        'Tuesday', 
        'Wednesday', 
        'Thursday', 
        'Friday', 
        'Saturday'];
        
    this.shortDays = ['Su','Mo','Tu','We','Th','Fr','Sa'];
 
    this.curDate = new Date();
 
    this.format = "dd/mm/yy";
    
    this.guid = "dtP00O60000001ul2P";
    this.mPid = "dtP00O61000001ul2P";
    this.mNid = "dtP00O62000001ul2P";
    this.mDDid = "dtP00O63000001ul2P";
    this.yDDid = "dtP00O64000001ul2P";

    this.getInternalContainer = function () {
        var internalContainer = document.getElementById(this.guid);
        if (internalContainer == null) {
            var internalContainer = document.createElement("DIV");
            internalContainer.setAttribute("id", this.guid);
            internalContainer.className = "dtPicker";
            internalContainer.style.zIndex = "300";
            internalContainer.style.display = "none";
            internalContainer.style.position = "absolute";
            document.body.appendChild(internalContainer);
            var globalC = document.body;
            if (globalC.attachEvent)
                globalC.attachEvent("onclick", this.clickAction);
            else if (globalC.addEventListener)
                globalC.addEventListener("click", this.clickAction, false);
        }
        return internalContainer;
    }

    this.parseFromText = function(text) {
        var result = null;
        var segments = text.split("/");
        if (segments.length == 3) {
            var days = Number(segments[0]);
            var month = Number(segments[1]) - 1;
            var year = Number(segments[2]);
            
            var tmpDate = new Date(year, month, days);
            var tmpDays = tmpDate.getDate();
            var tmpMonth = tmpDate.getMonth();
            var tmpYear = tmpDate.getFullYear();
            
            if (days == tmpDays && month == tmpMonth && year == tmpYear)
                result = tmpDate;
        }
        return result;
    }
    
    this.buidContent = function(target) {
        var datePointer = null;
        if (target == null)
            datePointer = this.curDate;

        if (target != null) {
            this.currentElement = target;
            if (this.currentElement != null && this.currentElement.value != null)
                datePointer = this.parseFromText(this.currentElement.value);
        }
        
        if (datePointer == null)
            datePointer = new Date();
        
        this.curDate = datePointer;
            
        datePointer = new Date(datePointer.getFullYear(), datePointer.getMonth(), 1);
        while(datePointer.getDay() != 0)
            datePointer.setDate(datePointer.getDate() - 1);
        var datePointerTmp = datePointer;
    
        var content = '<div>'
        
        content += '<table class="dtPickerHeader" cellspacing="0" cellpadding="0">';
        content +=      "<tr>";
        content +=          '<td >';
        content +=              '<img src="../img/empty.png" id="' + this.mPid + '" onclick="_picker.movePrevMonth();" class="mPrevInAct" onmouseover="this.className = \'mPrevAct\'" onmouseout="this.className = \'mPrevInAct\'"/>';
        content +=              '<select id="' + this.mDDid + '" onchange="_picker.setMonth(this.value);" class="monthPicker">';
        for (var i = 0; i < this.months.length; i++) {
            content += '<option value="' + i + '" ' + (this.curDate.getMonth() == i ? 'selected="selected"' : '') + '>';
            content += this.months[i];
            content += "</option>";
        }
        content +=              "</select>";
        content +=              '<img src="../img/empty.png" id="' + this.mPid + '" onclick="_picker.moveNextMonth();" class="mNextInAct" onmouseover="this.className = \'mNextAct\'" onmouseout="this.className = \'mNextInAct\'"/>';
        content +=              '<select id="' + this.yDDid + '" onchange="_picker.setYear(this.value);" class="yearPicker">';
        for (var i = -3; i <=3 ; i++) {
            content += '<option value="' + (this.curDate.getFullYear() + i) + '" ' + ((i == 0) ? 'selected="selected"' : '')  + '>';
            content += this.curDate.getFullYear() + i;
            content += "</option>";
        }
        content +=              "</select>";
        content +=          "</td>";
        content +=      "</tr>";
        content += "</table>";
        
        content += '<table class="dtPickerGrid" cellspacing="0" cellpadding="0">';
        
        content += "<tr>";
        for (var i = 0; i < this.shortDays.length; i++)
            content += '<td class="dtPickerDoW">' + this.shortDays[i] + "</td>";
        content += "</tr>";
        
        for (var i = 0; (i < 6); i++) {
            if (i == 5 && datePointerTmp.getMonth() != this.curDate.getMonth())
                break;
            content += "<tr>";
            for (var j = 0; j < 7; j++) {
                content += "<td ";
                
                var class_ = '';
                
                if (datePointerTmp.getMonth() == this.curDate.getMonth() && datePointerTmp.getFullYear() == this.curDate.getFullYear() && datePointerTmp.getDate() == this.curDate.getDate())
                    class_ += " selected ";
                if (datePointerTmp.getMonth() == new Date().getMonth() && datePointerTmp.getFullYear() == new Date().getFullYear() && datePointerTmp.getDate() == new Date().getDate())
                    class_ += " today ";
                if (datePointerTmp.getDay() == 0 || datePointerTmp.getDay() == 6)
                    class_ += " weekend ";
                if (datePointerTmp.getMonth() != this.curDate.getMonth())
                    class_ += " inactive ";
                    
                if (class_.length > 0)   
                    content += 'class="' + class_ + '"';
                   
                content += ">";
                if (datePointerTmp.getMonth() == this.curDate.getMonth())
                    content += '<a style="cursor:pointer" onclick="_picker.setDate(' + datePointerTmp.getDate() + ');">';
                else 
                    content += '<a>';
                content += datePointerTmp.getDate();
                content += "</a>";
                content += "</td>";
                datePointerTmp.setDate(datePointerTmp.getDate() + 1);
            }
            content += "</tr>";
        }

        content += "<tr>";
        content +=      '<td class="todayPanel" colspan="7">';
        content +=      '<a onclick="_picker.setToday();">Today</a>';
        content +=      "</td>";
        content += "</tr>";
        
        content += "</table></div>";
        return content;
    };
    
    this.showPicker = function(target) {
        var contentXml = this.buidContent(target);
        var container = this.getInternalContainer();
        this.movePickerToElement(target);
        container.style.display = "block";
        setInnerHTML(container, contentXml);
    }
    
    this.hidePicker = function(target) {
        var container = this.getInternalContainer();
        this.currentElement = null;
        container.style.display = "none";
    }

    this.containsBindElement = function(element) {
        var contains = false;
        for (var i = 0; i < this.bindedElements.length; i++) {
            if (this.bindedElements[i] == element) {
                contains = true;
                break;
            }
        }
        return contains;
    }
    
    this.testClick = function(x, y) {
        var result = false;
        var pickerContainer = this.getInternalContainer();
        var x1 = pickerContainer.offsetLeft;
        var x2 = pickerContainer.offsetLeft + pickerContainer.offsetWidth;
        var y1 = pickerContainer.offsetTop;
        var y2 = pickerContainer.offsetTop + pickerContainer.offsetHeight;
        result = (x >= x1 && x <= x2 && y >= y1 && y <= y2);
        return result;
    }
    
    this.clickAction = function(e) {
        if (e != null && e.target != null && e.target.id != null) {
            var target = e.target;
            if (_picker.containsBindElement(target)) {
                _picker.showPicker(target);
            } else if (!(_picker.getInternalContainer().style.display == "block" && _picker.testClick(e.pageX, e.pageY)))
                _picker.hidePicker();
        } else if (e != null && e.srcElement != null && e.srcElement.id != null) {
            var target = e.srcElement;
            if (_picker.containsBindElement(target)) {
                _picker.showPicker(target);
            } else if (!(_picker.getInternalContainer().style.display == "block" && _picker.testClick(e.x, e.y + document.body.scrollTop)))
                _picker.hidePicker();
        }
    }
    
    this.movePickerToElement = function(elemnt) {
    	var position = $(elemnt).offset();
        position.top += 15;
	    $(this.getInternalContainer()).css(position);
	    /*
	    var top = elemnt.offsetTop;
	    var left = elemnt.offsetLeft;
	    if (elemnt.getBoundingClientRect) {
	        var bar = elemnt.getBoundingClientRect();
	        top = bar.top + document.body.scrollTop + 20;
	        left = bar.left;
	    }
	    this.getInternalContainer().style.top = top + "px";
	    this.getInternalContainer().style.left = left + "px";
	    */
    }

    this.binToElement = function(elementId) {
        //debugger;
        this.getInternalContainer();
        var element = document.getElementById(elementId);
        if (!this.containsBindElement(element)) {
            this.bindedElements.push(element);
            var blurHandler = function(e) {
                if (e != null && e.keyCode == 9)
                    _picker.hidePicker();
            }
            var focusHandler = function(e) {
                _picker.showPicker(element);
            }
            if (element.attachEvent) {
                element.attachEvent("onfocus", focusHandler);
                element.attachEvent("onkeydown", blurHandler);
            } else if (element.addEventListener) {
                element.addEventListener("focus", focusHandler, false);
                element.addEventListener("keydown", blurHandler, false);
            }
        }
    }
    
    this.setMonth = function(value) {
        this.curDate.setMonth(value);
        var contentXml = this.buidContent(null);
        setInnerHTML(this.getInternalContainer(), contentXml);
        this.pushDate();
    }
    
    this.setYear = function(value) {
        this.curDate.setFullYear(value);
        var contentXml = this.buidContent(null);
        setInnerHTML(this.getInternalContainer(), contentXml);
        this.pushDate();
    }
    
    this.moveNextMonth = function() {
        this.curDate.setMonth(this.curDate.getMonth() + 1);
        var contentXml = this.buidContent(null);
        setInnerHTML(this.getInternalContainer(), contentXml);
        this.pushDate();
    }
    
    this.movePrevMonth = function() {
        this.curDate.setMonth(this.curDate.getMonth() - 1);
        var contentXml = this.buidContent(null);
        setInnerHTML(this.getInternalContainer(), contentXml);
        this.pushDate();
    }

    this.setDate = function(value) {
        this.curDate.setDate(value);
        var contentXml = this.buidContent(null);
        setInnerHTML(this.getInternalContainer(), contentXml);
        this.pushDate();
        this.hidePicker();
    }
    
    this.pushDate = function() {
        if (this.currentElement != null) {
            var days = new String(this.curDate.getDate());
            if (days.length == 1)
                days = "0" + days;
            var month = new String(this.curDate.getMonth() + 1);
            if (month.length == 1)
                month = "0" + month;
            var year = new String(this.curDate.getFullYear());
            
            this.currentElement.value = days + "/" + month + "/" + year;
        }
    }
    
    this.setToday = function() {
        this.curDate = new Date();
        var contentXml = this.buidContent(null);
        setInnerHTML(this.getInternalContainer(), contentXml);
        this.pushDate();
    }
    
}