// Capture The Power



/****************************************************
* Initialise CTP Slider								*
*													*
*****************************************************/

var CtpSlider = new Class({

	Implements: [Events, Options],

	options: {		
		speed: 800,
		viewable: 4,
		sWidth: 628
	},

	initialize: function(holder, options){
		this.setOptions(options);
		this.holder = holder;
		this.ul = this.holder.getElement('ul');
		if(this.ul){
			this.lis = this.ul.getElements('li');
			this.leftButton = this.holder.getElement('.left-button');
			this.rightButton = this.holder.getElement('.right-button');
			this.current = 0;
			this.ports = Math.ceil(this.lis.length / this.options.viewable);
			this.busy = false;
			
			this.fx = new Fx.Morph(this.ul, {
				duration: this.options.speed,
				transition: Fx.Transitions.Cubic.easeOut,
				onComplete: function(){ this.busy = false; }.bind(this)
			});
			
			if(this.lis.length > this.options.viewable && this.leftButton && this.rightButton){
				this.leftButton.setStyle('visibility', 'visible');
				this.leftButton.addEvents({
					'mouseenter': function(){
						this.leftButton.setStyle('background-image', this.leftButton.getStyle('background-image').replace('_left.png', '_left_over.png'));
					}.bind(this),
					
					'mouseleave': function(){
						this.leftButton.setStyle('background-image', this.leftButton.getStyle('background-image').replace('_left_over.png', '_left.png'));
					}.bind(this),
					
					'click': function(){
						this.slide('left');
					}.bind(this)
				});
				
				this.rightButton.setStyle('visibility', 'visible');
				this.rightButton.addEvents({
					'mouseenter': function(){
						this.rightButton.setStyle('background-image', this.rightButton.getStyle('background-image').replace('_right.png', '_right_over.png'));
					}.bind(this),
					
					'mouseleave': function(){
						this.rightButton.setStyle('background-image', this.rightButton.getStyle('background-image').replace('_right_over.png', '_right.png'));
					}.bind(this),
					
					'click': function(){
						this.slide('right');
					}.bind(this)
				});
			}
		}
	},
	
	slide: function(dir){		
		if(this.busy){ return false; }
		
		if(dir == 'left'){			
			if(this.current > 0){ this.current--; }
			else { return false; }
		} else {
			if(this.current < this.ports-1){ this.current++; }
			else { return false; }
		}
		
		this.fx.start({ 'margin-left': -1 * this.current * this.options.sWidth });
		this.busy = true;
	}
});


function initCtpSlider(){
	var cpts = new CtpSlider($('ctp-overview-latest-images'), {});
}





/****************************************************
* Build Pagination Nav on Gallery Page				*
*													*
*****************************************************/

function getCtpOffsetGallery(a){
	var req, fx, as;
	if(a.get('href')){
		fx = new Fx.Morph($('ctp-latest-images-inner'), {
			duration: 600,
			onComplete: function(){}
		});
		
		req = new Request({
			method: 'get',
			url: a.get('href'),
			onRequest: function(){},
			onSuccess: function(text, xml){
				$('ctp-latest-images-inner').getElement('.content').innerHTML = text;
				as = $('ctp-latest-images-inner').getElements('a.lb');
				$each(as, function(a,i){
					a.addEvents({
						'keypress': function(event){ if(event.key){ if(event.key == 'space' || event.key == 'enter'){ event.stop(); openLbPage(a); } } },
						'click': function(event){ event.stop(); openLbPage(a); a.blur(); }
					});
				});
				
				fx.start({'opacity': 1});
			},
			onFailure: function(xhr){}
		}).send();
	}
}


function dimCtpGalleryPagination(pa){
	var foundAt = -1, as, divs = $('ctp-latest-images').getElements('.paginate');
	$each(divs, function(div, ind){
		as = div.getElements('.content a');
		$each(as, function(a, ind2){
			if(a == pa){ foundAt = ind2; }
			if(!a.hasClass('dim')){ a.addClass('dim'); }
		});
		
		if(foundAt >= 0){
			as[foundAt].removeClass('dim');
		}
	});
}


function buildCtpGalleryPagination(){	
	var pags, req, numRows, ul, li, a, ports, i, j, className, fx, pagLinks;
	if($('ctp-latest-images')){
		pags = $('ctp-latest-images').getElements('.paginate .content');		
		
		fx = new Fx.Morph($('ctp-latest-images-inner'), {
			duration: 600,
			onComplete: function(){
				pagLinks = $('ctp-latest-images').getElements('.paginate a');
				$each(pagLinks, function(a, ind){
					if(a.hasClass('pClicked')){
						getCtpOffsetGallery(a);						
					}
				});				
			}
		});
		
		req = new Request({
			method: 'get',
			url: root + 'sponsorship/arts/capture-the-power/numRows.php',
			onRequest: function(){},
			onSuccess: function(text, xml){
				if(text){
					numRows = text.toInt();
					ports = Math.ceil(numRows/24);
					if(ports > 0){
						for(i=0; i<pags.length; i++){
							ul = new Element('ul', {});
							for(j=0; j<ports; j++){
								li = new Element('li', {});
								if(j > 0){ className = 'dim'; }
								else { className = ''; }

								a = new Element('a', {
									'href': root + 'sponsorship/arts/capture-the-power/getThumbnails.php?offset=' + j,
									'class': className,
									'html': j+1,
									'events': {
										'click': function(event){
											event.stop();
											pagLinks = $('ctp-latest-images').getElements('.paginate a');
											if(pagLinks > 2){
												pagLinks.removeClass('pClicked');
												this.addClass('pClicked');
												dimCtpGalleryPagination(this);
												fx.start({'opacity': 0});											
											}
										}
									}
								}).inject(li);
								li.inject(ul);
							}
							
							ul.inject(pags[i]);
						}
					}
				}
			},
			onFailure: function(xhr){}
		}).send();
	}
}




/****************************************************
* Get Capture The Power Latest Image (thumbnails)	*
*													*
*****************************************************/

function getCtpLatestImages(offset){
	var div, content, req, url;
	if($('ctp-latest-images-inner') || $('ctp-overview-latest-images')){
		if($('ctp-latest-images-inner')){ div = $('ctp-latest-images-inner'); }
		else { div = $('ctp-overview-latest-images'); }
		
		url = root + 'sponsorship/arts/capture-the-power/getThumbnails.php';
		if(offset){
			url = url + '?offset=' + offset;
		}
		
		content = div.getElement('div.content');
		if(content){
			req = new Request({
				method: 'get',
				url: url,
				onRequest: function(){},
				onSuccess: function(text, xml){
					content.innerHTML = text;
					if(div.get('id') == 'ctp-overview-latest-images'){
						initCtpSlider();
					}
				},
				onFailure: function(xhr){}
			}).send();
		}
	}
}

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

			Capture the Power Gallery

******************************************************************/
var CtpCarousel = new Class({

	Implements: [Events, Options],

	options: {
		content: null,
		inner: null,
		leftButton: null,
		rightButton: null
	},

	initialize: function(div, options){
		this.setOptions(options);
		this.wrapper = div;
		this.slides = this.wrapper.getElements('.slide');
		this.content = this.options.content;
		this.inner = this.options.inner;
		this.leftButton = this.options.leftButton;
		this.rightButton = this.options.rightButton;
		this.busy = false;
		this.currentSlide = 0;
		this.slideX = 0;		
		
		if(this.slides.length > 1 && this.leftButton && this.rightButton && this.content && this.inner){
			this.slideX = this.content.getSize().x;
			this.fx = new Fx.Morph(this.inner, {
				duration: 600, 
				transition: Fx.Transitions.Cubic.easeOut,
				onComplete: function(){
					this.busy = false;
				}.bind(this)
			});
		
			this.leftButton.addEvents({
				'click': function(){ this.slide('left'); }.bind(this),
				'mouseover': function(){ this.hover('left','over'); }.bind(this),
				'mouseout': function(){ this.hover('left','out'); }.bind(this)
			});
			
			this.rightButton.addEvents({
				'click': function(){ this.slide('right'); }.bind(this),
				'mouseover': function(){ this.hover('right','over'); }.bind(this),
				'mouseout': function(){ this.hover('right','out'); }.bind(this)
			});
			
			this.leftButton.setStyle('visibility', 'visible');			
			this.rightButton.setStyle('visibility', 'visible');
		}
	},
	
	slide: function(dir){
		if(this.busy){ return; }
		this.busy = true;
		
		if(dir == 'left'){ this.currentSlide--; }
		else if(dir == 'right'){ this.currentSlide++; }
		
		if(this.currentSlide <= 0){
			this.currentSlide = 0;
			this.leftButton.setStyles({
				'background-image': this.leftButton.getStyle('background-image').replace(/left.gif/, 'left0.gif').replace(/left1.gif/, 'left0.gif'),
				'cursor': 'auto'
			});
			
			this.rightButton.setStyles({
				'background-image': this.rightButton.getStyle('background-image').replace(/right0.gif/, 'right.gif'),
				'cursor': 'pointer'
			});
			
		} else if(this.currentSlide >= (this.slides.length - 1)){
			this.currentSlide = this.slides.length - 1;
			this.leftButton.setStyles({
				'background-image': this.leftButton.getStyle('background-image').replace(/left0.gif/, 'left.gif'),
				'cursor': 'pointer'
			});
			
			this.rightButton.setStyles({
				'background-image': this.rightButton.getStyle('background-image').replace(/right.gif/, 'right0.gif').replace(/right1.gif/, 'right0.gif'),
				'cursor': 'auto'
			});
			
		} else {
			if(dir == 'left'){
				this.rightButton.setStyles({
					'background-image': this.rightButton.getStyle('background-image').replace(/right0.gif/, 'right.gif'),
					'cursor': 'pointer'
				});
				
			} else {
				this.leftButton.setStyles({
					'background-image': this.leftButton.getStyle('background-image').replace(/left0.gif/, 'left.gif'),
					'cursor': 'pointer'
				});
			}
		}
		
		this.fx.start({
			'margin-left': -1 * this.currentSlide * this.slideX
		});
	},
	
	hover: function(dir, type){
		if(dir == 'left'){
			if(this.currentSlide > 0){
				if(type == 'over'){
					this.leftButton.setStyles({
						'background-image': this.leftButton.getStyle('background-image').replace(/left.gif/, 'left1.gif'),
						'cursor': 'pointer'
					});
				} else {
					this.leftButton.setStyles({
						'background-image': this.leftButton.getStyle('background-image').replace(/left1.gif/, 'left.gif'),
						'cursor': 'pointer'
					});
				}
			}
			
		} else if(dir == 'right'){
			if(this.currentSlide < (this.slides.length - 1)){
				if(type == 'over'){
					this.rightButton.setStyles({
						'background-image': this.rightButton.getStyle('background-image').replace(/right.gif/, 'right1.gif'),
						'cursor': 'pointer'
					});
				} else {
					this.rightButton.setStyles({
						'background-image': this.rightButton.getStyle('background-image').replace(/right1.gif/, 'right.gif'),
						'cursor': 'pointer'
					});
				}
			}
		}
	}
});



function initCtpCarousel(){
	var sliders = $$('.ctp-gallery-slider');
	var leftButtons = $$('.ctp-gallery-slider-left');
	var rightButtons = $$('.ctp-gallery-slider-right');
	var contents = $$('.ctp-gallery-slider-content');
	var inners = $$('.ctp-gallery-slider-inner');
	
	if(sliders.length > 0 && leftButtons.length == sliders.length && rightButtons.length == sliders.length && contents.length == sliders.length && inners.length == sliders.length){
		var carousels = [];
		$each(sliders, function(sl, ind){
			carousels[ind] = new CtpCarousel(sl, {
				content: contents[ind],
				inner: inners[ind],
				leftButton: leftButtons[ind],
				rightButton: rightButtons[ind]
			});
		});
	}
}


function showCtpTabs(a, tabs, layers, ind){
	$each(layers, function(layer, ind2){
		if(!layer.hasClass('tab-hidden')){
			layer.addClass('tab-hidden');
		}
	});
	
	$each(a.getParent('ul').getElements('li'), function(li, ind3){
		if(li.hasClass('on')){
			li.removeClass('on');
		}
	});
	
	a.getParent('li').addClass('on');
	a.getParent('li').removeClass('shover');	
	
	layers[ind].removeClass('tab-hidden');
}


function initCtpTabs(){
	if($('gallery-menu')){
		var tabs = $$('#gallery-menu a');
		var layers = $$('.ctp-layer');
		if(layers.length == tabs.length){
			$each(tabs, function(a,ind){
				a.addEvents({
					'click': function(event){
						event.stop();
						showCtpTabs(this, tabs, layers, ind);
					},
					
					'focus': function(event){
						showCtpTabs(this, tabs, layers, ind);
					},
					
					'keypress': function(event){
						if(event.key){
							if(event.key == 'space' || event.key == 'enter'){
								event.stop();
							} 
						} 
					},
					
					'mouseover': function(){
						if(browser.isIE5 || browser.isIE6){
							this.getParent().addClass('shover');
						}
					},
					
					'mouseout': function(){
						if(browser.isIE5 || browser.isIE6){
							this.getParent().removeClass('shover');
						}
					}
				});
			});
		}
	}
}




window.addEvent('domready', function() {
	buildCtpGalleryPagination();
	getCtpLatestImages();
	initCtpCarousel();
	initCtpTabs();
});