var slides = [ 
	      ['/img/photos/boat_1.jpg', '/img/photos/boat_1.jpg'], // the first URL should be the one that's in the html
	      ['/img/photos/boat_2.jpg', '/img/photos/boat_2.jpg'], // no comma on the last one
	      ['/img/photos/boat_3.jpg', '/img/photos/boat_3.jpg'],
	      ['/img/photos/boat_4.jpg', '/img/photos/boat_4.jpg'],
	      ['/img/photos/boat_5.jpg', '/img/photos/boat_5.jpg'],
	      ['/img/photos/boat_6.jpg', '/img/photos/boat_6.jpg'],
	      ['/img/photos/boat_7.jpg', '/img/photos/boat_7.jpg']
	      // add as many as you like, seperating with commas, and in the order you wish them to appear.
	      ];

var state = false; // whether it is 'open' or not.
var header = null;
var backgroundElem = null;

var load = function () {
   //Grab the header. I need the ID of the tag.
   header = document.getElementById('header');
   //Ditto here, what element's background needs to be swapped?
   backgroundElem = document.getElementById('container');
}

//Toggles between open and closed header
//This is what the 'onClick' for the actual toggle element should be
//Like so: <div onClick="toggleState()">
var toggleState = function () {
	/*if(state) {
	    header.style.height = '400px';
	} else {
	    header.style.height = '520px';
   }*/
	if(state){
		Effect.BlindUp('header', {duration:1, scaleFrom: 100, scaleTo:76.9, afterFinish:function(){$('header').style.height='400px';$('header').style.display='block';}});
	} else{
		Effect.BlindDown('header', {duration:1, scaleFrom:100, scaleTo:130, afterFinish:function(){$('header').style.height='520px';}});
	}

	state = !(!!state);
	swapBackground();
	return false;
};


//These operate similarly, ala <div onClick="nextPhoto()">
var nextPhoto = function () {
    var next = slides.shift();
    slides.push(next);
    swapBackground();
    return false;
}

var prevPhoto = function() {
    var prev = slides.pop();
    slides.reverse().push(prev);
    slides.reverse();
    swapBackground();
    return false;
}

//Simple helper to decide which of the two images we want to use
var getVersion = function(urls) {
    if(state) {
	return urls[0];
    } else {
	return urls[1];
    }
}

var swapBackground = function () {
    backgroundElem.style.background = "#19939E url(" + getVersion(slides[0]) + ") no-repeat scroll left top";
}