// JavaScript Document



// slideshow options

var start_num = 6; 			// slide to start slideshow with
var fade_speed = 2; 		// speed of the fade transition. value between 1 and 5, 1 being fastest.
var hide_text = true; 		// when true, text hides between fade in and out of images
var slideshow_start = 6; 	// pause, in seconds, before beginning the slideshow after page has loaded
var slideshow_speed = 6; 	// how long, in seconds, before the slide changes
var slideshow_pause = 12; 	// pause, in seconds, after a thumbnail is clicked


// slide show content: Image/Slide Number, Title, Header Color (UNIFEM'S WORK), Text

var slideshow_content = [
['1',
'Women, Poverty & Economics',
'ccc',
'UNIFEM brings gender equality into economic policies and expands women&rsquo;s access to markets, goods and services. <a href="/gender_issues/women_poverty_economics/" class="link_slideshow">read&nbsp;more&nbsp;&raquo;</a>'
],

['2',
'Violence against Women',
'ccc',
'UNIFEM works to prevent violence against women and to provide justice, support and services for survivors. <a href="/gender_issues/violence_against_women/" class="link_slideshow">read&nbsp;more&nbsp;&raquo;</a>'
],

['3',
'HIV &amp; AIDS',
'ccc',
'UNIFEM spearheads strategies that link HIV and AIDS to underlying factors such as violence against women, feminized poverty and women&rsquo;s limited voice in decision-making. <a href="/gender_issues/hiv_aids/" class="link_slideshow">read&nbsp;more&nbsp;&raquo;</a>'
],

['4',
'Democratic Governance',
'ccc',
'UNIFEM promotes women&rsquo;s political participation and good governance to ensure that decision-making processes are participatory, responsive, equitable and inclusive. <a href="/gender_issues/democratic_governance/" class="link_slideshow">read&nbsp;more&nbsp;&raquo;</a>'
],

['5',
'Women, War &amp; Peace',
'ccc',
'UNIFEM works to include women in conflict resolution and peacebuilding processes, and to provide security responses to sexual violence in conflict. <a href="/gender_issues/women_war_peace/" class="link_slideshow">read&nbsp;more&nbsp;&raquo;</a>'
],

['6',
'Human Rights',
'ccc',
'UNIFEM places the advancement of women&rsquo;s human rights at the centre of all of its efforts. <a href="/gender_issues/human_rights/" class="link_slideshow">read&nbsp;more&nbsp;&raquo;</a>'
],

['7',
'Millennium Development Goals',
'ccc',
'UNIFEM is one of a number of UN agencies charged with supporting countries in moving forward on the MDGs. <a href="/gender_issues/millennium_development_goals/" class="link_slideshow">read&nbsp;more&nbsp;&raquo;</a>'
]

];


var slideshow_amount = slideshow_content.length;

// preload slideshow images
function preload_slideshow_images() {
	for (i=0;i<slideshow_amount;i++) {
	slide_image = new Image();
	slide_image.src = "img/slideshow/"+slideshow_content[i][0]+".jpg";
	}
}








var start_timer;
var auto_timer;
var auto_slide;

function start_slideshow() {
	thumbs_on(start_num);
	document.getElementById('slideshow_image').src = "img/slideshow/"+slideshow_content[start_num-1][0]+".jpg";
	document.getElementById('div_slideshow_header').innerHTML = slideshow_content[start_num-1][1];
	document.getElementById('div_slideshow_thumbs_header').style.color = "#"+slideshow_content[start_num-1][2];
	document.getElementById('div_slideshow_text').innerHTML = slideshow_content[start_num-1][3];
	if (start_num < slideshow_amount) {
		auto_slide = start_num+1;
	} else {
		auto_slide = 1;
	}
	start_timer = setTimeout("run_slideshow()",slideshow_start*1000);
}

var click_pause;

function run_slideshow() {

	change_slideshow(auto_slide,true);

	auto_timer = setTimeout("run_slideshow()",slideshow_speed*1000);

	if (auto_slide < slideshow_amount) {
	auto_slide++;
	} else {
	auto_slide = 1;
	}
}





var current_num;
var image_opacity = 100;
var timer;
var text_pause;
var in_fade = false;

function change_slideshow(slide_num,auto) {
	
	// reset timer
	clearTimeout(start_timer);
	clearTimeout(timer);
	clearTimeout(auto_timer);
	clearTimeout(click_pause);
	clearTimeout(text_pause);
	
	// set opacity variable to 100
	image_opacity = 100;
	
	// set top slideshow image opacity to 100%
	document.getElementById('slideshow_image').style.opacity = 1;
	document.getElementById('slideshow_image').style.filter = "alpha(opacity=100)";

	// insert new slideshow image into bottom space
	document.getElementById('slideshow_image_under').src = "img/slideshow/"+slideshow_content[slide_num-1][0]+".jpg";
	// change its opacity to 100%
	document.getElementById('slideshow_image_under').style.opacity = 1;
	document.getElementById('slideshow_image_under').style.filter = "alpha(opacity=100)";

	// activate fade
	fade_image();

	// set current slide variable
	current_num = slide_num;
	
	// delete text
	if (hide_text) {
	document.getElementById('div_slideshow_header').innerHTML = "";
	document.getElementById('div_slideshow_text').innerHTML = "";
	} else {
		swap_text();
	}

	// turn thumb on
	thumbs_on(slide_num);

	// if clicked
		if (!auto) {
		thumbs_on(slide_num);
		// uncomment below if you want the slideshow to start after the one clicked. 
		// if not, it starts where it left off
		//auto_slide = slide_num+1;
		if (slide_num == auto_slide) {
			if (auto_slide < slideshow_amount) {
			auto_slide++;
			} else {
			auto_slide = 1;
			}
		}
		//alert(auto_slide);
		click_pause = setTimeout("run_slideshow()",slideshow_pause*1000);
		}
}

function swap_text(slide_num) {
	document.getElementById('div_slideshow_header').innerHTML = slideshow_content[current_num-1][1];
	//change header color
	document.getElementById('div_slideshow_thumbs_header').style.color = "#"+slideshow_content[current_num-1][2];
	document.getElementById('div_slideshow_text').innerHTML = slideshow_content[current_num-1][3];
	clearTimeout(text_pause);
}

function fade_image() {

	// fade loop
	if (image_opacity > 0) {
	
	// set fade variable true
	in_fade = true;
	
	document.getElementById('slideshow_image').style.opacity = image_opacity/100;
	document.getElementById('slideshow_image').style.filter = "alpha(opacity="+image_opacity+")";
	}
	
	fade_pause = fade_speed*30;
	// put pause in fade and make loop
	timer = setTimeout("fade_image()",fade_pause);
	
	// increment opacity down
	image_opacity = image_opacity-5;


	// when opacity hits 0 set top image to 100% and bottom image to 0 so FF doesn't flicker
	if (image_opacity == 0) {
	document.getElementById('slideshow_image').style.opacity = 1;
	document.getElementById('slideshow_image').src = "img/slideshow/"+slideshow_content[current_num-1][0]+".jpg";
	document.getElementById('slideshow_image_under').style.opacity = 0;

	// get text
	if (hide_text) {
	swap_text();
	}

	// set fade variable false
	in_fade = false;
	}
}



function thumbs_on(slide_num) {
	for (i=1;i<=slideshow_amount;i++) {
	thumb_name = "slideshow_thumb"+i;
	//alert(thumb_name);
	el = document.getElementById(thumb_name);
	document.getElementById(thumb_name).style.margin = "0px 7px 14px 7px";
	document.getElementById(thumb_name).style.border = "1px solid #fff";
	}
	thumb_on_name = 'slideshow_thumb'+slide_num;
	document.getElementById(thumb_on_name).style.margin = "-1px 6px 13px 6px";
	document.getElementById(thumb_on_name).style.border = "2px solid #ffcc00";
}
















///////////////////////
/*
var top_slide = 4;
var bottom_slide;


function do_fade(img_num) {
	opacity_in = 0;
	opacity_out = 100;

	clearTimeout(in_timer);
	clearTimeout(out_timer);

	top_slide = slideshow_content[top_slide-1][0];
	bottom_slide = slideshow_content[img_num-1][0];

	document.getElementById('slideshow_image_under').style.opacity = 0;
	document.getElementById('slideshow_image_under').src = "img/slideshow/"+bottom_slide+".jpg";

	fade_in();
	fade_out();
}


var opacity_in = 0;
var in_timer;
var opacity_out = 100;
var out_timer;


function fade_in() {

	if (opacity_in < 100) {
	document.getElementById('slideshow_image_under').style.opacity = opacity_in/100;
	}
	
	in_timer = setTimeout("fade_in()",10);
	
	opacity_in++;

	if (opacity_in == 100) {
	document.getElementById('slideshow_image').src = "img/slideshow/"+bottom_slide+".jpg";
	document.getElementById('slideshow_image').style.opacity = 1;
	}
}


function fade_out() {
	if (opacity_in > 0) {
	document.getElementById('slideshow_image').style.opacity = opacity_out/100;
	}
	
	out_timer = setTimeout("fade_out()",10);
	
	opacity_out--;

}
	
*/
///////////////////////