/*

 * $Id: CalendarLayout.js,v 1.4 2006/03/07 13:40:00 hack Exp $

 * Copyright 2003,2004 WorldTicket A/S
 *

 * @version $Revision: 1.4 $ $Date: 2006/03/07 13:40:00 $

 * @author Claus Br¿ndby Reimer (CBR) / 2M business applications a|s

 */





/**

 * The default layout for the <code>Calendar</code>.

 *

 * <p>This layout could be improved alot, by not redrawing every thing when

 * something changes, but for now it most be okay...</p>

 *

 * <p>If you want to alter the layout then just do it, but if you want more than

 * one then use this as a template, the only method which is called from the

 * Calendar is doLayout

 */

function CalendarLayout() {

    this.locale;



    this.locale = CalendarLocaleFactory.getLocale();

}





/**

 * Creates CalendarLayout

 *

 * @param selectedDate_Date the date to show as selected.

 * @param minimumDate_Date the first selectable date.

 * @param maximumDate_Date The last selectable date.

 */

CalendarLayout.prototype.doLayout = function(selectedDate, minimumDate, maximumDate, enabled) {

    var sb;



    if (!enabled) {

        return "";

    }



    sb = new StringBuilder();

    sb.push('<table cellpadding="0" cellspacing="0" border="0" width="200">');

    sb.push('   <tr><td height="3"></td></tr>');

    sb.push('   <tr>');

    sb.push('       <td>');

    this.createHeader(sb, selectedDate);

    sb.push('       </td>');

    sb.push('   </tr>');

    sb.push('   <tr><td height="3"></td></tr>');

    sb.push('   <tr>');

    sb.push('       <td>');

    sb.push('           <table cellpadding="0" cellspacing="0" width="100%">');

    this.createWeekHeader(sb);

    this.createDates(sb, selectedDate, minimumDate, maximumDate);

    sb.push('           </table>');

    sb.push('       </td>');

    sb.push('   </tr>');

    sb.push('</table>');



    return sb.toString();

}





/**

 * Creates the header HTML

 *

 * @param sb_StringBuilder A <code>StringBuilder</code> to add the HTML in.

 * @param selectedDate_Date The date to show as selected.

 */

CalendarLayout.prototype.createHeader = function(sb, selectedDate) {

    var months;

    var prev;

    var next;



    if (lang_monthnames.length < 12) {
        months = this.locale.getMonths();
    } else {
        months = lang_monthnames;
    }



    prev = 'CalendarElement.findObj(this).add(Calendar.MONTH, -1)';

    next = 'CalendarElement.findObj(this).add(Calendar.MONTH, 1)';



    sb.push('<table cellspacing="0" cellpadding="0" border="0" width="100%" class="calendarTitle">');

    sb.push('   <tr>');

    sb.push('       <td class="title">');

    sb.push('                ' + months[selectedDate.getMonth()] + ' ' + selectedDate.getFullYear());

    sb.push('       </td>');

    sb.push('       <td align="right" valign="center" class="booking_page_1_headline" style="padding-right:0px;">');

    sb.push('           <img onclick="' + prev + '" src="js/calendar/prev.gif" border="0" alt="previous month">');

    sb.push('           <img onclick="' + next + '" src="js/calendar/next.gif" border="0" alt="next month">');

    sb.push('       </td>');

    sb.push('   </tr>');

    sb.push('</table>');

}





/**

 * Creates the week day header.

 *

 * @param sb_StringBuilder The <code>StringBuilder</code> to add the HTML in.

 */

CalendarLayout.prototype.createWeekHeader = function(sb) {

    var weekDays;

    var weekStart;



    weekDays = this.locale.getWeekDays();

    weekStart = this.locale.getWeekStart();



    sb.push('<tr>');

    sb.push('   <td bgcolor="#b3b3b3"><img src="img/spacer.gif" width="1" height="0"></td>');

    for (var i = 0; i < 7; i++) {

        sb.push('<td bgcolor="#b3b3b3" align="center" style="border: 1px solid #b3b3b3;">');

        sb.push('  <font color="white" face="arial, verdana" size="2">');

        sb.push(        weekDays[(weekStart + i) % 7]);

        sb.push('   </font>');

        sb.push('</td>');

    }

    sb.push('</tr>');

}





/**

 * Creates the calendar dates table.

 *

 * @param sb_StringBuilder A <code>StringBuilder</code> to add the HTML in.

 * @param selectedDate_Date The date to show as selected.

 * @param minimumDate_Date The first selectable date.

 * @param maximumDate The last selectableDate.

 */

CalendarLayout.prototype.createDates = function(sb, selectedDate, minimumDate, maximumDate) {

    var loopingDate;

    var firstDay;

    var color;

    var textColor;

    var inCalendar

    var styleClass;

    var call;



    firstDay = new Date(selectedDate);

    firstDay.setDate(1);

    firstDay.setDate(1 - (7 + firstDay.getDay() - this.locale.getWeekStart())%7);

    loopingDate = new Date(firstDay);





    while (loopingDate.getMonth() == selectedDate.getMonth() || loopingDate.getMonth() == firstDay.getMonth()) {

        sb.push('<tr>');

        sb.push('   <td bgcolor="#b3b3b3"><img src="img/spacer.gif" width="1" height="0"></td>');



        for (var i = 0; i < 7; i++) {

            color = "";

            textColor = "";

            inCalendar = ((loopingDate >= minimumDate) && (loopingDate <= maximumDate) ? true : false);

            styleClass = "";



            if (loopingDate.getDate() == selectedDate.getDate() && loopingDate.getMonth() == selectedDate.getMonth()) {

                // Selected date

                color = '#B2C4D8';

                styleClass = 'selectedDay';

            } else if (loopingDate.getDay() == 0 || loopingDate.getDay() == 6) {

                // Weekend days

                color = '#f5f5f5';

                styleClass = 'weekend';

            } else {

                // Working days

                color = '#FFFFFF';

                styleClass = 'workday';

            }



            if (inCalendar) {

                call = 'CalendarElement.findObj(this).set(Calendar.DATE,' +  loopingDate.getDate() + ')';

                sb.push('   <td class="' + styleClass + '" bgcolor="' + color + '" align="center"');

                sb.push(' onClick="javascript:' + call + ';  calendaroff(1); calendaroff(2);"');

                sb.push(' style="cursor: pointer; cursor: hand;border-bottom: 1px solid #b3b3b3; border-right: 1px solid #b3b3b3;padding: 3px 3px 3px 3px;"');

            } else {

                sb.push('   <td class="' + styleClass + '" bgcolor="' + color + '" align="center"');

                sb.push(' style="border-bottom: 1px solid #b3b3b3; border-right: 1px solid #b3b3b3;padding: 3px 3px 3px 3px;"');

            }



            sb.push('>');



            if (loopingDate.getMonth() == selectedDate.getMonth() && inCalendar) {

                // Selected month

                textColor = "black";

            } else {

                // Other months

                textColor = "#AAAAAA";

            }



            sb.push('<font color="' + textColor + '" face="arial, verdana" size="2">');

            sb.push(loopingDate.getDate() + '</font></td>');

            loopingDate.setDate(loopingDate.getDate() + 1);

        }

        sb.push('</tr>');

    }

}