// Mootools

/*
	Moognify v. 2.0 

	Author:
		Tobias Wallin, Gravita. www.gravita.se
		
	License:
		MIT-style license
		
	Class: 
		Moognify
		
	Description:
		Enlarges images with an OS X style effect.
		
	Requirements:
		Mootools 1.2 or later, use EnlargeImage.js for previous mootools versions.
	
	Arguments:
		element - the image to enlarge
		options - the options
		
	Options:
		duration: miliseconds, duration of the enlarge effect. Defaults to 300.
		borderDuration: miliseconds, duration of the border effect. Defaults to 200.
		borderOpacity: opacity of the image border, defaults to 0.8.
		source: path to the large image. Optional.
		altText: The alt text will be used as image descrition if set to true. Defaults to true.
		text: Image description, overrides altText. Optional.
		
	CSS:
		The border styling is controlled via the css class ".moognifyBorder". 
		The borde has no default styling and will appear transparent til you set a background color.
		
	Example:
		<img src='imageThumb.jpg' alt='' onclick='new Moognify(this,{duration: 500, source: "imageLarge.jpg", text: "This is one of my pictures."});' />
*/
var LargeSrc = "";
var thumb = "";

/* ***************************************************************************** */
/*
var galleryWall = new Class({
	Implements: Options,
	
	options:	{
		page: null,
		starter: '01',
		id: null,
		next: null,
		img: null,
		width: null,
		height: null,
		top: null,
		left: null,
		enlarge: null,
		caption: null,
		swf: null
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.div();
		if(this.options.swf) this.setSWF();
		if(this.options.img) this.setImg();
		this.setCaption();
		this.loaded();
	},
	div: function(){
		if(this.options.id < 10){ this.options.id = 'div0'+this.options.id; }
		else { this.options.id = 'div'+this.options.id; }
		
		this.ArtWall = new Element('div', {
			'id': this.options.id,
			'class': 'galleryWall',
			'styles' : {
				'width': 'auto',
				'height': 484,
				'top': 0,
				'left': 0,
				'display': 'none'
				
			}
		});
		
		this.nextLink = new Element('a', {
			'id': 'next',
			'href': 'javascript:;',
			'html': 'Next ',
			'styles' : {
			}
		});
		
		this.prevLink = new Element('a', {
			'id': 'prev',
			'href': 'javascript:;',
			'html': 'Previous ',
			'styles' : {
			}
		});
		
		this.backLink = new Element('a', {
			'id': 'back',
			'href': 'commission_landing.php',
			'html': 'Back to names',
			'styles' : {
			}
		});
			
		this.ArtWall.inject($('gallery'));
		
		
		this.nextLink.addEvent('click',this.loadNext.bind(this));
		this.prevLink.addEvent('click',this.loadPrev.bind(this));
		
		if(this.options.next) this.nextLink.inject(this.ArtWall);
		if(page == 'commission') this.backLink.inject(this.ArtWall);
		if(this.options.prev){
			this.backLink.setStyle('bottom',30);
			this.prevLink.inject(this.ArtWall);
		}
			
	},
	loadNext: function(){
		element_next = $(this.options.id).getNext();
		element_this = $(this.options.id);
		
		var swapArt = new Fx.Style(element_this, 'opacity', {duration: 200, onComplete: function (){
			element_this.setStyle('display','none');
			element_next.setStyles({'opacity':1,'display':'block'});
			}
		}).start(0)
	},
	loadPrev: function(){
		element_prev = $(this.options.id).getPrevious();
		element_this = $(this.options.id);
		
		var swapArt = new Fx.Style(element_this, 'opacity', {duration: 200, onComplete: function (){
			element_this.setStyle('display','none');
			element_prev.setStyles({'opacity':1,'display':'block'});
			}
		}).start(0)
	},
	setImg: function(){
		
		this.LargeSrc = this.options.img.substr(0,this.options.img.lastIndexOf("."))+"_lg"+this.options.img.slice(-4);
		
		var LargeSrc = this.LargeSrc;
		
		this.artImg = new Element('img', {
			'id': 'art'+this.options.id,
			'src': this.options.img,
			'styles' : {
				'position' : 'relative',
				'top': 0,
				'left': 0
			}
		});
		
		if(this.options.enlarge){
			this.artImg.set('title','Enlarge');
			this.artImg.addEvent('click', function(){
				new Moognify(this,{source: LargeSrc, duration: 10});	
			 });
		}
		
		if(this.options.shadow) this.artImg.set('class','shadow');
		
		this.artImg.inject($(this.options.id));
		
		var tips = new Tips(this.artImg);
		
		this.artImg.addEvent('load', (function(){ 
			this.options.width = this.artImg.width;
			this.options.height = this.artImg.height;
			
			new artShadow({Img:$('art'+this.options.id)});
		}).bind(this));
		
	},
	setSWF: function(){
		this.titlecard = new Element('div',{
			'id': 'swfTitleCard',
			'styles' : {
				width: 377,
				height: 484
			}
		});
		
		this.titlecard.inject($(this.options.id));
		
		this.swf = new Swiff(this.options.swf, {
			id: 'titlecard',
			width: 377,
			height: 484,
			container: 'swfTitleCard'
		});
		
		$(this.options.id).appendChild(this.swf)
	},
	setCaption: function(){
		this.captionDiv = new Element('div', {
			'id': 'title',
			'styles' : {
			}
		});
		this.captionDiv.set('html',this.options.caption);
		this.captionDiv.inject($(this.options.id));
	},
	loaded: function(){
		if(starter){
			if(this.options.id == startDiv) $(startDiv).setStyle('display','block');
		}
		else{ $('div01').setStyle('display','block'); }
	}
});
*/
window.addEvent('load', function(){
	// Mouse Over page scrolling
	var scroll2 = new Scroller(document.body, {area: 150, velocity: .5	});
	
	// container
	document.body.addEvent('mouseover', scroll2.start.bind(scroll2));
	document.body.addEvent('mouseout', scroll2.stop.bind(scroll2));
	
	
});


var Moognify = new Class({
	Implements: Options,
	options:  {
		duration: 300,
		altText: "true",
		w: 960,
		h: null
	},
	initialize: function(element,options) {
		this.element = $(element);
		this.setOptions(options);
		this.defineText();
		this.storeCoordinates();
		this.setSource();
		this.create();
		this.loader();
	},
	initializeLoaded: function() {
		this.setPosition();
		this.zoom();
		if(thumb == "") thumb = this.element;
		this.image.addEvent('click', this.minimize.bind("",[this.image,this.element,"",this.options]));
	},
	storeCoordinates: function() {
		this.elementTop = $(this.element).getPosition().y;
		this.elementLeft = $(this.element).getPosition().x;
		this.elementWidth = $(this.element).getSize().x;
		this.elementHeight = $(this.element).getSize().y;
		this.browserWidth= window.innerWidth;
		this.browserHeight = window.innerHeight;
		this.browserScrollTop = document.getScroll().y;
	},
	setSource: function() {
		if(this.options.source) this.source = this.options.source;
		else this.source = this.element.src;
	},
	create: function() {
		if($("moognifyObject")) {
			this.minimize($("moognifyObject"),thumb,this.element,this.options);
		}
		this.image = new Element('img', {
			'styles': {
				'position': 'absolute',
				'top': '0px',
				'cursor': 'pointer',
				'z-index': '-99',
				'display': 'none'
			},
			'src': this.source,
			'id': 'moognifyObject'
		});
	},
	loader: function() {
		if(this.checkLoad()) {
			this.initializeLoaded.delay(100,this);
		} else {
			new Fx.Tween(this.element,'opacity').set(0.2);
			this.loader.delay(100,this,this.image);
		}
	},
	checkLoad: function() {
		if(this.image.width > 0) {
			return true;
		}
		else{
			return false;
		}
	},
	setPosition: function() {
		if(this.image.width) this.imageWidth = this.image.width;
		if(this.image.height) this.imageHeight = this.image.height;
		
		if(this.imageHeight < this.browserHeight) this.imageTop = ((this.browserHeight-this.imageHeight)/2)+this.browserScrollTop;
	
		if(this.imageWidth < this.browserWidth) this.imageLeft = ((document.getSize().x/2)-(this.imageWidth/2));
		
		if(this.options.text) this.imageTop -= 20;
		
		this.image.setStyles({
			'top': this.elementTop+"px",
			'left': this.elementLeft+"px",
			'width': this.elementWidth+"px",
			'height': this.elementHeight+"px",
			'z-index': '+999',
			'display': 'inline'
		})
		
		this.mask = new Element('div', {
			'styles': {
				'position': 'absolute',
				'z-index': '+998',
				'top': 0,
				'left': 0,
				'width': "100%",
				'height': "100%",
				'background': '#fff'
			},
			'id': 'zoomMask'
		});
		
		document.body.appendChild(this.mask);
		this.mask.appendChild(this.image);
	},
	zoom: function() {
//		new Fx.Tween(this.element,'opacity').set(0.2);
		var zoomImage = new Fx.Morph(this.image,{duration:this.options.duration});
		zoomImage.start({
			'top': [this.imageTop],
			'left': [this.imageLeft],
			'width': [this.imageWidth],
			'height': [this.imageHeight]
		});
	},
	defineText: function() {
		if(this.options.text) this.text = this.options.text;
		else if(this.options.altText == "true") this.text = this.element.alt;
	},
	minimize: function(image,element,thisElement,options) {

		$('zoomMask').remove();
		var zoomImage = new Fx.Morph(image,{duration:options.duration,onComplete: function() {
			new Fx.Tween(element,'opacity').set(1);
			if(thisElement) {
				thumb = thisElement;
			} else {
				thumb = "";
			}
			(function() { image.remove() }).delay(10);
		}});
		zoomImage.start({
			'top': [element.getPosition().y],
			'left': [element.getPosition().x],
			'width': [element.getSize().x],
			'height': [element.getSize().y]
		});
		$('main').effect('opacity', {duration: 200, transition: Fx.Transitions.linear}).start(1);
	}
	
	
});						 

/* ***************************************************************************** */

var artShadow = new Class({
	Implements: Options,
	options:	{
		Img: null,
		shadow: null,
		shadowColor: '#ccc'
	},
	initialize: function(options){
		this.setOptions(options);
		this.adjustImg();
		this.createShadow();
	},
	createShadow: function(){
		
		if($(this.options.Img).getElement('img').get('class','shadow')){
			var temp_img = this.options.Img;
			this.shadowDiv = new Element('div', {
				'styles': {
					'position': 'absolute',
					'top': +5,
					'left': -5,
					'width': temp_img.getElement('img').width,
					'height': temp_img.getElement('img').height,
					'opacity': .6,
					'display': 'block',
					'z-index': -100,
					'background-color': this.options.shadowColor
				},
				'id': 'dropShadow'
			});
			
//			if(window.ie) this.shadowDiv.setStyle('left',this.options.Img.getStyle('left').toInt()-10);
			
			this.shadowDiv.inject($('artImg'), 'inside')
//			$$('.galleryWall').append(this.shadowDiv);

		}
	},
	adjustImg: function(){
		var temp_img = this.options.Img;
		
		if(temp_img.getElement('img').height < 400){
			temp_img.setStyle('top',192);
			$$('#gallery').setStyle('height','auto');
		}
	}
});

/* ***************************************************************************** */


var startDiv = 'div01';	

window.addEvent('domready', function(){

	// Build galleryWall
	art_count = 0;
	/*
if(starter){ 
//		art_count = starter;
		startDiv = 'div'+starter;
		if(starter < 10) startDiv = 'div0'+starter;
		
		new galleryWall({id:(starter), img:$A(artwork)[starter-1]['img'], enlarge: $A(artwork)[starter-1]['zoom'], caption: $A(artwork)[starter-1]['caption'], shadow: $A(artwork)[starter-1]['shadow']});
	}

	
*/
/*var addListing = function(){
		if(art_count < $A(artwork).length){
		
		if((art_count+1) !== starter) new galleryWall({id:(art_count+1), next:(art_count < ($A(artwork).length)-1), prev:(art_count > 0), img:$A(artwork)[art_count]['img'], swf:$A(artwork)[art_count]['swf'], enlarge: $A(artwork)[art_count]['zoom'], caption: $A(artwork)[art_count]['caption'], shadow: $A(artwork)[art_count]['shadow']});
		art_count++;
		}else{
			$clear(Interval);
		}
	}
		
	var Interval = addListing.periodical(400);*/
	
	
});

window.addEvent('load', function(){
});