{embed="_layouts/index"}

{exp:stash:set name="meta"}
   	{exp:seo_lite use_last_segment="yes"}
{/exp:stash:set}

{exp:stash:set name="content"}
<section id="content">
        	<div class="inner-container">
            	<span class="logo-icon"></span>
                <span class="left-line"></span>
                <span class="right-line"></span>
                
                <div class="row">
                	<div class="col-md-12 col-sm-12">
                        {embed='home/breadcumb'}
                        <div class="calendar">
                       	    <h1>Calendar</h1>
                                     
                                    
                                <div class="meeting-cal">
                                    {exp:calendar:cal
                                      {if freebie_2 != "month"} category="{freebie_2}" {/if} 
                                      {if freebie_5 != ""} category="{freebie_5}" {/if} 
                                      {if freebie_3 == ''}date_range_start="year-month-01" date_range_end="year-month-last"{/if}
                                      {if freebie_3 != ""}date_range_start="{freebie_3}-{freebie_4}-01" date_range_end="{freebie_3}-{freebie_4}-last"{/if}}
                                    <div class="calendar tab-desc cf">
                               	    {display_each_month}
                                        <div class="calender-inner">
                                            <table id="fc_outer" width="100%" cellpadding="0" cellspacing="0">
                                                
                                                <thead>
                                                    <div style="display: none;" class="loading"><img src="/assets/images/loading.gif" /></div>
                                                    <tr id="month_year">
                                                      <th class="blank"></th>  
                                                      <th class="h-01">
                                                      <a title="{path='calendar/month'}/{prev_month format="%Y/%m"}/{if freebie_2 == "month"}{freebie_5}{/if}{if freebie_2 != "month"}{freebie_2}{/if}" class="prev-arrow">Prev<!-- --></a>
                                                      </th>
                                                      <th class="h-02">{date format="%F %Y"}</th>
                                                      <th class="h-03" >
                                                        <a title="{path='calendar/month'}/{next_month format="%Y/%m"}/{if freebie_2 == "month"}{freebie_5}{/if}{if freebie_2 != "month"}{freebie_2}{/if}" class="next-arrow">Next<!-- --></a>
                                                      </th>
                                                    
                                                      <th class="category-selectebox">
                                                            <select id="category" name="category">
                                                              <option value="" selected="selected">Select a Category</option>
                                                              {exp:channel:categories channel="calendar_events" category_group="4" show_empty="no" style="linear"}
                                                                    <option value="{category_url_title}">{category_name}</option>  
                                                              {/exp:channel:categories}
                                                            </select>
                                                      </th>
                                                    </tr>
                                                  </thead>
                                                  
                                                  <tbody>
                                                    <tr>
                                                        <td colspan="7">
                                                        <div class="wrap">                             
                                                        <table id="fc_inner" cellpadding="0" cellspacing="0">
                                                            
                                                            <thead>
                                                                <tr id="days_of_week"> 
                                                                    {display_each_day_of_week}
                                                                        <th class="day_of_week {day_of_week}" width="14%">{day_of_week}</th>
                                                                    {/display_each_day_of_week} 
                                                                </tr>
                                                            </thead>
                                                            
                                                            <tbody>
                                                            {display_each_week}
                                                                <tr> 
                                                                {display_each_day}
                                                                    {if day_in_current_month}
                                                                        <td class="day_cell {if day_is_today}today{/if}" width="14%"><div class="date"><a class="num" href="#">{date format="%j"}</a></div>
                                                                    {if:else}
                                                                        <td class="day_cell out_of_range" width="14%"><div class="date"><span class="num">{date format="%j"}</span></div>
                                                                    {/if}
                                                                    {display_each_hour}
                                                                        {events}
                                                                            <div class="event {if event_all_day}all_day{/if} 
                                                                                {if event_multi_day}multi_day{/if} 
                                                                                {if event_first_day}first_day{/if} 
                                                                                {if event_last_day}last_day{/if} 
                                                                                {if all_day_event_index_difference > 0}index_difference_{all_day_event_index_difference}{/if}"> 
                                                                                
                                                                                {if event_multi_day}
                                                                                    <div class="cale_right" style="background: {categories}{back-color}{/categories};">
                                                                                        <a href="{path='calendar/event'}/{url_title}/">{exp:eehive_hacksaw chars="50" append=".."}<span style="color:#fff">{event_title}</span>{/exp:eehive_hacksaw}</a> 
                                                                                        <em>
                                                                                            {if event_all_day == FALSE}
                                                                                            {if event_first_day}{event_start_time}{/if} 
                                                                                            {if event_last_day}{event_end_time}{/if}
                                                                                            {/if}
                                                                                        </em> 
                                                                                    </div>
                                                                                
                                                                                {if:else}
                                                                                    <div class="cale_right" style="background: {categories}{back-color}{/categories};"> 
                                                                                    <!--<span class="category-color" style="background: {color-code};"></span>-->
                                    		                                        <div>
                                                                                        <a href="{path='calendar/event'}/{url_title}/">{exp:eehive_hacksaw chars="50" append=".."}{event_title}{/exp:eehive_hacksaw}</a> 
                                                                                        <em>
                                                                                            {if event_all_day == ''}
                                                                                                {event_start_date format="%g"}
                                                                                                {if event_start_minute > 0}:{event_start_minute}{/if}
                                                                                                
                                                                                                {if event_end_time != event_start_time && event_end_time != '00:00'}&ndash;{event_end_date format="%g"}
                                                                                                    {if event_end_minute > 0}:{event_end_minute}{/if}
                                                                                                    {event_end_date format="%a"}
                                                                                                {if:else}
                                                                                                    {event_start_date format="%a"}
                                                                                                {/if}
                                                                                            {/if}
                                                                                        </em>
                                                                                    </div>
                                                                                    </div>
                                                                                {/if} 
                                                                            </div>
                                                                        {/events}
                                                                    {/display_each_hour} 
                                                                    </td>
                                                                {/display_each_day} 
                                                                </tr>
                                                            {/display_each_week}
                                                            </tbody>
                                                        </table>                                            
                                                        </div>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        {/display_each_month}   
                                     </div>
                                     {/exp:calendar:cal}
                                     <input type="hidden" name="XID" value="{XID_HASH}" />
                                     <input type="hidden" class="month_url" name="month_url" />
                                     <input type="hidden" class="cat_name" name="cat_name" />   
                                    <!-- Calendar Tab -->
                                    <div class="category-list">
                                    {exp:channel:categories channel="calendar_events" category_group="4" style="linear" show_empty="no"}
                                    {if count == 1}<ul>{/if}
                                        <li><span class="color-box" style="background-color:{back-color};"></span>{category_name}</li> 
                                    {/exp:channel:categories}
                                    {if total_results == count}</ul>{/if}
                                    </div>
                                </div>            
                        </div>  
                    </div>
                </div>
            </div>
</section>
{/exp:stash:set}
<script type="text/javascript">
    $(function(){
        var sel_cate = $('select[name="category"]').find('option[value="{last_segment}"]').attr("selected",true);
    
        $('#category').change(function() {
        $(".loading").show();
        var cat = $(this).val();
        if(cat == "")
           {
                var prv = $(".prev-arrow").attr('title');
                var arrprv = prv.split("/");
                if(arrprv[7])
                {
                    var lastprv = arrprv.pop();
                    var restprv = arrprv.join("/");
                    $(".prev-arrow").attr('title',restprv+"/");    
                }
                var nxt = $(".next-arrow").attr('title');
                var arrnxt = nxt.split("/");
                if(arrnxt[7])
                {
                    var lastnxt = arrnxt.pop();
                    var restnxt = arrnxt.join("/");
                    $(".next-arrow").attr('title',restnxt+"/");    
                }
           }
           var base_url = '{site_url}';
           var month_url = $('.month_url').val();
           if(month_url == "")
           {
                var uri =  document.URL +'/'+ $(this).val();
           }
           else
           {
                var vars = month_url;
                var arrVars = vars.split("/");
                var lastVar = arrVars.pop();
                var restVar = arrVars.join("/");
                var uri = restVar+'/'+ $(this).val();
           } 
            
           var values = $(this).serialize();
           $.ajax({
            url: uri,
            type: "POST",
            data: values,
            dataType: 'html',        
            success: function(data){
                
                    var wrap = $(data).find('.wrap').html(); // wrap     
                    $('.wrap').html(wrap);
                    $('.cat_name').val(cat);
                    $(".loading").hide();
            }
            });
    	});
        
        
        $(document).on("click",".next-arrow",function(){   
    	   $(".loading").show();
           var cat_name = $('.cat_name').val();
           if (cat_name == "")
           {
                var uri = $(this).attr('title');     
           }
           else
           {
                var vars = $(this).attr('title');
                var arrVars = vars.split("/");
                var lastVar = arrVars.pop();
                var restVar = arrVars.join("/");
                // var uri = restVar+'/'+ $(this).val();
                var uri = restVar+'/'+cat_name;
           }
           var values = $(this).serialize();	  
           $.ajax({
            url: uri,
            type: "POST",
            data: values,
            dataType: 'html',        
            success: function(data){
                
                    $('.cat_name').val('');
                    $('.month_url').val(uri);
                    var wrap = $(data).find('.wrap').html(); // wrap     
                    $('.wrap').html(wrap);
                    var dfn = $(data).find('.next-arrow').attr('title');                
                    $('.next-arrow').attr('title', dfn);
                    var dfp = $(data).find('.prev-arrow').attr('title');                
                    $('.prev-arrow').attr('title', dfp);
                    var df = $(data).find('.h-02').html(); // wrap     
                    $('.h-02').html(df);
                    $(".loading").hide();
            }
            });
    	});
        
        $(document).on("click",".prev-arrow",function(){
    	   $(".loading").show();
           var cat_name = $('.cat_name').val();
           if (cat_name == "")
           {
                var uri = $(this).attr('title');  
           }
           else
           { 
                var vars = $(this).attr('title');
                var arrVars = vars.split("/");
                var lastVar = arrVars.pop();
                var restVar = arrVars.join("/");      
                // var uri = restVar+'/'+ $(this).val();
                var uri = restVar+'/'+cat_name;
           }
           var values = $(this).serialize();
           $.ajax({
            url: uri,
            type: "POST",
            data: values,
            dataType: 'html',        
            success: function(data){
                    
                    $('.cat_name').val('');
                    $('.month_url').val(uri);
                    var wrap = $(data).find('.wrap').html(); // wrap     
                    $('.wrap').html(wrap);
                    var dfn = $(data).find('.next-arrow').attr('title');                
                    $('.next-arrow').attr('title', dfn);
                    var dfp = $(data).find('.prev-arrow').attr('title');                
                    $('.prev-arrow').attr('title', dfp);
                    var df = $(data).find('.h-02').html(); // wrap     
                    $('.h-02').html(df);
                    $(".loading").hide();
            }
           });
    	});
    });
        
</script>