I am writing one of my own JQuery plugin. And I got some strange which make me confused. I am using JQuery UI datepicker with my plugin.

;(function($){
    var newMW = 1,
        mwZIndex = 0;


    // IgtoMW contructor
    Igtomw = function(elem , options){
        var activePanel,
            lastPanel,
            daysWithRecords,
            sliding; // used to check the animation below is executed to the end.

        // used to access the plugin's default configuration
        this.opts = $.extend({}, $.fn.igtomw.defaults, options); 

        // intial the model window
        this.intialMW();
    };

    $.extend(Igtomw.prototype, {

        // intial model window
        intialMW : function(){

            this.sliding     = false;
            //this.daysWithRecords  = [];

            this.igtoMW = $('<div />',{'id':'igto'+newMW,'class':'igtoMW',})
                .css({'z-index':mwZIndex})   // make it in front of all exist model window;
                .appendTo('body')
                .draggable({ containment: 'parent' , handle: '.dragHandle' , distance: 5 });


            //var igtoWrapper = igtoMW.append($('<div />',{'class':'igtoWrapper'}));
            this.igtoWrapper = $('<div />',{'class':'igtoWrapper'}).appendTo(this.igtoMW);
            this.igtoOpacityBody = $('<div />',{'class':'igtoOpacityBody'}).appendTo(this.igtoMW);

            //var igtoHeaderInfo = igtoWrapper.append($('<div />',{'class':'igtoHeaderInfo dragHandle'}));
            this.igtoHeaderInfo = $('<div />',{'class':'igtoHeaderInfo dragHandle'})
                                    .appendTo(this.igtoWrapper);


            this.igtoQuickNavigation = $('<div />',{'class':'igtoQuickNavigation'})
                                      .css({'color':'#fff'})
                                      .appendTo(this.igtoWrapper);

            this.igtoContentSlider = $('<div />',{'class':'igtoContentSlider'})
                                        .appendTo(this.igtoWrapper);

            this.igtoQuickMenu = $('<div />',{'class':'igtoQuickMenu'})
                                        .appendTo(this.igtoWrapper);

            this.igtoFooter = $('<div />',{'class':'igtoFooter dragHandle'})
                                        .appendTo(this.igtoWrapper);

            //  append to igtoHeaderInfo
            this.headTitle = this.igtoHeaderInfo.append($('<div />',{'class':'headTitle'}));

            //  append to igtoQuickNavigation                             
            this.igQuickNav = $('<div />', {'class':'igQuickNav'})
                                .html('??')
                                .appendTo(this.igtoQuickNavigation);   

            //  append to igtoContentSlider
            this.igInnerPanelTopMenu =  $('<div />',{'class':'igInnerPanelTopMenu'})
                                        .appendTo(this.igtoContentSlider);

                this.igInnerPanelTopMenu.append('<div class="igInnerPanelButtonPreWrapper"><a href="" class="igInnerPanelButton Pre" action="" style="background-image:url(images/igto/igInnerPanelTopMenu.bt.bg.png);"></a></div>');
                this.igInnerPanelTopMenu.append('<div class="igInnerPanelSearch"><input type="text" name="igInnerSearch" /><a href="" class="igInnerSearch">??</a></div>' ); 
                this.igInnerPanelTopMenu.append('<div class="igInnerPanelButtonNextWrapper"><a href="" class="igInnerPanelButton Next" action="sm" style="background-image:url(images/igto/igInnerPanelTopMenu.bt.bg.png); background-position:-272px"></a></div>' );                                        

           this.igInnerPanelBottomMenu =  $('<div />',{'class':'igInnerPanelBottomMenu'})
                                        .appendTo(this.igtoContentSlider);    

           this.icWrapper =  $('<div />',{'class':'icWrapper','id':'igto'+newMW+'Panel'})
                                        .appendTo(this.igtoContentSlider);

           this.icWrapperCotentPre  = $('<div class="slider pre"></div>').appendTo(this.icWrapper);
           this.icWrapperCotentShow = $('<div class="slider firstShow "></div>').appendTo(this.icWrapper);
           this.icWrapperCotentnext = $('<div class="slider next"></div>').appendTo(this.icWrapper);


            this.initialPanel();                    
            this.initialQuickMenus();
            console.log(this.leftPad(9));                    

            newMW++;
            mwZIndex++;


            this.igtoMW.bind('mousedown',function(){

                var $this = $(this);

                //alert($this.css('z-index') + ' '+mwZIndex);
                if( parseInt($this.css('z-index')) === (mwZIndex-1) )
                    return;

                $this.css({'z-index':mwZIndex});
                mwZIndex++; 
                //alert(mwZIndex);
            });   
        },
        initialPanel : function(){
            this.defaultPanelNum = this.opts.initialPanel;
            this.activePanel = this.defaultPanelNum;
            this.lastPanel   = this.defaultPanelNum;


            this.defaultPanel = this.loadPanelContents(this.defaultPanelNum);

            $(this.defaultPanel).appendTo(this.icWrapperCotentShow);    
        },
        initialQuickMenus : function(){
            // store the current element
            var obj = this;

            var defaultQM    = this.opts.initialQuickMenu;

            var strMenu      = '';
            var marginFirstEle = '8';


            $.each(defaultQM,function(key,value){
                //alert(key+':'+value);
                if(marginFirstEle === '8'){
                    strMenu += '<a href="" class="btPanel" panel="'+key+'" style="margin-left: 8px;" >'+value+'</a>'; 
                    marginFirstEle = '4';
                }
                else{
                   strMenu += '<a href="" class="btPanel" panel="'+key+'" style="margin-left: 4px;" >'+value+'</a>'; 
                }       
            });
                        //  append to igtoQuickMenu
            this.igtoQMenu = $(strMenu).appendTo(this.igtoQuickMenu); 


            this.igtoQMenu.bind('click',function(event){

                event.preventDefault();
                var element = $(this); 

                if(element.is('.active')){
                    return;
                }
                else{
                    $(obj.igtoQMenu).removeClass('active');
                    element.addClass('active');                     
                }

                    var d = new Date();
                    var year = d.getFullYear();
                    var month = obj.leftPad( d.getMonth() );
                    var inst = null;



                if( obj.sliding === false){
                    console.log(obj.lastPanel);

                    var currentPanelNum = parseInt(element.attr('panel'));
                    obj.checkAvailability();
                    obj.getDays(year,month,inst,currentPanelNum);
                    obj.slidePanel(currentPanelNum);



                    obj.activePanel = currentPanelNum;
                    console.log(obj.activePanel); 
                    obj.lastPanel = obj.activePanel;
                    obj.icWrapper.find('input').val(obj.activePanel);
                }

            });
        },
        initialLoginPanel : function(){

            var obj = this;

            this.igPanelLogin = $('<div />',{'class':"igPanelLogin"});
            this.igEnterName  = $('<div />',{'class':"igEnterName"}).appendTo(this.igPanelLogin); 
            this.igInput      = $('<input type="text" name="name" value="???" />').appendTo(this.igEnterName); 
            this.igtoLoginBtWrap = $('<div />',{'class':"igButtons"}).appendTo(this.igPanelLogin);
            this.igtoLoginBt = $('<a href="" class="igtoLoginBt" action="OK" >??</a>\
                                  <a href="" class="igtoLoginBt" action="CANCEL" >??</a>\
                                  <a href="" class="igtoLoginBt" action="ADD" >????</a>').appendTo(this.igtoLoginBtWrap); 

            this.igtoLoginBt.bind('click',function(event){

                event.preventDefault();
                var elem = $(this);
                var action = elem.attr('action');
                var userName = obj.igInput.val();

                obj.loadRootMenu();  
            });

            return  this.igPanelLogin;

        },
        initialWatchHistory : function(){
            var obj = this; // for thirt part plugin used
            if(this.sliding === false){
            this.watchHistory = $('<div />',{'class':'igInnerPanelSlider'}).append($('<div />',{'class':'igInnerPanel_pre'}).addClass('igInnerPanel'))
                            .append($('<div />',{'class':'igInnerPanel'}).datepicker({ dateFormat: 'yy-mm-dd',defaultDate: '2010-12-01' ,showWeek: true,firstDay: 1,                                                                                              
                                                                                                    //beforeShow:setDateStatistics(),
                                                                                                    onChangeMonthYear:function(year, month, inst) { 
                                                                                                      var panelNum = 1;
                                                                                                      month = obj.leftPad(month);
                                                                                                      obj.getDays(year,month,inst,panelNum);

                                                                                                  } ,  
                                                                                                  beforeShowDay: obj.checkAvailability,
                                                                                                  onSelect: function(dateText, inst) { 
                                                                                                    obj.checkAvailability();

                                                                                                  }
                                                                                                }).append($('<div />',{'class':'extraMenu'})) )
                            .append($('<div />',{'class':'igInnerPanel_next'}).addClass('igInnerPanel'));

            return this.watchHistory; }   
        },
        loadPanelContents : function(panelNum){
            switch(panelNum){
                case 1:
                    alert('inside loadPanelContents')
                    return this.initialWatchHistory();
                break;
                case 2:
                    return this.initialWatchHistory();
                break;
                case 3:
                    return this.initialWatchHistory();
                break;
                case 4:
                    return this.initialWatchHistory();
                break;
                case 5:
                    return  this.initialLoginPanel();
                break;
            }
        },
        loadRootMenu : function(){

            var obj = this;        
            var mainMenuPanel = $('<div />',{'class':'igRootMenu'});
            var currentMWId =  this.igtoMW.attr('id');
            this.activePanel = 0;

            $('#'+currentMWId+'Panel .pre').
               queue(function(next){

                  $(this).
                     html(mainMenuPanel).
                     addClass('panelShow').
                     removeClass('pre').
                     attr('panelNum',0);
                     next();
               }).
               queue(function(next){
                  $('<div style="width:0;" class="slider pre"></div>').
                      prependTo('#'+currentMWId+'Panel').animate({width:348}, function(){

                          $('#'+currentMWId+'Panel .slider:last').remove()
                          $('#'+currentMWId+'Panel .slider:last').replaceWith('<div class="slider next"></div>');

                          $('.btMenu').remove();  // remove bottom quick menu
                          obj.sliding = false;
                          $(this).removeAttr('style');
                      });

                  $('.igtoQuickMenu .active').removeClass('active');      
                  next();
              });     
        },
        slidePanel : function(currentPanelNum){

            var currentMWId =  this.igtoMW.attr('id');
            var obj = this;
            //alert(obj.loadPanelContents(currentPanelNum));
            if( this.activePanel > currentPanelNum){

                $('#'+currentMWId+'Panel .pre').
                   queue(function(next){
                       alert('inside slidePanel')
                      //var initialDate = getPanelDateStatus(panelNum);
                      //console.log('intial day in bigger panel '+initialDate)
                      $(this).
                         html(obj.loadPanelContents(currentPanelNum)).
                         addClass('panelShow').
                         removeClass('pre').
                         attr('panelNum',currentPanelNum);
                         $('#'+currentMWId+'Panel .next').remove();

                         next();
                   }).
                   queue(function(next){

                      $('<div style="width:0;" class="slider pre"></div>').
                          prependTo('#'+currentMWId+'Panel').animate({width:348}, function(){

                              //$('#igto1Panel .slider:last').find(setPanel(currentPanelNum)).datepicker('destroy');
                              $('#'+currentMWId+'Panel .slider:last').empty().removeClass('panelShow').addClass('next').removeAttr('panelNum');
                              $('#'+currentMWId+'Panel .slider:last').replaceWith('<div class="slider next"></div>')

                              obj.sliding = false;console.log('inuse inside animation: '+obj.sliding);
                              $(this).removeAttr('style');
                          });


                      next();
                   });
            }
            else{  ///// current panel num smaller than next

                $('#'+currentMWId+'Panel .next').
                   queue(function(next){

                      $(this).
                         html(obj.loadPanelContents(currentPanelNum)).
                         addClass('panelShow').
                         removeClass('next').
                         attr('panelNum',currentPanelNum);
                         $('<div class="slider next">empty</div>').appendTo('#'+currentMWId+'Panel');

                         next();
                   }).
                   queue(function(next){

                      $('#'+currentMWId+'Panel .pre').animate({width:0}, function(){

                                        $(this).remove();
                                        //$('#igto1Panel .slider:first').find(setPanel(currentPanelNum)).datepicker('destroy');
                                        $('#'+currentMWId+'Panel .slider:first').empty().removeClass('panelShow').addClass('pre').removeAttr('panelNum').removeAttr('style');
                                        $('#'+currentMWId+'Panel .slider:first').replaceWith('<div class="slider pre"></div>')

                                        obj.sliding = false;
                                        console.log('inuse inside animation: '+obj.sliding);
                                    });

                      next();
                   });

            }

        },
        getDays : function(year,month,inst,panelNum){

            var obj = this;
            // depand on the mysql qurey condition
            var table_of_record = 'moviewh';//getTable(panelNum);
            var date_of_record = 'watching_date';//getTableDateCol(panelNum);
            var date_to_find = year+'-'+month;
            var node_of_xml_date_list = 'whDateRecords';//getXMLDateNode(panelNum);
            var user_id = '1';//getLoginUserId();

            //var daysWithRecords = [];
            // empty array before asigning
            this.daysWithRecords.length = 0;

            $.ajax({
                type: "GET",
                url: "include/get.date.list.process.php",
                data:({ table_of_record : table_of_record,date_of_record:date_of_record,date_to_find:date_to_find,user_id:user_id,node_of_xml_date_list:node_of_xml_date_list }),
                dataType: "json",
                cache: false,  // force broser don't cache the xml file
                async: false,  // using this option to prevent datepicker refresh ??NO
                success:function(data){

                    // had no date records
                    if(data === null)
                        return;

                    obj.daysWithRecords = data; 
                }

            });

            //setPanelDateStatus(year,month,panelNum);
            console.log('call from getdays() ' + this.daysWithRecords);
        },
        checkAvailability : function(availableDays) { //

            var i; 
            var checkdate = $.datepicker.formatDate('yy-mm-dd', availableDays);
             //console.log( checkdate); 

//            for(var i = 0; i < this.daysWithRecords.length; i++) { 
//                
//               if(this.daysWithRecords[i] == checkdate){
//                 
//                   return [true, "available"];
//                }
//            }
            //console.log('inside check availablility '+ this.daysWithRecords);  //return [true, "available"];
            console.log(typeof this.daysWithRecords)
            for(i in this.daysWithRecords){
                //if(this.daysWithRecords[i] == checkdate){
                   console.log(typeof this.daysWithRecords[i]); 
                   //return [true, "available"];
                //}    
            }
            return [true, "available"];
            //return [false, ""];

        },
        leftPad : function(num) { 
            return (num < 10) ? '0' + num : num; 
        }

    });

    $.fn.igtomw = function(options){

        // Merge options passed in with global defaults
        var opt = $.extend({}, $.fn.igtomw.defaults , options);

        return this.each(function() {
                    new Igtomw(this,opt);
               });   
    };

    $.fn.igtomw.defaults = {
        // 0:mainMenu   1:whatchHistor   2:requestHistory    3:userManager
        // 4:shoppingCart   5:loginPanel
        initialPanel : 5,  // default panel is LoginPanel  
        initialQuickMenu : {'1':'whatchHIstory','2':'????','3':'????','4':'????'} // defalut quick menu 
    };

})(jQuery);

usage:

$('.openMW').click(function(event){

event.preventDefault();
$('<div class="">').igtomw();

})

HTML code:

<div id="taskBarAndStartMenu">
    <div class="taskBarAndStartMenuM">
        <a href="" class="openMW" >??IGTO</a>
    </div>
    <div class="taskBarAndStartMenuO"></div>
</div>

In my work flow:

when I click the "whatchHistory" button, my plugin would load a panel with JQuery UI datepicker applied which days had been set to be availabled or not.

I am using the function "getDays()" to get the available days list and stored the data inside daysWithRecords, and final the UI datepicker's function "beforeShowDay()" called the function "checkAvailability()" to set the days.

the variable "daysWithRecords" was declared inside Igtomw = function(elem , options) and was initialized inside the function getDays()

I am using the function "initialWatchHistory()" to initialization and render the JQuery UI datepicker in the web.

My problem is the function "checkAvailability()" cannot see the variable "daysWithRecords".The firebug prompts me that "daysWithRecords" is "undefined".

this is the first time I write my first plugin. So ....

Thank you very much for any help!!