// -----------------------------------------------------------------------------------
// 
// This page coded by Scott Upton
// http://www.uptonic.com | http://www.couloir.org
//
// This work is licensed under a Creative Commons License
// Attribution-ShareAlike 2.0
// http://creativecommons.org/licenses/by-sa/2.0/
//
// Associated APIs copyright their respective owners
//
// -----------------------------------------------------------------------------------
// --- version date: 11/28/05 --------------------------------------------------------


// get current photo id from URL
var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;

// if no photoId supplied then set default
var photoId = (!photoId)? 0 : photoId;

// CSS border size x 2
var borderSize = 10;

// Photo directory for this gallery
var photoDir = "photos/01/";

// Define each photo's name, height, width, and caption
var photoArray = new Array(
	// Source, Width, Height, Caption
	new Array("slides-0.jpg", "900", "528", "SafireCMS login page used by all admins, designers and content editors."),
	new Array("slides-1.jpg", "900", "528", "SafireCMS welcome page showing the current version (Safire CMS v 2.0.1.1) and username of the person logged in the system. Navigation is along the top of the screen."),
    new Array("slides-2.jpg", "900", "528", "Add, modify or delete pages on your site quickly in the Pages section."),
    new Array("slides-3.jpg", "900", "528", "Edit content with our easy to use WYSWYG editor. No HTML programming knowledge is needed and content is kept away from design."),
    new Array("slides-4.jpg", "900", "528", "Smart Tags make it easy to add functionality to any page including forms, breadcrumb navigation, as well as Facebook and Twitter icons for social media."),
	new Array("slides-5.jpg", "900", "528", "Easily insert links on any page to any file or image you have uploaded or any page you created."),
    new Array("slides-6.jpg", "900", "528", "Click the icon to link to a page on your site."),
    new Array("slides-7.jpg", "900", "528", "All internal pages are shown in a list, clicking on a page name will insert a link to that page."),
    new Array("slides-8.jpg", "900", "528", "Easily insert links on any page to any file or image you have uploaded."),
	new Array("slides-9.jpg", "900", "528", "Click the icon to link to a file or image in your file library."),
    new Array("slides-10.jpg", "900", "528", "Your file library contains assets that you have uploaded to default folders, or folders you have created. We offer image preview and management functions."),
    new Array("slides-11.jpg", "900", "528", "When a page is created you can control if it's published, secure, in menus or in sitemaps. You can even set the priority, frequency for the sitemap.xml file."),
    new Array("slides-12.jpg", "900", "528", "Search Engine Optimization is easy and straight forward for each page. No need to edit HTML code, it's all right here."),
	new Array("slides-13.jpg", "900", "528", "Site design is designated to a template that you or your designer create for use on your pages."),
    new Array("slides-14.jpg", "900", "528", "Create and install as many templates as you like. Intergrate your design by using Smart Tags for page titles or meta tags entered by editors on each page."),
    new Array("slides-15.jpg", "900", "528", "Assets are files that you have uploaded to default folders, or folders that you have created in the system."),
    new Array("slides-16.jpg", "900", "528", "To upload images simply go to the folder you wish to upload to or the default images folder and click Browse."),
    new Array("slides-17.jpg", "900", "528", "From there you can select an image from your computer and upload it to the images folder."),
    new Array("slides-18.jpg", "900", "528", "You can create as many online forms as you like."),
    new Array("slides-19.jpg", "900", "528", "When you create a form, the first step is to determine what to call it and what you would like it to do."),
    new Array("slides-20.jpg", "900", "528", "The next step is to determine what fields you want in the form from the list on the left, as the form builds on the right side of the page."),
    new Array("slides-21.jpg", "900", "528", "You can create rules for each field in your form. Determine if it's a required field, any min or max length, and the individual error message for each."),
    new Array("slides-22.jpg", "900", "528", "Each time a form is submitted the results are recorded and timestamped in the system."),
    new Array("slides-23.jpg", "900", "528", "You can view each record individually that is entered into the system in real time."),
    new Array("slides-24.jpg", "900", "528", "You can export all records in the system to a comma separated value (.csv) file."),
    new Array("slides-25.jpg", "900", "528", "You can also delete all the records for a particular form at any time."),
    new Array("slides-26.jpg", "900", "528", "Under the Security section to can manage users such as admins, designers or editors in the system."),
    new Array("slides-27.jpg", "900", "528", "Adding a new user to the system is done easily by clicking the Create New User link."),
    new Array("slides-28.jpg", "900", "528", "Assign a role for the user by selecting the type of access they are granted after logging into the system."),
    new Array("slides-29.jpg", "900", "528", "Each user can manage their own profile including the ability to change their password at any time."),
    new Array("slides-30.jpg", "900", "528", "That concludes our tour of Safire CMS v 2.0.1.1")
    
);

// Number of photos in this gallery
var photoNum = photoArray.length;

/*--------------------------------------------------------------------------*/

// Additional methods for Element added by SU, Couloir
Object.extend(Element, {
	getWidth: function(element) {
   	element = $(element);
   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   	element = $(element);
    	element.style.height = h +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

/*--------------------------------------------------------------------------*/

var Slideshow = Class.create();

Slideshow.prototype = {
	initialize: function(photoId) {
		this.photoId = photoId;
		this.photo = 'Photo';
		this.photoBox = 'Container';
		this.prevLink = 'PrevLink';
		this.nextLink = 'NextLink';
		this.captionBox = 'CaptionContainer';
		this.caption = 'Caption';
		this.counter = 'Counter';
		this.loader = 'Loading';
	},
	getCurrentSize: function() {
		// Get current height and width, subtracting CSS border size
		this.wCur = Element.getWidth(this.photoBox) - borderSize;
		this.hCur = Element.getHeight(this.photoBox) - borderSize;
	},
	getNewSize: function() {
		// Get current height and width
		this.wNew = photoArray[photoId][1];
		this.hNew = photoArray[photoId][2];
	},
	getScaleFactor: function() {
		this.getCurrentSize();
		this.getNewSize();
		// Scalars based on change from old to new
		this.xScale = (this.wNew / this.wCur) * 100;
		this.yScale = (this.hNew / this.hCur) * 100;
	},
	setNewPhotoParams: function() {
		// Set source of new image
		Element.setSrc(this.photo,photoDir + photoArray[photoId][0]);
		// Set anchor for bookmarking
		Element.setHref(this.prevLink, "#" + (photoId+1));
		Element.setHref(this.nextLink, "#" + (photoId+1));
	},
	setPhotoCaption: function() {
		// Add caption from gallery array
		Element.setInnerHTML(this.caption,photoArray[photoId][3]);
		Element.setInnerHTML(this.counter,((photoId+1)+'/'+photoNum));
	},
	resizePhotoBox: function() {
		this.getScaleFactor();
		new Effect.Scale(this.photoBox, this.yScale, {scaleX: false, duration: 0.3, queue: 'front'});
		new Effect.Scale(this.photoBox, this.xScale, {scaleY: false, delay: 0.5, duration: 0.3});
		// Dynamically resize caption box as well
		Element.setWidth(this.captionBox,this.wNew-(-borderSize));
	},
	showPhoto: function(){
		new Effect.Fade(this.loader, {delay: 0.5, duration: 0.3});
		// Workaround for problems calling object method "afterFinish"
		new Effect.Appear(this.photo, {duration: 0.5, queue: 'end', afterFinish: function(){Element.show('CaptionContainer');Element.show('PrevLink');Element.show('NextLink');}});
	},
	nextPhoto: function(){
		// Figure out which photo is next
		(photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++;
		this.initSwap();
	},
	prevPhoto: function(){
		// Figure out which photo is previous
		(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
		this.initSwap();
	},
	initSwap: function() {
		// Begin by hiding main elements
		Element.show(this.loader);
		Element.hide(this.photo);
		Element.hide(this.captionBox);
		Element.hide(this.prevLink);
		Element.hide(this.nextLink);
		// Set new dimensions and source, then resize
		this.setNewPhotoParams();
		this.resizePhotoBox();
		this.setPhotoCaption();
	}
}

/*--------------------------------------------------------------------------*/

// Establish CSS-driven events via Behaviour script
var myrules = {
	'#Photo' : function(element){
		element.onload = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.showPhoto();
		}
	},
	'#PrevLink' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.prevPhoto();
			soundManager.play('select');
		}
	},
	'#NextLink' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
			soundManager.play('select');
		}
	},
	a : function(element){
		element.onfocus = function(){
			this.blur();
		}
	}
};

// Add window.onload event to initialize
Behaviour.addLoadEvent(init);
Behaviour.apply();
function init() {
	var myPhoto = new Slideshow(photoId);
	myPhoto.initSwap();
	soundManagerInit();
}