Element.addMethods({
		bringToFront : function(p_eElement){p_eElement.setStyle({zIndex:'2'});return p_eElement;},
		sendToBack : function(p_eElement){p_eElement.setStyle({zIndex:'1'});return p_eElement;},
		getHeight : function (p_eElement){return p_eElement.offsetHeight;},
		getWidth : function (p_eElement){return p_eElement.offsetWidth;},		
		getCenterHeight : function(p_eElement){return (p_eElement.offsetHeight/2);},
		getCenterWidth : function(p_eElement){return (p_eElement.offsetWidth/2);},
		isLoaded : function (p_eElement){return (p_eElement.complete);}
	}
);

var PDGallery = Class.create();
PDGallery.prototype = {
	initialize: function(){
		
	},
	start: function(target, p_sImage, scope, calla){
		this.slideItems = [];
		this.m_eTarget = $(target);
		this.m_eLoading = null;
		this.isFirst = 0;
		this.activeSlide = null;
		while( this.m_eTarget.hasChildNodes()){
			this.m_eTarget.removeChild( this.m_eTarget.firstChild );
		}
		var eImage = document.createElement('img');
		eImage.setAttribute('src', p_sImage);
		this.m_eTarget.appendChild(eImage);		
		this.m_eCurrent = eImage;
		new Effect.Appear(this.m_eCurrent, {duration: 1.5, from: 0.0, to: 1.0});
		slideItems = this.slideItems;
		items = $$('a.'+scope);
		for(x = 0; x < items.length; x++){
			eAnchor = $(items[x]);
			var sRel = String(eAnchor.getAttribute('rel'));			
			if(eAnchor.getAttribute('href') && (sRel.toLowerCase().match('gallery'))){
				calla.slideItems.push(eAnchor.id);
				eAnchor.m_eRef = this;
				eAnchor.onclick = function(){calla.loadImage(this);return false;}
				eAnchor.onmouseover = function(){this.firstChild.setAttribute( 'src', 'images/josh/circle_over.png');}
				eAnchor.onmouseout = function(){this.firstChild.setAttribute( 'src', 'images/josh/circle_off.png');calla.setActiveSlide();}
			}
			if(eAnchor.getAttribute( 'href' ) && ( sRel.toLowerCase().match( 'gall1' ) ) ) {
				calla.slideItems.push(eAnchor.id);
				this.loadImage(eAnchor);
				eAnchor.onclick = function(){calla.loadImage(this); return false;}
				eAnchor.onmouseover = function(){this.firstChild.setAttribute( 'src', 'images/josh/circle_over.png');}
				eAnchor.onmouseout = function(){this.firstChild.setAttribute( 'src', 'images/josh/circle_off.png');calla.setActiveSlide();}
			}
		}
	},

	loadImage: function(p_eAnchor){
		var sImage = p_eAnchor.getAttribute( 'href' );
		var eImage = document.createElement( 'img' );
		eImage.setAttribute( 'src', sImage );	
		$(eImage).setStyle( { position: 'absolute', left: '0px', top: '0px', opacity: '0' } );
		this.clearSlides();
		this.m_eTarget.appendChild( eImage );
		if(!eImage.isLoaded()) {
			Event.observe( eImage, 'load', this._onLoad.bindAsEventListener( null, this, eImage) );
		} else {
			this.m_eLoading = null;
			this._transImage(eImage);
		}
		this.activeSlide = p_eAnchor.getAttribute('id');
		this.setActiveSlide();
	},
	
	_onLoad: function( p_eEvent, p_oRef, p_eImage) {
		p_oRef._transImage(p_eImage);
	},

	_transImage : function(url) {
		if(this.m_eLoading != null) this.m_eLoading.remove();
		new Effect.Appear( url, { duration: 0.9, from: 0.0, to: 1.0 } );
		new Effect.Appear( this.m_eCurrent, { duration: 0.9, from: 1.0, to: 0.0, afterFinish: this._removeImage } );
		this.m_eCurrent = url;
	},

	_removeImage: function( p_oObj ) {
		p_oObj.element.remove();
	},
	
	clearSlides: function(){
		for(i = 0; i< this.slideItems.length; i++){
			$(this.slideItems[i]+"C").setAttribute( 'src', 'images/josh/circle_off.png');	
		}
	},

	setActiveSlide: function(){
		itemID = this.activeSlide;
		$(itemID+"C").setAttribute( 'src', 'images/josh/circle_on.png');	
	}
}