/* Init function Entry */
$(function(){ 
    /* Setting CSS*/
    reset_css();
    
    /* Generate Country Popup Box */
    gen_country_box();
    
    /* Bind Event */
    $("#country_selector").click(function(){
        $("#topic-list").hide();
        $("#country-list").show();
    });
    $("#topic_selector").click(function(){
        $("#country-list").hide();
        $("#topic-list").show();
    });
    
    $("#event-filter-div").mouseleave(function(){
        $("#country-list").hide();
        $("#topic-list").hide();
    });
    
    //Filter Country Event
    $("#country-list li").click( function(){
        var country = $(this).text().toLowerCase();
        
        free_event_blocks_size();
        $("div#calendar-container li h4.event_country").each(function(i){
            if( $(this).text().toLowerCase() != country){
                $(this).parent().hide();
            }else{
                $(this).parent().show();
            }
        });
        
        $("#country-list").hide();
        reset_css();    
    });
    
    //Filter Topic Event
    $("#topic-list li").click( function(){
        var topic = $(this).text().toLowerCase();
        
        free_event_blocks_size();
        $("div#calendar-container li h4.event_topic").each(function(i){
            if( $(this).text().toLowerCase() != topic){
                $(this).parent().hide();
            }else{
                $(this).parent().show();
            }
        });
        
        $("#topic-list").hide();
        reset_css();  
    });
    
    //Clear Filter Event
    $("#clear_filter").click( function(){
        
        free_event_blocks_size();
        $("div#calendar-container li h4").each(function(i){
                $(this).parent().show();
        });
       
        reset_css();  
    });
    
 });

 /*
  * A combined function to reset css style
  */
function reset_css(){
    reset_event_color();
    reset_dotted_line();
    reset_event_blocks_size();
}

 /* For CSS sylting --
  *  apply active_event class to <ol> which contains event block
  */
function reset_event_color(){
    $("#calendar-container ol").not(".grey_block").filter(function(i){
        if( $(this).find("li:visible").length ){
           $(this).addClass("active_event");
        }else{
           $(this).removeClass("active_event");
        }
    })
  
  }

 /* For CSS styling ---
  *   Reset dotted line for event block(<li>),
  *   add dotted line which match the following condition:
  *   Not the first visable <li>
  */
function reset_dotted_line(){
     $("#calendar-container ol").each(function(i){
        $(this).find("li").css({'border-top':'none'});
        
        $(this).find("li:visible").filter(function(index){
                return (index >= 1);
        }).css({'border-top':'1px dotted #999'});
    })
  }

 /* For CSS styling ---
  *    Set height of all event block to 100%(free size)
  */
function free_event_blocks_size(){
    $("#calendar-container ol").each(function(i){
        $(this).height("100%");
    })
 }
 
 /* For CSS styling ---
  *   1.For each event-row in event calendar,
  *     take the greatest height and apply to all single event block
  *
  *   2.For IE6:
  *     use 84px as min-hight
  */
 function reset_event_blocks_size(){
    var max_height_list = [];
    $("#calendar-container div.event_row").each( function(i){
        
        var max_height = 0;
        $(this).find("ol").each(function(j){
           if($(this).height() > max_height){
                max_height = $(this).height();
           }
        });
        if( max_height<20 ){
            max_height = 84;
        }
        max_height_list.push(max_height);
    });
    
    $("#calendar-container div.event_row").each( function(i){
        var max_height = 0;
        $(this).find("ol").each(function(j){
           $(this).height(max_height_list[i]) ;
        });
    });
}


/*
* Generate Country Popup box, 
* list all countries in current Page
*/
function gen_country_box(){
    //clear all inside
    $("#country-list").html("");
    
    var all_countries = new Array();;
    $("#calendar-container h4.event_country").each(function(i){
        var country = $(this).text();
        if( $.inArray(country, all_countries) == -1 ){
            all_countries.push(country);
        }
    })

    //generate list
    all_countries.sort();
    var country_count = all_countries.length;
    var html = "<ol>";
    for(var i = 0; i < country_count; i++){
    
        html += '<li>' + all_countries[i].substr(0,1).toUpperCase() + all_countries[i].substr(1).toLowerCase() + '</li>';
    }
    html += "</ol>";
    $("#country-list").append(html);
}

/* 
 * Generate a clickable popup box of event detail
 */
function show_event_detail(me, day){
     $("#event_popup").html("");

     var exceprt = $(me).find("dl dt.event_excerpt").text();
     var start_time = $(me).find("dl dt.start_time").text();
     var end_time = $(me).find("dl dt.end_time").text();
     var event_link = $(me).find("dl dt.event_link").text();
     var country = $(me).find("h4.event_country").text();
     var topic = $(me).find("h4.event_topic").text();
     var title = $(me).find("p").text();
     var position = $(me).offset();
     var is_spotlight = $(me).find("h4.spotlight_tag").length;
     var param = "?eday="+day;
     
     //-------------------- Javascript Out Put From Here ----------------
     var html = '<a href="' + event_link + param + '" >' ;
     html += '<p><span class="event_country">' + country.toUpperCase() + '</span>';
     html += '<span class="event_topic topic_' + topic.toLowerCase() + '">' + topic.toUpperCase() + '</span>';
     if(is_spotlight>0) html += '&nbsp;<span class="spotlight_tag">SPOTLIGHT</span>';
     html += '</p>'
     
     html += '<h4>' + title + '</h4>';
     if($.trim(start_time) != ""){
        html += '<p class="event_time">Start ' + start_time ;
        if( $.trim(end_time) != ""){
            html += ' - End ' + end_time;
        }
        html += '</p>';
     }
     html += '<p class="event_excerpt">' + exceprt + '</p>';
     html += '<h5>&gt; READ MORE</h5>';
     html += '</a>';
     
     $("#event_popup").append(html)
     .css(position)
     .show();
     
     $("#event_popup").mouseleave(function(){
        $(this).hide();
        return false;
     });
}