//there have a class named 'Calender' which is using for draw calender control at client side
//DEPENDENCIES:
//          Here we use some function those are declared in following .js file/s
//          ______________________________________________________________________________________________
//          FILE                    FUNCTION
//          ______________________________________________________________________________________________
//          CommonUtility.js        addEvent(element,event,functionRefrence,capture)
//                                  findAbsPos(element)


var CULTURE_DAY_NAMES=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var CULTURE_SHORTDAY_NAMES=["Su","Mo","Tu","We","Th","Fr","Sa"];
var CULTURE_ABBDAY_NAMES=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
var CULTURE_MONTH_NAMES=["January","February","March","April","May","June","July","August","September","October","November","December",""];
var CULTURE_ABBMONTH_NAMES=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""];
var CULTURE_DATE_FORMAT="m/d/yyyy";
var CULTURE_LONGDATE_FORMAT="dddd, mmmm dd, yyyy";
var CULTURE_TIME_FORMAT="h:mm tt";
var CULTURE_START_DAY_OF_WEEK=0;
var CULTURE_DIGITS=["0","1","2","3","4","5","6","7","8","9"];
var CULTURE_AM="AM";
var CULTURE_PM="PM";
var REQUEST_TIMEOUT=100000;
var TIMEOUTPAGE="/timeout.htm";
var defaultDialogSetting={Height:"300px",Width:"300px",CssClass:"dialog",HeaderCssClass:"dialogHeader",ContentAreaCssClass:"dialogContent",Title:"Dialog Box",CloseImageUrl:"~/Images/winclose.gif"};
var dialogsSetting=new Array();






//==============================FOR CALENDER CLASS================================================================================================================







function Calender(){
    //private variables
    var this_ref=this;
    var one_day=1000*60*60*24;
    var curr_container=null;
    var cmbMonth=null;
    var cmbYear=null;
    var tbody_ref=null;
    var curr_year=null;
    var isDrawn=false;//if calender is render successfully
    
    //public variables
    this.isPopup=false;
    this.curr_date=null;
    this.days_name=CULTURE_DAY_NAMES;
    this.days_short_name=CULTURE_SHORTDAY_NAMES;
    this.months_name=CULTURE_MONTH_NAMES;
    this.monthSelectChars="»";
    this.weekSelectChars="›";
    this.dateFormat=CULTURE_DATE_FORMAT;
    this.startDayIndex=CULTURE_START_DAY_OF_WEEK;//new one
    this.selectedDate=this_ref.curr_date;
    this.selectedRange=formateDate(new Date());
    this.selectedLocalRange=new Date();//new one
    this.selectedClass="selected";
    this.otherMonthDate="otherMonthDate";
    this.enableRangeSelection=false;
    
    
    //public events
    this.onDateClick=null;
    this.onWeekClick=null;
    this.onMonthClick=null;
    
    //public properties
    this.setCurrentDate=function(date){
        try{
            this_ref.curr_date=date;
            this_ref.selectedDate=date;
            
            this_ref.selectedRange=new Array();
            this_ref.selectedLocalRange=new Array();
            this_ref.selectedRange.push(formateDate(this_ref.selectedDate));
            this_ref.selectedLocalRange.push(this_ref.selectedDate);
            if(isDrawn) refreshSelectedRange();
       }
       catch(e){
            alert("Invalid Date: " + e.message);
       }
    }
    //______________________________________________________________________
    this.setSelectedRange=function(dateArray){
        try{
            this_ref.curr_date=new Date(dateArray[0]);
            this_ref.selectedRange=new Array();
            
            if(isNaN(this_ref.curr_date)) this_ref.curr_date=new Date();
            else{
                this_ref.selectedLocalRange=dateArray;
                for(var dIndex=0; dIndex<dateArray.length; dIndex++){
                    this_ref.selectedRange.push(formateDate(new Date(dateArray[dIndex])));
                }
            }
            
            this_ref.selectedDate=this_ref.curr_date;
            if(isDrawn) refreshSelectedRange();
        }
        catch(e){
            alert(e.message);
        }
    }
        
    //set default currnt date
   
    this_ref.setCurrentDate(new Date());
    
    //parameter [container] may be a div
    this.draw=function(container){
        curr_year=cmbYear!=null?cmbYear.value:calculateYear(this_ref.curr_date.getYear());
        curr_container=container;
        curr_container.innerHTML="";
        //drawing
        try{
            if(this_ref.isPopup) drawTitleBar(container);
            
            var table=document.createElement("table");//start table
            table.cellSpacing=0;
            table.setAttribute("border","0");
            
            var thead=document.createElement("thead");//start thead
            var header_row=document.createElement("tr");//start div
            drawHeaderRow(header_row);
            thead.appendChild(header_row);//end div            
            var thead_tr=document.createElement("tr");//start tr
            var td;
            
            //draw left select bar
            
            td=document.createElement("td");
                if(this_ref.enableRangeSelection){
                    td.innerHTML=this_ref.monthSelectChars;
                    td.className="weekSel";
                    addEvent(td,"click",onClick=function(e){__selectedMonthRange((typeof e.target!="undefined")?e.target:e.srcElement);},false);
                }
                else{
                    td.innerHTML="&nbsp;";
                }
            thead_tr.appendChild(td);
            
            //draw day names
            if(this_ref.startDayIndex<0) this.startDayIndex=0;
            for(var d_index=this_ref.startDayIndex;d_index<this_ref.days_name.length;d_index++){
                td=document.createElement("td");
                td.innerHTML=this_ref.days_name[d_index];
                thead_tr.appendChild(td);
            }
            for(var d_index=0;d_index<this_ref.startDayIndex;d_index++){
                td=document.createElement("td");
                td.innerHTML=this_ref.days_name[d_index];
                thead_tr.appendChild(td);
            }    
            
            thead.appendChild(thead_tr);
            table.appendChild(thead);//end thead
         
            var tbody=document.createElement("tbody");//start tbody
            tbody_ref=tbody;               
            var tbody_tr;
            
            var tmp_date=new Date();
            tmp_date.setFullYear(calculateYear(this_ref.curr_date.getYear()),this_ref.curr_date.getMonth(),1);
            var subvalue=(tmp_date.getDay()>=this_ref.startDayIndex)?(tmp_date.getDay()-this_ref.startDayIndex):(this_ref.days_name.length-this_ref.startDayIndex)+tmp_date.getDay();
                
            var date_counter=this_ref.subtract(tmp_date,subvalue);//get day will return day index in week(i.e. weekday)
            
            var day;
            for(var w_index=0;w_index<6;w_index++){
                tbody_tr=document.createElement("tr");//start tr
                
                for(var d_index=-1;d_index<this_ref.days_name.length;d_index++){
                    td=document.createElement("td");
                    if(d_index>=0){
                        day=date_counter.getDate();
                        
                        td.innerHTML="<span style='display:none'>" + date_counter + "</span>" + (day.toString().length>1?CULTURE_DIGITS[parseInt(day/10)]:"") + CULTURE_DIGITS[parseInt(day%10)];
                        addEvent(td,"click",onClick=function(e){__onDateClick((typeof e.target!="undefined")?e.target:e.srcElement);},false);                           
                        date_counter=this_ref.nextDay(date_counter);
                    }
                    else{
                        if(this_ref.enableRangeSelection){
                            td.className="weekSel";
                            addEvent(td,"click",onClick=function(e){__selectedWeekRange((typeof e.target!="undefined")?e.target:e.srcElement);},false);
                            td.innerHTML=this_ref.weekSelectChars;
                        }
                        else td.innerHTML="&nbsp;";
                    }
                    tbody_tr.appendChild(td);
                }//end for
                
                tbody.appendChild(tbody_tr);
                
                if((date_counter.getMonth()>this_ref.curr_date.getMonth()) || (calculateYear(date_counter.getYear())!=calculateYear(this_ref.curr_date.getYear()))) break;
            }//end for
            table.appendChild(tbody);//end tbody
            container.appendChild(table);//end table
            
            isDrawn=true;
            refreshSelectedRange();
        }//end try
        catch(e){
            alert(e.message);
        }//end catch
    }//end draw
    //________________________________________________________________________________
    function drawTitleBar(){
        var titleBar=document.createElement("div");
        titleBar.className="titleBar";
        
        var titleText=document.createElement("span");
        titleText.innerHTML=this_ref.months_name[this_ref.curr_date.getMonth()] + ", " + calculateYear(this_ref.curr_date.getYear());
        titleBar.appendChild(titleText);
        
        var closeButton=document.createElement("div");
        closeButton.className="closeButton";
        addEvent(closeButton,"click",onClick=function(e){curr_container.style.display="none";},false);
        titleBar.appendChild(closeButton);
        curr_container.appendChild(titleBar);
    }
    //________________________________________________________________________________
    function drawHeaderRow(rowEle){
        var prev_td=document.createElement("td");
        var btnPrev=document.createElement("a");
        //btnPrev.type="a";
        btnPrev.className="calButton";
        btnPrev.innerHTML="&laquo;";
        addEvent(btnPrev,"click",__moveToPrevMonth,false);
        prev_td.appendChild(btnPrev);
        rowEle.appendChild(prev_td)
        
        var month_td=document.createElement("td");
        month_td.colSpan=3;
        cmbMonth=document.createElement("select");
        var option;
        for(var m_index=0;m_index<this_ref.months_name.length;m_index++){
            option=document.createElement("option");
            option.value=m_index;
            if(this_ref.curr_date.getMonth()==m_index) option.selected="selected";
            option.innerHTML=this_ref.months_name[m_index];
            cmbMonth.appendChild(option);
        }
        addEvent(cmbMonth,"change",__changeMonthYear,false);
        month_td.appendChild(cmbMonth);
        rowEle.appendChild(month_td);
        
        var year_td=document.createElement("td");
        year_td.colSpan=3;
        cmbYear=document.createElement("select");
        
        var charArray;
        var yearAsString;
        for(var y_index=parseInt(curr_year) - 20;y_index<=parseInt(curr_year) + 10;y_index++){
            option=document.createElement("option");
            option.value=y_index;            
            if(calculateYear(this_ref.curr_date.getYear())==y_index) option.selected="selected";
            charArray=new Array();
            yearAsString=y_index.toString();
            
            for(var c_index=0;c_index<yearAsString.length;c_index++){
               charArray.push(CULTURE_DIGITS[parseInt(yearAsString.charAt(c_index))]);
            }
            
            option.innerHTML=charArray.join("");
            cmbYear.appendChild(option);
        }
        addEvent(cmbYear,"change",__changeMonthYear,false);
        
        year_td.appendChild(cmbYear);
        rowEle.appendChild(year_td);
        
        var prev_td=document.createElement("td");
        var btnNext=document.createElement("a");
        btnNext.className="calButton";
        btnNext.innerHTML="&raquo;";
        addEvent(btnNext,"click",__moveToNextMonth,false);
        prev_td.appendChild(btnNext);
        rowEle.appendChild(prev_td);
    }
    //________________________________________________________________________________
    function __onDateClick(ele){
        this_ref.selectedDate=new Date(ele.getElementsByTagName("span")[0].innerHTML);
        this_ref.selectedRange=new Array();
        this_ref.selectedLocalRange=new Array();
        this_ref.selectedRange.push(formateDate(this_ref.selectedDate));
        this_ref.selectedLocalRange.push(this_ref.selectedDate);
        
        if(isPrviousMonthDate(this_ref.selectedDate)){
            __moveToPrevMonth();
        }
        else if(isNextMonthDate(this_ref.selectedDate)){
            __moveToNextMonth();
        }
        else{
            refreshSelectedRange();
            if(this_ref.onDateClick!=null) this_ref.onDateClick(this_ref.selectedRange);   
        }
    }
    
    //________________________________________________________________________________
    function __moveToNextMonth(){
        
        var tmp_date=new Date();
        try{
            if(this_ref.curr_date.getMonth()!=11)
                tmp_date.setFullYear(calculateYear(this_ref.curr_date.getYear()),this_ref.curr_date.getMonth()+1,this_ref.curr_date.getDate());
            else
                tmp_date.setFullYear(calculateYear(this_ref.curr_date.getYear())+1,0,this_ref.curr_date.getDate());
        }    
        catch(e){
            alert(e.message);
        }
        this_ref.curr_date=tmp_date;
        this_ref.draw(curr_container);
    }    
    //________________________________________________________________________________
    function __moveToPrevMonth(){
        
        var tmp_date=new Date();
        try{
            if(this_ref.curr_date.getMonth()!=0)
                tmp_date.setFullYear(calculateYear(this_ref.curr_date.getYear()),this_ref.curr_date.getMonth()-1,this_ref.curr_date.getDate());
            else
                tmp_date.setFullYear(calculateYear(this_ref.curr_date.getYear())-1,11,this_ref.curr_date.getDate());
        }    
        catch(e){
            alert(e.message);
        }
        this_ref.curr_date=tmp_date;
        this_ref.draw(curr_container);
    }
    //________________________________________________________________________________
    function __changeMonthYear(){
        var tmp_date=new Date();
        tmp_date.setFullYear(cmbYear.value,cmbMonth.value,1);
        this_ref.curr_date=tmp_date;
        this_ref.draw(curr_container);
    }
    //________________________________________________________________________________
    function __selectedWeekRange(ele){
        var tds=ele.parentNode.getElementsByTagName("td");
        var tmpDate;
                        
        this_ref.selectedRange=new Array();
        this_ref.selectedLocalRange=new Array();
        
        for(var d_index=1;d_index<tds.length;d_index++){
            tmpDate=new Date(tds[d_index].getElementsByTagName("span")[0].innerHTML);
            this_ref.selectedRange.push(formateDate(tmpDate));
            this_ref.selectedLocalRange.push(tmpDate);
        }
        
        refreshSelectedRange();
        
        if(this_ref.onWeekClick!=null) this_ref.onWeekClick(this_ref.selectedRange);
    }
     
    //________________________________________________________________________________
    function __selectedMonthRange(ele){
        var tbody=ele.parentNode.parentNode.parentNode.getElementsByTagName("tbody")[0];
                                       
        var trs=tbody.getElementsByTagName("tr");
        var tds;
        var value;
        this_ref.selectedRange=new Array();
        this_ref.selectedLocalRange=new Array();
        //sel_range=new Array();
        
        for(var t_index=0;t_index<trs.length;t_index++){
            
            tds=trs[t_index].getElementsByTagName("td");
            for(var d_index=1;d_index<tds.length;d_index++){
                value=new Date(tds[d_index].getElementsByTagName("span")[0].innerHTML);
                if(value.getMonth()==this_ref.curr_date.getMonth()){
                    this_ref.selectedRange.push(formateDate(value));
                    this_ref.selectedLocalRange.push(value);
                    //sel_range.push(value);
                }
            }
        }
        refreshSelectedRange();
        if(this_ref.onMonthClick!=null) this_ref.onMonthClick(this_ref.selectedRange);
    }
    
    //________________________________________________________________________________
    function refreshSelectedRange(){            
        var trs=tbody_ref.getElementsByTagName("tr");
        var tds;
        var tmp_date;
        var initValue=0;
        
        for(var row_index=0;row_index<trs.length;row_index++){
            tds=trs[row_index].getElementsByTagName("td");
                                    
            for(var col_index=1;col_index<tds.length;col_index++){
                tmp_date=new Date(tds[col_index].getElementsByTagName("span")[0].innerHTML);
                
                if(!isThisMonthDate(tmp_date)) tds[col_index].className=this_ref.otherMonthDate;
                else tds[col_index].className="";
                 if(this_ref.selectedRange!=null){
                    for(var d_index=initValue;d_index<this_ref.selectedLocalRange.length;d_index++){
                        if(tmp_date.toLocaleDateString()==(new Date(this_ref.selectedLocalRange[d_index])).toLocaleDateString()){
                            tds[col_index].className=this_ref.selectedClass;
                            initValue++;
                            break;
                        }//end if
                    }//end for
                }//end if
            }//end for
        }//end for
    }//end function
    
    //________________________________________________________________________________
    //get first date of previous month of given day
    this.nextMonth=function(date){
        var tmp_date=new Date();
        tmp_date.setTime(Math.ceil(date.getTime() + one_day));
        return tmp_date;
    }    
    //________________________________________________________________________________
    //get next day of given day
    this.nextDay=function(date){
        var tmp_date=new Date();
        tmp_date.setTime(Math.ceil(date.getTime() + one_day));
        return tmp_date;
    }        
    //________________________________________________________________________________
    //get prev day of given day
    this.prevDay=function(date){
        var tmp_date=new Date();
        tmp_date.setTime(Math.ceil(date.getTime() - one_day));
        return tmp_date;
    }
    //________________________________________________________________________________
    this.subtract=function(date,days){
        var tmp_date=new Date();
        tmp_date.setTime(Math.ceil(date.getTime() - (one_day*days)));                
        return tmp_date;                
    }
    //________________________________________________________________________________
    function calculateYear(year){
        if(year<0) year+=(1900*2);
        else if(year<1900) year+=1900;
        return year;
    }
    //________________________________________________________________________________
    function formateDate(dateValue){
        var date=dateValue.getDate();
        var month=dateValue.getMonth();
        var year=calculateYear(dateValue.getYear());   
        var dateString=this_ref.dateFormat;
        
        
        dateString=dateString.replace("dddd",CULTURE_DAY_NAMES[dateValue.getDay()]);
        dateString=dateString.replace("ddd",CULTURE_SHORTDAY_NAMES[dateValue.getDay()]);
        dateString=dateString.replace("dd",date);
        dateString=dateString.replace("d",date);
        
        
        dateString=dateString.replace("mmmm",CULTURE_MONTH_NAMES[month]);
        dateString=dateString.replace("mmm",CULTURE_ABBMONTH_NAMES[month]);
        dateString=dateString.replace("mm",(month+1));
        dateString=dateString.replace("m",(month+1));
        
        dateString=dateString.replace("yyyy",year);
        dateString=dateString.replace("yyy",year);
        dateString=dateString.replace("yy",year.toString().substring(2,2));
        return dateString;
    }
    this.FormatDate=formateDate;//alias
    //________________________________________________________________________________
    function isThisMonthDate(date){
        return (date.getMonth()==this_ref.curr_date.getMonth() && calculateYear(date.getYear())==calculateYear(this_ref.curr_date.getYear()));
    }
    //________________________________________________________________________________
    function isPrviousMonthDate(date){
        return (date.getMonth()<this_ref.curr_date.getMonth() && calculateYear(this_ref.selectedDate.getYear())==calculateYear(this_ref.curr_date.getYear())) ||
               (calculateYear(this_ref.selectedDate.getYear())<calculateYear(this_ref.curr_date.getYear()));
    }
    //________________________________________________________________________________
    function isNextMonthDate(date){
        return (date.getMonth()>this_ref.curr_date.getMonth() && calculateYear(this_ref.selectedDate.getYear())==calculateYear(this_ref.curr_date.getYear())) ||
               (calculateYear(this_ref.selectedDate.getYear())>calculateYear(this_ref.curr_date.getYear()));
    }
}//end calender
//==============================END CALENDER CLASS=======================================================================================================================

//=============================START CALENDER CONTROL====================================================================================================================
//This function will draw a calender and set initial value from associatedControl.
//PARAMETERS:
//          containerID:-In which the calender will be drawn
//          initialValue:-It should be an array of date / or null for defult value
//          onDateClickFunction:-Reference of a function which will call by calender afeter click on date / or null if not required
//          onWeekClickFunction:-Reference of a function which will call by calender afeter select a week / or null if not required
//          onMonthClickFunction:-Reference of a function which will call by calender afeter select a month / or null if not required
function loadCalender(containerID,initialValue,onDateClickFunction,onWeekClickFunction,onMonthClickFunction){
    
    var calender=new Calender();
    calender.enableRangeSelection=true;
    //calender.days_name=["S","M","T","W","T","F","S"];
//    var tempDayNames=new Array();
//    for(var dnIndex=0;dnIndex<calender.days_name.length;dnIndex++){
//        tempDayNames.push(calender.days_name[dnIndex].substring(0,1));
//    }
    calender.days_name=CULTURE_SHORTDAY_NAMES;
    calender.onDateClick=onDateClickFunction;
    calender.onWeekClick=onWeekClickFunction;
    calender.onMonthClick=onMonthClickFunction;
    var container=document.getElementById(containerID);
    //alert(initialValue);
    if(initialValue!=null){
         calender.setSelectedRange(initialValue.split(","));
         //alert()
    }
    
    calender.draw(container);
    
    return calender;
}
//==============================END CALENDER CONTROL=====================================================================================================================

//===========================START DATE PICKER CONTROL===================================================================================================================
var isGotFocus=false;
var calenderContainer;
function openDatePicker(associatedControlID,dateFormat,onDateChange){
    var calender=new Calender();
    var container=document.getElementById("datePickerContainer");
    var associatedControl=document.getElementById(associatedControlID);
    
    var tempDayNames=new Array();
    for(var dnIndex=0;dnIndex<calender.days_name.length;dnIndex++){
        tempDayNames.push(calender.days_name[dnIndex].substring(0,1));
    }
    calender.days_name=tempDayNames;
    
    if(!container==null)
        container.parentNode.removeChild(container);
    
    container=document.createElement("div");
    container.id="datePickerContainer";
    associatedControl.parentNode.appendChild(container);
    
    container.className="calender calenderPopup";
    //calender.dateFormat=dateFormat.toLowerCase();
        calender.onDateClick=function(selectedDate){
            
            associatedControl.setAttribute("selectedDate",calender.selectedLocalRange);
            
            //alert(associatedControl.getAttribute("selectedDate"));
            
            associatedControl.value=selectedDate;
            container.style.display="none";
            associatedControl=null;
            calender=null;
            container=null;
            if(onDateChange!=null) onDateChange(selectedDate);
        };
    
    calender.isPopup=true;
    
    
        
        
    if(associatedControl!=null && associatedControl.value!=null && associatedControl.value!=""){
         if(associatedControl.getAttribute("selectedDate")!=null)
            calender.setCurrentDate(new Date(associatedControl.getAttribute("selectedDate")));
         
         //new change
         else if(associatedControl.getAttribute("dd") && associatedControl.getAttribute("mm") && associatedControl.getAttribute("yy")){
            var tDate=new Date();
            tDate.setFullYear(parseInt(associatedControl.getAttribute("yy")), parseInt(associatedControl.getAttribute("mm"))-1, parseInt(associatedControl.getAttribute("dd")));
            calender.setCurrentDate(tDate);
            associatedControl.setAttribute("selectedDate",tDate);
         }
         //end change   
    }
    
    container.style.display="block";
    calender.draw(container);
    
    var docHeight=parseInt(document.body.clientHeight);
   
    var popupPosition=findAbsPos(associatedControl);
    container.style.left=popupPosition[0] + "px";
    if((popupPosition[1] + parseInt(container.offsetHeight) + parseInt(associatedControl.offsetHeight))>docHeight)
        container.style.top=(popupPosition[1] - parseInt(container.offsetHeight)) + "px";
    else
        container.style.top=popupPosition[1] + parseInt(associatedControl.offsetHeight) + "px";
          
}
//only for date picker
var DatePicker={
    GetControl:function(controlID){
        var control=document.getElementById(controlID);
        if(!control.type){
            var inputs=control.getElementsByTagName("input");
            if(inputs[0] && inputs[0].type && inputs[0].type=="text")
                control=inputs[0];
        }
        
        return control;
    },
    GetDate:function(controlID){
        var control=DatePicker.GetControl(controlID);
        var tDate=new Date();
        if(control.getAttribute("selectedDate")!=null)
            tDate=new Date(control.getAttribute("selectedDate"));
        else   
            tDate.setFullYear(parseInt(control.getAttribute("yy")), parseInt(control.getAttribute("mm"))-1, parseInt(control.getAttribute("dd")));
            
        return tDate;
    },
    SetDate:function(controlID, newDate){
        var control=DatePicker.GetControl(controlID);
        control.setAttribute("selectedDate",newDate);
        var cal=new Calender();
        newDate=cal.FormatDate(newDate);
        control.value=newDate;
        cal=null;
    },
    AddDate:function(date,days){
        var cal=new Calender();
        date=cal.subtract(date,(-1)*days);
        return date;
    },
    GetMilleniumYear:function(year){
        if(year<0) year+=(1900*2);
        else if(year<1900) year+=1900;
        return year;
    }
};
//============================END DATE PICKER CONTROL===================================================================================================================

//===========================START TIME PICKER CONTROL==================================================================================================================
function openTimePicker(associatedControlID,timeInterval){
    var container=document.getElementById("timePickerContainer");
    var associatedControl=document.getElementById(associatedControlID);
    
    if(container!=null) document.body.removeChild(container);
    
    //if(container==null){
    container=document.createElement("div");
    var popupPosition=findAbsPos(associatedControl);
    container.className="timepickerPopup";
    container.style.left=popupPosition[0] + "px";
    container.style.top=popupPosition[1] + parseInt(associatedControl.offsetHeight) + "px";
    container.id="timePickerContainer";
    
    var hour,minute;
    
    var timeList=document.createElement("div");
    timeList.className="timePicker";
    timeList.style.cssText="height:100px;overflow-y:scroll;min-width:" + associatedControl.offsetWidth + "px";
    var timeOption;
    
    var isAM=true;
    
    var selectedIndex=0;
    for(var index=0;index<24*60;index+=30){
        timeOption=document.createElement("a");
        timeOption.style.cssText="display:block;cursor:pointer";
        
        addEvent(timeOption,"click",onClick=function(e){
                                      associatedControl.value=(typeof e.target!="undefined")?e.target.innerHTML:e.srcElement.innerHTML;
                                      associatedControl=null;
                                      container.style.display="none";
                                      container=null;
                                      },false);
                                      
        hour=parseInt(index/60);
        minute=(index%60);
        
        var timeString=CULTURE_TIME_FORMAT;
        timeString=(timeString.indexOf("hh")>=0)?timeString + " tt":timeString;
        
        var ttPresent=(timeString.indexOf("tt")>0);
        if(isAM && hour==12) isAM=false;
        hour=(ttPresent==true)?((hour>12)?hour-12:hour):hour;
        
        timeString=timeString.replace("hh",(100+hour).toString().substring(1,3));
        timeString=timeString.replace("h",(100+hour).toString().substring(1,3));
        timeString=timeString.replace("mm",(100 + minute).toString().substring(1,3));
        timeString=timeString.replace("tt",(isAM)?CULTURE_AM:CULTURE_PM);
       
        timeOption.innerHTML=timeString;
        
        if(associatedControl.value.indexOf(timeString)>=0){
            timeOption.className="selected";
            selectedIndex=(index/30);
        }
       
        timeList.appendChild(timeOption);
    }
    
    container.appendChild(timeList);
    
    document.body.appendChild(container);
    //}
    container.style.display="";
    
    //set scroll position
    var minOptionHeight=parseInt(timeOption.offsetHeight);
    var containerHeight=parseInt(timeList.offsetHeight);
    var maxVisibleItem=Math.round(containerHeight/minOptionHeight);
    if(maxVisibleItem<=selectedIndex){
        timeList.scrollTop=Math.round(minOptionHeight*(selectedIndex-1));
    }
    //end set scrollposition
    
    calenderContainer=container;
    
    addEvent(container,"mousemove",onClick=function(e){calenderContainer.style.display="";isGotFocus=true},false);
    addEvent(container,"mouseout",onClick=function(e){calenderContainer.style.display="none";},false);
    isGotFocus=false;
    
    setTimeout("if(!isGotFocus) calenderContainer.style.display='none'",1000);
}
//============================END TIME PICKER CONTROL===================================================================================================================