/**
 * Function to list google calendar events
 */
function listEvents(root) {
    var feed = root.feed;
    var entries = feed.entry || [];
    var html = ['<ul id="google_events">'];
    for (var i = 0; i < entries.length; ++i) {
      var entry = entries[i];
      var title = entry.title.$t;
      var link = entry.link[0];
      var start = (entry['gd$when']) ? entry['gd$when'][0].startTime : "";
      var getDate = start.match(/((([0-9]+){4})\-(([0-9]+){2})\-(([0-9]+){2}))/);
      var getTime = '';
      if(getTime = start.match(/(([0-9]+){2}\:([0-9]+){2}\:([0-9]+){2})/)){
        getTime = ' om  ' + getTime[0];
      } else {
          getTime = '';
      }
      var dateString = '<li>\n\
            <p>\n\
                <a href="' + link.href + '" target="_blank"><img src="/images/event.png" />\n\
                    ' + getDate[6] + '/' + getDate[4] + '/' + getDate[2] + ' ' + getTime + '<br\/>' + title + ' \n\
                <\/a>\n\
            <\/p> \n\
        <\/li>';
      html.push(dateString);
    }
    html.push('<\/ul>');
    Ext.get("agenda").dom.innerHTML = html.join("");
  }
  //end of function google calendar events
/**
 * Function to get immediate children of an element
 */
function getChildren(parentId){
    if(Ext.get(parentId) != null){
        var kids = Ext.get(parentId).select('*');
        kids = kids.filter(function(el) {
            return el.parent().id == parentId
        });
        return kids;
    }else{
        return false;
    }
}
function getCountItems(el, tag)
{
    if (el !== null){
        elTag = document.getElementById(el);
        if (elTag !== null){
            items = elTag.getElementsByTagName(tag);
            return items.length
        }
        else
        {
            return false;
        }
    }
    else
    {
        return false;
    }
    
}
/**
 * 2fast animation
 */
Ext.onReady(function(){
    /*
     * Slider image for the homepage
     */
    Ext.select('.carrousel-img').on('click', function(e){
       //get the id of the clicked image
       var img_id = this.id;
       //hide all images using fadeout
       Ext.select('.image-item').setStyle('display', 'none');
       //use the id to display the corresponding bigger image using fadein
       Ext.select('.' + img_id).setStyle('display', 'block');
    });
    //get the amount of images
    var partnersId = 'partners-list';
    if(getChildren(partnersId)){
    var countPartnerImg = getCountItems(partnersId, 'li');
    //get the width of the parent li and multiply by the amount of images
    //228px -> width of li
    var totWidth = countPartnerImg * 228;
    //set width of parent div equal to the result of the total width
    Ext.get('partners-list').setWidth(totWidth, true);
        //animate the slider & check when reaching the last image using the image count
        var margin = 0;
        var partnerlist = Ext.get(partnersId);
        setInterval(function() {
             var totWidth = countPartnerImg * 228;
            partnerlist.fadeOut({
                duration: 1,
                callback: function(){
                     margin += 228;
                    if(margin == totWidth){
                        margin = 0;
                    }
                    partnerlist.setStyle('margin-left', '-'+margin+'px');
                }
            });
            partnerlist.fadeIn({
                duration: 2
            });
        }, 15000);
    }
     /**
    * slider previews animation
    **/
    var smallPrev = 'image-small-previews';
    if(getChildren(smallPrev)){
        var countPreviewImg = getCountItems(smallPrev, 'li');
        var totWidth = countPreviewImg * 77;
        //set width of parent div equal to the result of the total width
        Ext.get(smallPrev).setWidth(totWidth, true);
        var marginSlider = 0;
        var moveSlider = 77;
        var clicks = 8;//amount of images displayed when page is loaded
        Ext.select('.arrow_left').on('click', function(e){
           marginSlider -= moveSlider;
           if(marginSlider < 0){
               marginSlider = 0;
           }
           if(clicks > 8){
              clicks--;
           }
           Ext.get('image-small-previews').setStyle('margin-left', '-'+marginSlider+'px');
           return false;
        });
        Ext.select('.arrow_right').on('click', function(e){
           if(clicks < countPreviewImg){
               marginSlider += moveSlider;
               clicks++;
           }
           Ext.get('image-small-previews').setStyle('margin-left', '-'+marginSlider+'px');
           return false;
        });
    }
    /**
     * Sponsors slider
     */
    //get the amount of li children
    if(getChildren('sponsors-list')){
    var countSponsorsImg = getCountItems('sponsors-list', 'li');
        //get the width of the parent li and multiply by the amount of images
        //228px -> width of li
        if(countSponsorsImg >1){
            var totSponsorWidth = countSponsorsImg * 228;
            //set width of parent div equal to the result of the total width
            Ext.get('sponsors-list').setWidth(totSponsorWidth, true);
            //animate the slider & check when reaching the last image using the image count
            var sponsormargin = 0;
            var sponsorlist = Ext.get('sponsors-list');
            setInterval(function() {
                sponsorlist.fadeOut({
                    duration: 1,
                    callback: function(){
                         sponsormargin += 228;
                        if(sponsormargin == totSponsorWidth){
                            sponsormargin = 0;
                        }
                        sponsorlist.setStyle('margin-left', '-'+sponsormargin+'px');
                    }
                });
                sponsorlist.fadeIn({
                    duration: 2
                });
            }, 15000);
        }
    }
})