//PoWPA Implementation Chart

PoWPAChart = function(elm) {
    this.elm = elm;
    this.chart = null;
    this.data = null;
    this.rows = null;
    this.config = null;
    this.defaultConfig = {
        width: 640,
        height: 400,
        title: '',
        type: 'columnchart',
        legend: 'top',
        colors: ['#005858', '#2b8381','#cff3f2','#edfbfb','#fdfdfd','#ccc'],
        titleFontSize:'',
        pages : null
    };
    google.load("visualization", "1", { packages: ["columnchart", "barchart"] });
}

PoWPAChart.prototype.initialize = function(rows, config) {
    this.rows = rows;
    this.config = config;
    google.setOnLoadCallback((function(a) { return function() { PoWPAChart$drawChart.apply(a, arguments); } })(this));
}
PoWPAChart.prototype.getConfigValue = function(name) {
    return (this.config && this.config[name])
        ? this.config[name]
        : this.defaultConfig[name];
}


PoWPAChart$drawChart = function() {

    this.data = new google.visualization.DataTable(this.rows, 0.6);
    var formatter = new google.visualization.NumberFormat({ suffix: '%', fractionDigits:2 });
    formatter.format(this.data, 1);
    formatter.format(this.data, 2);
    formatter.format(this.data, 3);
    formatter.format(this.data, 4);
    formatter.format(this.data, 5);
    formatter.format(this.data, 6);

    if (this.getConfigValue('type') === 'columnchart') {
        this.chart = new google.visualization.ColumnChart(document.getElementById(this.elm));
    }
    else {
        this.chart = new google.visualization.BarChart(document.getElementById(this.elm));
    }
    this.chart.draw(this.data, { colors: this.getConfigValue('colors'), width: this.getConfigValue('width'), height: this.getConfigValue('height'), is3D: false, isStacked: true, title: this.getConfigValue('title'), legend: this.getConfigValue('legend'), titleFontSize: this.getConfigValue('titleFontSize') });
    google.visualization.events.addListener(this.chart, 'select', (function(a) { return function() { PoWPAChart$barClick.apply(a, arguments); } })(this));
    google.visualization.events.addListener(this.chart, 'onmouseover', (function(a) { return function() { PoWPAChart$barMouseOver.apply(a, arguments); } })(this));
    google.visualization.events.addListener(this.chart, 'onmouseout', (function(a) { return function() { PoWPAChart$barMouseOut.apply(a, arguments); } })(this));

}

function PoWPAChart$barMouseOver(e) {
    this.chart.setSelection([e]);
}

function PoWPAChart$barMouseOut(e) {
    this.chart.setSelection([{ 'row': null, 'column': null}]);
}

function PoWPAChart$barClick() {
    var row = this.chart.getSelection()[0].row;
    var pages = this.getConfigValue('pages');
    if (pages) {
        document.location.href = pages[row];
    }



}
//End PoWPA Implementation chart



(function($) {
    //Tooltips
    $(function() {
        $('img.cmsTooltip, span.cmsTooltip').tooltip({ showURL: false });
    });

    /* "Accordionize" Content zones */
    $(function() {
        $('.accordionize h2').addClass('close').click(function() {
            $(this).toggleClass('open').toggleClass('close');
            $(this).nextAll(':not(h2)').slideToggle('hide');
            return false;
        }).nextAll(':not(h2)').hide();
    });
    /*E-learning overlay*/
    $(function() {
        if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
            $('.overlay').hide();
        }
    });
    /*Country profile navigation*/
    $(function() {
        if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
            $('.country-profile-title .navigation').hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });
        }
    });

})(jQuery);

//Home slideshow

function slideShow() {
    jQuery('#gallery a:first').addClass('show');
    //Set the opacity of all images to 0
    jQuery('#gallery a').css({ opacity: 0.0 });
    //Get the first image and display it (set it to full opacity)
    jQuery('#gallery a:first').css({ opacity: 1.0 });
    //Set the caption background to semi-transparent
    jQuery('#gallery .caption').css({ opacity: 0.7 });
    //Resize the width of the caption according to the image width
    jQuery('#gallery .caption, #gallery .content').css({ width: jQuery('#gallery a').find('img').css('width') });
    //Get the caption of the first image from REL attribute and display it
    jQuery('#gallery .content').html(jQuery('#gallery a:first').find('img').attr('rel'))
    //jQuery('#gallery .content').animate({ opacity: 0.7 }, 400);
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()', 10000);

}
function gallery() {

    //if no IMGs have the show class, grab the first image
    var current = (jQuery('#gallery a.show') ? jQuery('#gallery a.show') : jQuery('#gallery a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? jQuery('#gallery a:first') : current.next()) : jQuery('#gallery a:first'));

    //Get next image caption
    var caption = next.find('img').attr('rel');

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({ opacity: 0.0 })
	.addClass('show')
	.animate({ opacity: 1.0 }, 3000);

    //Hide the current image
    current.animate({ opacity: 0.0 }, 3000)
	.removeClass('show');

    //Set the opacity to 0 and height to 1px
    jQuery('#gallery .content').animate({ left: '-710px' }, 1000, 'linear', function() { jQuery('#gallery .content').html(caption); });

    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    jQuery('#gallery .content').animate({ left: 0 }, 1000)


}