// Showcase Carousel
// KyleOlsonDesign.com
// 2/14/09 modified: 3/12/09
// Written using MooTools v1.2
// Dependencies: koRandom (optional), dwProgressBar (optional, recommended), koTranslate (optional)

var koShowcase = new Class({
	initialize: function(Stop, page){
		if($defined(Stop)){
			$clear(slideperiodical);
		} else {
			if($defined(page)) { this.page = page; }
			else { this.page = 'showcase' }
			this.div = $('showcase');
			this.stage = $$('#showcase .middle a')[0];
			if($defined(this.div)){
				this.request();
			}
		}
	},
	
	setStage: function(){
		this.stage.setStyle('cursor','pointer');
		this.stage.dim = this.stage.getSize();
		this.stage.empty();
		this.slider = new Element('div',{
			'styles': {
				'height':this.stage.dim.y,
				'width':this.showcase.length*this.stage.dim.x
			}
		}).inject(this.stage);
		this.slider.set('morph', {
			'duration': 500,
			'link': 'chain'
		});
		this.div.setStyle('position','relative');
		this.prev = new Element('a',{
			'class':'handle prev',
			'href':'#',
			'events': {
				click: function(e){
					e.stop();
					e.stopPropagation;
					$clear(slideperiodical);
					this.slide(-1);
				}.bind(this)
			}
		}).inject(this.div);
		this.next = new Element('a',{
			'class':'handle next',
			'href':'#',
			'events': {
				click: function(e){
					e.stop();
					e.stopPropagation;
					$clear(slideperiodical);
					this.slide();
				}.bind(this)
			}
		}).inject(this.div);
		if (Browser.Engine.trident && $defined($('showcase'))){
			var shittybrowser = new Fx.Tween($('showcase'), {
				property: 'opacity',
				duration: 500
			});
			shittybrowser.start.pass([1], shittybrowser).delay(750);
		}
		this.loader();
	},
	
	loader: function(){
		// Create Progress bar Container
		this.progressbardiv = new Element('div').inject(this.stage, 'top');
		this.progressbardiv.setStyle('opacity',.3);
		// Define Progress Bar
		this.progressBar = new dwProgressBar({
			container: this.progressbardiv
		});
		var plarray = [];
		this.showcase.each(function(s){
			plarray.push(s.src);
		});

		new Asset.images(plarray, {
			onProgress: function(counter) {
				this.progressBar.set(counter + 1,plarray.length);
			}.bind(this),
			onComplete: function() {
				this.progressbardiv.dispose();
				this.loaded();
			}.bind(this)
		});
	},
	
	loaded: function(){
		//this.i=0; // use for starting with slide 0 (not random);
		this.i = koRandom(this.showcase.length);
		this.inject();
		this.slide(0);
		slideperiodical = this.slide.periodical(4500, this);
	},
	
	inject: function(){
		this.showcase.each(function(s){
			//this.height = Math.floor(this.stage.dim.y/this.showcase.length);
			//this.width = Math.floor(this.stage.dim.x/this.showcase.length);
			var el = new Element('img',{
				'src': s.src,
				'alt': s.slug,
				//'title':s.description,
				'styles': {
					'width':this.stage.dim.x,
					'height':this.stage.dim.y,
					'display':'block',
					'float':'left'
				},
				'events': {
					'click': function(e){
						url = 'http://www.kyleolsondesign.com/design/'+s.slug+'/';
						window.location = url;
					}
				}
			}).inject(this.slider);
		}.bind(this));
	},
	
	request: function(){
		var url = '/admin/json.php?page='+this.page;
		var request = new Request.JSON({
			url: url,
			onSuccess: function(jsonObj) {
				var showcase = new Object();
				showcase = jsonObj.showcase;
				this.showcase = new Array();
				showcase.each(function(o){
					if(o != undefined){ this.showcase.push(o); }
				}.bind(this));
				this.setStage();
			}.bind(this)
		}).get();
	},
	
	slide: function(n){ // n = steps to take, neg for go backwards
		if($defined(this.overlay)){this.overlay.dispose();}
		if(!$defined(n)){
			n = 1;
		}
		var x = this.stage.dim.x; // width of one slide
		var l = this.showcase.length-1; // total number of slides (starting at 0)
		//var i = this.slider.getStyle('margin-left').toInt(); // current slide
		//var i = -(Math.floor(i/x));
		nn = this.i+n; // Slide trying to go to
		if(nn>l){
			//console.log('case 1');
			this.i=0; // if trying to go above limit, go to 0
		} else if (nn<0){
			//console.log('case 2');
			this.i = l;// if trying to go below 0, go to limit
		} else {
			//console.log('case 3');
			this.i = nn; //if within max and min, go to slide
		}
		var t = -(this.i*x);
		this.slider.morph({
			//'opacity':.6,
			'margin-left':t
		});
		//this.slider.morph({
		//	'opacity':1
		//});
		this.addOverlay();
		this.setHref();
	},
	
	addOverlay: function(){
		this.overlay = new Element('div',{
			'class':'overlay',
			'styles':{
				'opacity': .875,
				'height': 0
			}
		});
		this.overlay.h2 = new Element('h2',{'html':this.showcase[this.i].displayname}).inject(this.overlay);
		this.overlay.p = new Element('p',{'html':this.showcase[this.i].description}).inject(this.overlay);
		this.overlay.inject(this.stage);
		//new koTranslate(null,this.overlay.p);

		this.slider.removeEvents();
		var height = 120;
		this.slider.addEvents({
			'mouseover': function(e){
				e.stop();
				e.stopPropagation();
				this.overlay.setStyle('height',height);
			}.bind(this),
			'mouseout': function(e){
				e.stop();
				e.stopPropagation();
				this.overlay.setStyle('height',0);
			}.bind(this)
		});
		this.overlay.removeEvents();
		this.overlay.addEvents({
			'mouseover': function(e){
				e.stop();
				e.stopPropagation();
				this.overlay.setStyle('height',height);
			}.bind(this),
			'mouseout': function(e){
				e.stop();
				e.stopPropagation();
				this.overlay.setStyle('height',0);
			}.bind(this)
		});
	},
	
	setHref: function(){
		var img = $$('#showcase img')[this.i];
		var alt = img.getProperty('alt');
		var href = '/design/'+alt+'/';
		this.stage.setProperty('href',href);

		//this.stage.removeEvents();
		//this.stage.addEvents({
		//	'click': function(e){
		//		 e.stop();
		//	}.bind(this)
		//});
	}
	
});

var slideperiodical = '';