/** OUUCmenu
	in inc folder inside html folder, and used at server.
	
	Replicates the Flash effect previously used, but works on mobile devices.
	The banner contains four blank pics of specific widths along with the logo.
	Pics are stored in Graphics/headerPhotos.
	
	Create arrays of pic names (matching those in the folder). When page loads,
	showMenu() gets a random picture from each of the four groups, pre-loads them,
	and when the pics are loaded, an anonymous function calls show image.
	
	showImage() fades out the blank pic in eash position, changes its source to
	the new randomly selected picture and fades it in. At that point, we're done.
	This is repeated on each page load.
	
	Works from top level INC.
*/

(function($) { }) (jQuery);

var picPath = "http://www.ouuc.org/Graphics/headerPhotos/";

var grp1 = ["grp1adult-1",
            "grp1adult-2",
            "grp1-y-01",
			"grp1-a-01"];
var grp2 = ["grp2-a-01",
			"grp2-a-02",
			"grp2-c-001",
			"grp2-c-003",
			"grp2-c-004",
            "grp2adult-2",
			"grp2adult-5",
			"grp2family-1"];
var grp3 = ["grp3adult-1",
            "grp3adult-2",
			"grp3-a-01",
			"grp3-a-02",
			"grp3-e-01",
			"grp3-m-01",
			"grp3-y-01",
			"grp3elders-1",
			"grp3elders-2",
			"grp3youth-1"];
var grp4 = ["grp4adult-1",
            "grp4adult-2",
			"grp4adult-3",
			"grp4-y-01",
			"grp4child-1",
			"grp4-a-02",
			"grp4-a-01"];
var grp5 = ["grp5adult-1",
            "grp5-a-01",
            "grp5-e-01",
			"grp5adult-3",
			"grp5elders-1",
			"grp5child-1"];

function showMenu() {
	//alert("Show menu inner");
	var time = 2000;
	
	// GET RANDOMIZED IMAGES AND SET AN ARRAY TO THEIR
	//alert(randomToN(5));
	
	// SET UP ALL IMAGE STARTS
	var cur1 = $('#grp1start');
	var cur2 = $('#grp2start');
	var cur3 = $('#grp3start');
	var cur4 = $('#grp4start');
	var cur5 = $('#grp5start');
	
	// GET 1 RANDOMLY SELECTED PHOTO FROM EACH GROUP 
	var new1 = getRan(grp1);
	var new2 = getRan(grp2);
	var new3 = getRan(grp3);
	var new4 = getRan(grp4);
	var new5 = getRan(grp5);
	
	function getRan(arrName) {
		var sel = randomToN(arrName.length-1)
		return arrName[sel];
	}
	
	//alert(new1);
	
	//DO ALL THIS AFTER THE NEW PICS ARE PRELOADED!
	var image1 = $('<img />').attr('src', picPath + new1 + '.jpg').load(function(){
		showImage(cur1, image1);
    });
	
	var image2 = $('<img />').attr('src', picPath + new2 + '.jpg').load(function(){
		showImage(cur2, image2);
    });
	
	var image3 = $('<img />').attr('src', picPath + new3 + '.jpg').load(function(){
		showImage(cur3, image3);
    });
	
	var image4 = $('<img />').attr('src', picPath + new4 + '.jpg').load(function(){
		showImage(cur4, image4);
    });
	
	var image5 = $('<img />').attr('src', picPath + new5 + '.jpg').load(function(){
		showImage(cur5, image5);
    });
	
	
	
	function showImage(curImg, newImg) {
		//make curImage (blank) invisible
		curImg.fadeOut(0);
		// replace its source
		curImg.attr("src", newImg.attr("src"));
		curImg.fadeIn(time);
		time *= 1.2; //increase time for cross-screen animation
	}
	
	
	//function to get random number from 1 to n
	function randomToN(maxVal,floatVal) {
   		var randVal = Math.random()*maxVal;
   		return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}
	
}