// JScript File

function vCalendar(divElement)
{
    this.monthNames = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    this.calDiv = $(divElement);
    
    if(!this.calDiv)
        return;
        
    this.hide();
    this.init();
        
    this.updateUI();
}

vCalendar.prototype = {

    init: function()
    {
        var el;
        var dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
        var d;
        var _Par;
        var _TitleBar
        
        this.addCssClass(this.calDiv, "vCal_content");
        
        _TitleBar = document.createElement("div");
        _TitleBar.className = "vCal_TitleBar";
        _TitleBar.ownerCal = this;
        _TitleBar.ondblclick = function(evt){ this.ownerCal.calTitleBar_DoubleClick(this, evt); };
        this.calDiv.appendChild(_TitleBar);

        el = document.createElement("div");        
        el.ownerCal = this;
        _TitleBar.appendChild(el);
        this.btnPrevMonth = el;
        this.btnPrevMonth.className = "vCal_btnPrevMonth"
        this.btnPrevMonth.innerHTML = "<";        
        this.btnPrevMonth.onmouseover = function(evt){ this.ownerCal.addCssClass(this, "vCal_btnMonthHover"); };
        this.btnPrevMonth.onmouseout = function(evt){ this.ownerCal.removeCssClass(this, "vCal_btnMonthHover"); };
        this.btnPrevMonth.onmousedown = function(evt){ this.ownerCal.calPrevMonthBtn_MouseDown(this, evt); };
            
        el = document.createElement("div");
        el.ownerCal = this;
        _TitleBar.appendChild(el);
        this.calendarTitleText = el;
        this.calendarTitleText.className = "vCal_TitleText";
        
        el = document.createElement("div");
        el.ownerCal = this;
        _TitleBar.appendChild(el);
        this.btnNextMonth = el;
        this.btnNextMonth.className = "vCal_btnNextMonth"
        this.btnNextMonth.innerHTML = ">";
        this.btnNextMonth.onmouseover = function(evt){ this.ownerCal.addCssClass(this, "vCal_btnMonthHover"); };
        this.btnNextMonth.onmouseout = function(evt){ this.ownerCal.removeCssClass(this, "vCal_btnMonthHover"); };
        this.btnNextMonth.onmousedown = function(evt){ this.ownerCal.calNextMonthBtn_MouseDown(this, evt); };
                
        _Par = document.createElement("div");
        _Par.className = "vCal_header";
        this.calDiv.appendChild(_Par);
        el = document.createElement("div");
        el.className = "vCal_header_weekIndicator";
        _Par.appendChild(el);
            
        for(d=0; d<dayNames.length; d++)
        {
            el = document.createElement("div");
            el.className = "vCal_header_day";
            el.innerHTML = dayNames[d];
            _Par.appendChild(el);
        }
        
        this.daysContainer =  document.createElement("div");
        this.daysContainer.className = "vCal_daysBlock";
        this.calDiv.appendChild(this.daysContainer);
        
        this.onDateChanged = null;
        this.onMonthSelected = null;
        this.onWeekSelected = null;
        this.SelectedDate = new Date();
        this.Visible = false;
        this.ShowWeekIndicator = true;
    },

    show: function()
    {
        if(!this.calDiv)
            return;
        this.calDiv.style.display = "block";
        this.calDiv.style.visibility = "visible";
        this.Visible = true;
    },
    
    hide: function()
    {
        if(!this.calDiv)
            return;    
        this.calDiv.style.display = "none";
        this.calDiv.style.visibility = "hidden";
        this.Visible = false;
    },    
    
    addCssClass : function(obj, name)
    {
        var cls = ($(obj)).className.split(' ');
    
        if(cls.indexOf(name)== -1)
        {
            ($(obj)).className += " " + name;
        }
    },
    
    removeCssClass : function(obj, name)
    {
        var cls = ($(obj)).className.split(' ');
        var newClasses;
    
        if(cls.indexOf(name)!= -1)
        {
            newClasses = "";
            for(var idx=0; idx < cls.length; idx++)
            {
                if(cls[idx] == name)
                 continue;
                newClasses += cls[idx] + " ";
            }
            ($(obj)).className = newClasses;
        }    
    },
    
    
    /* 
       updateUI();
       ---------------------------------------------------------------------------
       Called to render the current view of the callendar (the days bloc) based on
       the current visible month 
    */
    updateUI: function()
    {        
        var _tm;
        var _firstDay;
        var _curMonth;
        var _curYear;
        var _curDay;
                
        /*get current system date */
        _tm = new Date();            
        _curDay = parseInt(_tm.getDate());
        _curMonth = parseInt(_tm.getMonth()) + 1;
        _curYear = parseInt(_tm.getFullYear());
        
        this.calDiv.currentDay = _curDay;       
        this.calDiv.currentMonth = _curMonth;
        this.calDiv.currentYear = _curYear;
        
        /* if this is the first time we use this calendar object */
        if(!(this.calDiv.visibleMonth) || !(this.calDiv.visibleYear))
        {         
            /* and set the current date as the visible date */
            this.calDiv.visibleMonth = parseInt(this.SelectedDate.getMonth()) + 1;
            this.calDiv.visibleYear = parseInt(this.SelectedDate.getFullYear());                        
        }

        /* determine the day of the week the first of the month falls on*/
        _firstDay = new Date(this.calDiv.visibleMonth + "/" + "1" + "/" + this.calDiv.visibleYear);
            
        /* set the value for the first day or the visible month */
        this.calDiv.visibleMonthFirstDay = _firstDay.getDay();
                           
        /* set the calendar title to the current month, and the current year */
        this.calendarTitleText.innerHTML = this.monthNames[this.calDiv.visibleMonth-1] + "  " + this.calDiv.visibleYear.toString();
        
        /* remove the current day elemnts if there are any */
        this.clearDayBlocks();
        
        /* and add new ones for the current view */
        this.addDayBlocks();
    },
    
    SetSelectedDate: function(newSelDate)
    {
        if(!this.calDiv)
            return;
        this.SelectedDate = newSelDate;
        this.calDiv.visibleMonth = parseInt(this.SelectedDate.getMonth()) + 1;
        this.calDiv.visibleYear = parseInt(this.SelectedDate.getFullYear());
        this.updateUI();
    },


    calTitleBar_DoubleClick : function(sender, evt)
    {
        try
        {
            if(this.onMonthSelected)
            { 
                this.onMonthSelected(this.calDiv.visibleMonth, this.calDiv.visibleYear);
            }        
        }catch(err)
        {
            //in case of error don't do anything
        }           
    },

    calWeek_Click : function(sender, evt)
    {
        try
        {
            if(this.onWeekSelected)
            { 
                this.onWeekSelected(sender.weekStartMonth,sender.weekStartDay,sender.weekStartYear);
            }        
        }catch(err)
        {
            //in case of error don't do anything
        }           
    },
    
    /* 
       calPrevMonthBtn_MouseDown(sender, evt);
       ---------------------------------------------------------------------------
       
       Handles mouse down events on the Previous Month button on the calendar title
    */    
    calPrevMonthBtn_MouseDown : function(sender, evt)
    {
        try
        {
            if(this.calDiv.visibleMonth-- == 1)
            {
                this.calDiv.visibleMonth = 12;
                this.calDiv.visibleYear--;
            }
        }catch(err)
        {
            //in case of error don't do anything
        }   
        
        this.updateUI();
    },


    /* 
       calNextMonthBtn_MouseDown(sender, evt);
       ---------------------------------------------------------------------------
       
       Handles mouse down events on the Next Month button on the calendar title
    */ 
    calNextMonthBtn_MouseDown : function(sender, evt)
    {
        try
        {
            if(this.calDiv.visibleMonth++ == 12)
            {
                this.calDiv.visibleMonth = 1;
                this.calDiv.visibleYear++;
            }
        }catch(err)
        {
            //in case of error don't do anything
        }
        
        this.updateUI();
    },


    /* 
       clearDayBlocks();
       ---------------------------------------------------------------------------
       
       Removes all elements that are inside the days block element, making room
       for new ones.
    */    
    clearDayBlocks : function()
    {
        var _nodeList;
        
        _nodeList = this.daysContainer.getElementsByTagName("div");
        while(_nodeList.length > 0)
        {
            this.daysContainer.removeChild(_nodeList[0]);
            _nodeList = this.daysContainer.getElementsByTagName("div");
        }
    },
    
    dayClick : function(sender, evt)
    {
        var newDate;
        
        this.addCssClass(sender, 'vCal_dayToday');
        
        this.SelectedDate = new Date(sender.Month + "/" + sender.Day + "/" + sender.Year);
        if(this.onDateChanged)
        { 
            this.onDateChanged(this.SelectedDate);
        }
        this.updateUI();
    },
    
    createDayBlock :function(startDow, dayNo, currentMonth, currentYear, currentMonthLength)
    {
        var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        var el;
        
        if(currentYear % 4 == 0) 
            monthDays[1] = 29;
        else 
            monthDays[1] = 28;
        
        el = document.createElement("div");
        el.className = "vCal_day";
        el.ownerCal = this;
        el.onmouseover = function(evt){ this.ownerCal.addCssClass(this, "vCal_dayHover"); };
        el.onmouseout = function(evt){ this.ownerCal.removeCssClass(this, "vCal_dayHover"); };
        el.onmousedown = function(evt){ this.ownerCal.dayClick(this, evt); };
        el.Day = dayNo - startDow;
        el.Month = currentMonth;
        el.Year = currentYear;
        if((dayNo < 7) && (dayNo <= startDow))
        {
            el.className += " vCal_dayPrevMonth";
            if(currentMonth>1)
                el.Day = monthDays[currentMonth-2] - (startDow - dayNo);
            else
                el.Day = monthDays[11] - (startDow - dayNo);
            el.Month = currentMonth-1;
            if(el.Month == 0)
            {
                el.Month = 12;
                el.Year--;
            }            
        }else if((dayNo > 7) && ((dayNo - startDow) > monthDays[currentMonth-1]))
        {      
            el.className += " vCal_dayNextMonth";
            el.Day -= monthDays[currentMonth-1];
            el.Month = currentMonth+1;
            if(el.Month == 13)
            {
                el.Month = 1;
                el.Year++;
            }
        }
        el.innerHTML = el.Day.toString();
        return el;
    },


    calculateWeekStartDate :function(startDow, dayNo, currentMonth, currentYear, currentMonthLength)
    {
        var to = [0,0,0];
        var to_day;
        var to_month;
        var to_year;
        var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        
        if(currentYear % 4 == 0) 
            monthDays[1] = 29;
        else 
            monthDays[1] = 28;
        
        to_day = dayNo - startDow;
        to_month = currentMonth;
        to_year = currentYear;
        if((dayNo < 7) && (dayNo <= startDow))
        {
            if(currentMonth > 1)
                to_day = monthDays[currentMonth-2] - (startDow - dayNo);
            else
                to_day = monthDays[11] - (startDow - dayNo);
            to_month = currentMonth-1;
            if(to_month == 0)
            {
                to_month = 12;
                to_year--;
            }            
        }else if((dayNo > 7) && ((dayNo - startDow) > monthDays[currentMonth-1]))
        {      
            to_day -= monthDays[currentMonth-1];
            to_month = currentMonth+1;
            if(to_month == 13)
            {
                to_month = 1;
                to_year++;
            }
        }
        to = [to_day,to_month,to_year];
        return to;
    },

    /* 
       addDayBlocks();
       ---------------------------------------------------------------------------
       
       Generate each the appropriate element for each day that is to be displayed
       and append it to the dayRows
       
       The day block that represents today's date will have 
       vCal_dayToday class applied to it.
       
       The day block that represents the currently selected date will have 
       vCal_daySelected class applied to it.
    */    
    addDayBlocks : function()
    {
        var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        var el;
        var _curRow;
        var i,r;
        var _totalRows;
        var tmpO;
               
        /* calculate whether we are going to need 5 or 6 rows to display all days */
        _totalRows = 6;
        if((36 - this.calDiv.visibleMonthFirstDay) >= monthDays[this.calDiv.visibleMonth - 1])
            _totalRows = 5;
        
        /* start populating the rows with day elements */
        for(r=0; r<_totalRows; r++)
        {
            el = document.createElement("div");
            el.className = "vCal_dayRow";
            this.daysContainer.appendChild(el);
            _curRow = el;
            
            el = document.createElement("div");
            el.className = "vCal_weekIndicator";
            el.rowNo = r;
            tmpO = this.calculateWeekStartDate(this.calDiv.visibleMonthFirstDay, r*7 + 1, this.calDiv.visibleMonth, this.calDiv.visibleYear, monthDays[this.calDiv.visibleMonth - 1]);            
            el.weekStartDay = tmpO[0];
            el.weekStartMonth = tmpO[1];
            el.weekStartYear = tmpO[2];
            el.ownerCal = this;
            el.ondblclick = function(evt){ this.ownerCal.calWeek_Click(this, evt); };
            _curRow.appendChild(el);
            
            for(i=1; i<=7; i++)
            {
                el = this.createDayBlock(this.calDiv.visibleMonthFirstDay, i+r*7, this.calDiv.visibleMonth, this.calDiv.visibleYear, monthDays[this.calDiv.visibleMonth - 1]);
                _curRow.appendChild(el);
                                                
                if((this.calDiv.currentDay == el.Day) && (this.calDiv.currentMonth == el.Month) && (this.calDiv.currentYear == el.Year))
                {
                    el.className += " vCal_dayToday";
                }
                
                if((this.SelectedDate.getDate() == el.Day) && ((this.SelectedDate.getMonth()+1) == el.Month) && (this.SelectedDate.getFullYear() == el.Year))
                {
                    el.className += " vCal_daySelected";
                }                
            }
        }            
    }    
}



function TimeSpinner(divElement)
{
    this.divEl = $(divElement);
    
    
    if(!this.divEl)
        return;
    
    //this.hide();
    this.init();
}

TimeSpinner.prototype = {

    init: function()
    {
        var _el;
        var _el2;
                
        this.addCssClass(this.divEl, "TimeSpinner");

        this.hourBox = document.createElement("select");
        this.hourBox.className = "TimeSpinner_HourBox";
        this.divEl.appendChild(this.hourBox);
        this.hourBox.owner = this;
        this.hourBox.onchange = function(evt) { this.owner.HourChanged(this, evt); };
        for(i=1; i<=12; i++)
        {
            _el = document.createElement("option");
            _el.value = i;
            _el.innerHTML = i;
            this.hourBox.appendChild(_el);
        }
        
        _el = document.createElement("div");
        _el.className = "TimeSpinner_HourButtonsContainer";
        this.divEl.appendChild(_el);

        _el2 = document.createElement("img");       // img
        _el2.setAttribute("src", "App_Themes/BlackAndWhite/imgs/calendar/arrow_up.gif");        // src, path
        _el2.className= "TimerSpinner_ButtonHourUp";
        _el2.onmouseover = function(evt) { this.owner.ButtonHourUp_MouseOver(this, evt); };
        _el2.onmouseout = function(evt) { this.owner.ButtonHourUp_MouseOut(this, evt); };
        _el2.onmousedown = function(evt) { this.owner.ButtonHourUp_Click(this, evt); };
        _el2.owner = this;
        _el.appendChild(_el2);
        
        _el2 = document.createElement("img");
        _el2.setAttribute("src", "App_Themes/BlackAndWhite/imgs/calendar/arrow_dn.gif");
        _el2.className= "TimerSpinner_ButtonHourDown"; 
        _el2.onmouseover = function(evt) { this.owner.ButtonHourDn_MouseOver(this, evt); };
        _el2.onmouseout = function(evt) { this.owner.ButtonHourDn_MouseOut(this, evt); };
        _el2.onmousedown = function(evt) { this.owner.ButtonHourDn_Click(this, evt); };        
        _el2.owner = this;
        _el.appendChild(_el2);
        
        this.minBox = document.createElement("select");
        this.divEl.appendChild(this.minBox);
        this.minBox.owner = this;        
        this.minBox.className = "TimeSpinner_MinnuteBox";
        this.minBox.onchange = function(evt) { this.owner.MinuteChanged(this, evt); };
        for(i=0; i<12; i++)
        {
            _el = document.createElement("option");
            _el.value = i*5;
            if(i < 2)
                _el.innerHTML = "0" + i*5;
            else            
                _el.innerHTML = i*5;
            this.minBox.appendChild(_el);
        }        
        
        
        this.ampmBox = document.createElement("select");
        this.divEl.appendChild(this.ampmBox);
        this.ampmBox.owner = this;        
        this.ampmBox.className = "TimeSpinner_AmpmBox";
        this.ampmBox.onchange = function(evt) { this.owner.AmpmChanged(this, evt); };
            _el = document.createElement("option");
            _el.value = 0;
            _el.innerHTML = "AM";
            this.ampmBox.appendChild(_el);
            _el = document.createElement("option");
            _el.value = 1;
            _el.innerHTML = "PM";
            this.ampmBox.appendChild(_el);
        _el = document.createElement("div");
        _el.className = "TimeSpinner_BottomSpacer";        
        this.divEl.appendChild(_el);
                      
        this.onTimeChanged = null;
        this.SelectedHour = 12;
        this.SelectedMinute = 0;
        this.SelectedPM = 0;
        this.Visible = false;
    },

    show: function()
    {
        this.divEl.style.display = "block";
        this.divEl.style.visibility = "visible";
        this.Visible = true;
    },
    
    hide: function()
    {
        this.divEl.style.display = "none";
        this.divEl.style.visibility = "hidden";
        this.Visible = false;
    },    
    
    addCssClass : function(obj, name)
    {
        var cls = ($(obj)).className.split(' ');
    
        if(cls.indexOf(name)== -1)
        {
            ($(obj)).className += " " + name;
        }
    },
    
    removeCssClass : function(obj, name)
    {
        var cls = ($(obj)).className.split(' ');
        var newClasses;
    
        if(cls.indexOf(name)!= -1)
        {
            newClasses = "";
            for(var idx=0; idx < cls.length; idx++)
            {
                if(cls[idx] == name)
                 continue;
                newClasses += cls[idx] + " ";
            }
            ($(obj)).className = newClasses;
        }    
    },

    AmpmChanged : function(sender, evt)
    {        
        var vAmpm = parseInt(sender.options[sender.selectedIndex].value);

        sender.owner.SelectedPM = vAmpm;        
    },
    
    HourChanged : function(sender, evt)
    {        
        var vHour = parseInt(sender.options[sender.selectedIndex].value);

        sender.owner.SelectedHour = vHour;        
    },

    MinuteChanged : function(sender, evt)
    {        
        var vMinute = parseInt(sender.options[sender.selectedIndex].value);

        sender.owner.SelectedMinute = vMinute;        
    }           
}