var ShowPicker =
    {
    curr_year: null,
    curr_month: null,
    today: null,
    today_year: null,
    today_month: null,
    today_day: null,
    month_full_names: ["January","February","March","April","May","June","July","August","September","October","November","December"],

    create: function ( id )
        {
        this.today       = new Date();
        this.today_year  = this.today.getFullYear();
        this.today_month = this.today.getMonth();
        this.today_day   = this.today.getDate();

        this.curr_year  = this.today_year;
        this.curr_month = this.today_month;

        this.id = id;

        this.shows = {};

        this.get();
        },

    get: function()
        {
        jQuery.getJSON(
            "/ajax/shows/" + this.curr_year + "/" + ( this.curr_month + 1 ),
            function( data )
                {
                jQuery.each(
                    data,
                    function( index, show )
                        {
                        var m = show.fields.occur.match( /(\d+)\-0?(\d+)\-0?(\d+)/ );

                        ShowPicker.shows[ m[1] + "-" + m[2] + "-" + m[3] ] =
                            {
                            src :
                            ShowPicker.month_full_names[ parseInt( m[2] ) - 1 ] + " " + m[3] + ", " + m[1] + "<br>" +
                            show.fields.place + "<br>" + show.fields.city + ", " + show.fields.state_abbr + "<br>" +
                            "<a href='/show/" + show.pk +"/'>Check It Out</a>"
                            };
                        }
                    );

                ShowPicker.build();
                }
            );
        },

    prev_month: function()
        {
        if( this.curr_month == 0 )
            {
            this.curr_month = 11;
            this.curr_year--;
            }
        else
            this.curr_month--;

        this.get();
        },

    next_month: function()
        {
        if( this.curr_month == 11 )
            {
            this.curr_month = 0;
            this.curr_year++;
            }
        else
            this.curr_month++;

        this.get();
        },

    attach_events: function()
        {
	    $('.showpicker-show').each(
        function ()
            {
            var distance       = 10;
            var time           = 250;
            var hideDelay      = 200;
            var hideDelayTimer = null;
            var beingShown     = false;
            var shown          = false;
            var trigger        = $( this );
            var popup          = $( '.showpicker-event ul', this ).css( 'opacity', 0 );

		    $( [ trigger.get(0), popup.get(0) ] ).mouseover(
                function ()
                    {
			        if( hideDelayTimer )
                        clearTimeout( hideDelayTimer );

    			    if( beingShown || shown )
	    			    return;
                    else
                        {
	    			    beingShown = true;

	    			    popup.css( { bottom: 20, left: -76, display: 'block' } )
	    			    .animate(
                            { bottom: '+=' + distance + 'px', opacity: 1 },
                            time,
                            'swing',
                            function (){ beingShown = false; shown = true; }
                            );
	    		        }
		            }
                ).mouseout(
                function ()
                    {
    			    if( hideDelayTimer )
                        clearTimeout( hideDelayTimer );

                    hideDelayTimer = setTimeout(
                        function ()
                            {
				            hideDelayTimer = null;

				            popup.animate(
                                { bottom: '-=' + distance + 'px', opacity: 0 },
                                time,
                                'swing',
                                function (){ shown = false; popup.css( 'display', 'none' ); }
                                );
			                },
                        hideDelay
                        );
		            }
                );
	        }
        );
        },

    build: function()
        {
        var html = "";

        html += "<div id='showpicker-wrap'>";

        html += "<div id='showpicker-nav'>";

        html += "<a class='showpicker-prev' href='#' onclick='ShowPicker.prev_month();'></a>"

        html += "<div>" + this.month_full_names[ this.curr_month ] + " " + this.curr_year + "</div>";

        html += "<a class='showpicker-next' href='#' onclick='ShowPicker.next_month();'></a>"

        html += "</div>";

        html += ("<table id='showpicker-cal' cellpadding='0' cellspacing='0'><thead><tr>"+
                 "<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>"+
                 "</tr></thead><tbody>");

        var curr_col;
        var curr_day = new Date( this.curr_year, this.curr_month, 1 );

        html += "<tr>";

        for( curr_col = 0; curr_col < curr_day.getDay(); ++curr_col )
            html += "<td class='showpicker-empty'>&nbsp;</td>";

        var show, key, c = new Date(), t = new Date();

        t.setFullYear( this.today_year, this.today_month, this.today_day );

        while( curr_day.getMonth() == this.curr_month )
            {
            html += "<td";

            if( ( curr_day.getFullYear() == this.today_year ) &&
                ( curr_day.getMonth() == this.today_month ) &&
                ( curr_day.getDate() == this.today_day ) )
                html += " id='showpicker-today'";

            show = null;
            key  = "" + curr_day.getFullYear() + "-" + ( curr_day.getMonth() + 1 ) + "-" + curr_day.getDate();
            
            c.setFullYear( curr_day.getFullYear(), curr_day.getMonth(), curr_day.getDate() );
            
            if( this.shows[ key ] != null )
                show = this.shows[ key ];

            if( show != null )
                html += ( c >= t ? " class='showpicker-show'" : " class='showpicker-show showpicker-past-show'" );

            html += ">"; 

            if( show != null )
                html += "<a href='#'>";

            html += curr_day.getDate();

            if( show != null )
                html += "</a><div class='showpicker-event'><ul><li>" + show.src + "</li></ul></div>";

            html += "</td>";

            curr_day.setDate( curr_day.getDate() + 1 );
            ++curr_col;

            if( curr_col == 7 )
                {
                html += "</tr>";

                if( curr_day.getMonth() == this.curr_month )
                    {
                    curr_col = 0;
                    html += "<tr>";
                    }
                }
            }

        if( curr_col < 7 )
            for( ; curr_col < 7; ++curr_col )
                html += "<td class='showpicker-empty'>&nbsp;</td>";

        html += "</tbody></table></div>";

        jQuery( this.id ).html( html );

        this.attach_events();
        }
    };