Slideshow.js

	// I dunno how this code works exactly, but I'll explain it the best I can.
	// the selectObj refers to the individual colours in the drop down menu.
	// the following function sets the changeBackground() to refer to the selectObj (or colour for simplicity)
	// then, we set a newColor variable to be the selectObj (the drop down menu)
	// the .options is the list of selections, and the selectedIndex within the drop down menu are the individual colours.
	// finally, the function changes the selection index of 0 (which is the default) to black.
	// the document.getElementById('content').style.backgroundColor = newColor; is exactly what it sounds like
	// it changes the background colour to black, if we selected black.

	// try this code out, it'll be easier to understand once you get the gist of it in your html.
	// Medhat had a very similar code to this; I am certain he did not use an Array
	// that doesn't mean Arrays don't work though.
	function changeBackground(selectObj){
		newColor = selectObj.options[selectObj.selectedIndex].text;
		document.getElementById('content').style.backgroundColor = newColor;
		document.getElementById('options').style.backgroundColor = newColor;
	}


	// sets up a new array for pictures. These lines of code are self-explanitory
	var PicList = new Array();
	var PicIndex = 0;
	function InstallPics(){
	PicList[0] = "images/Arab Spring/arabspring-640x480.jpg";
	PicList[1] = "images/Arab Spring/Arabspringisitfallalready_26305.jpg";
	PicList[2] = "images/Arab Spring/baby_Egyptian.png";
	PicList[3] = "images/Arab Spring/2gvcl.jpg";
	PicList[4] = "images/Arab Spring/15249.jpg";
	PicList[5] = "images/Arab Spring/EgyptProtestersonTank.jpg";
	PicList[6] = "images/Arab Spring/kurdsprotesterssyria.jpg";
	PicList[7] = "images/Arab Spring/occupy-wall-street.jpg";
	PicList[8] = "images/Arab Spring/rev.jpg";
	PicList[9] = "images/Arab Spring/tahrir-square1.jpg";
	}

	// setting up the control buttons
	function getNextPic(){
		if(PicIndex==9){
		// if the picture is the 10th one on the screen, go back to the beginning (where PicIndex is 0)
			PicIndex = 0;
			document.getElementById('imgName').innerHTML = PicList[PicIndex];
			return PicList[PicIndex];

		}
		else{
		// otherwise, continue adding 1 to the PicIndex to get the next picture.
			PicIndex = (PicIndex + 1);
			document.getElementById('imgName').innerHTML = PicList[PicIndex];
			return PicList[PicIndex];
		}
	}
	function getPrevPic(){
		if(PicIndex==0){
			PicIndex = 9;
			document.getElementById('imgName').innerHTML = PicList[PicIndex];
			return PicList[PicIndex];
		}
		else{
			PicIndex = (PicIndex-1);
			document.getElementById('imgName').innerHTML = PicList[PicIndex];
			return PicList[PicIndex];
		}
	}
	function getFirstPic(){
		PicIndex = 0;
		document.getElementById('imgName').innerHTML = PicList[PicIndex];
		return PicList[PicIndex];
	}
	function getLastPic(){
		PicIndex = 9;
		document.getElementById('imgName').innerHTML = PicList[PicIndex];
		return PicList[PicIndex];
	}
	function getRandomPic(){
    	PicIndex = Math.floor(1 + Math.random() * 9) ;
		document.getElementById('imgName').innerHTML = PicList[PicIndex];
    	return PicList[PicIndex];
	}

	// Load up the pictures when the website executes this javascript file.
	InstallPics();

	// this is to show the 1 - 10 values on the range slider bar thingy
	function showValue(newValue){
		document.getElementById('range').innerHTML=newValue;
	}

	// this is the crazy part.
	// when we click on the checkmark, we want to hide the controls;
	// we should wrap the control buttons inside a div, so we can either show the entire div, or hide it
	// instead of hiding each individual button
	function showMe(id1, id2) { // This gets executed when the user clicks on the checkbox
		var obj1 = document.getElementById(id1);
		var obj2 = document.getElementById(id2);
		if (obj1.style.visibility=="hidden") { // if it is checked, make it visible, if not, hide it
			// also, if one is visible, the other one isn't.
			// if the box is unchecked, the buttons are visible; the slider bar is not
			obj1.style.visibility = "visible";
			obj2.style.visibility = "hidden";
		}
		else {
			// if the box is checked, the buttons disappear; the slider bar becomes visible.
			obj1.style.visibility = "hidden";
			obj2.style.visibility = "visible";
		}
	}

	// I'm still working on the slideshow bit
	// Once I figure out the code for it, you guys will be the first to know.
	// I recommend everyone to take snippets of my code to see how they work and try to understand what is going on.
	// Thats how I did most of what you see above; using other people's code online.
	// Good Luck.