/*
 * demo.js
 * 
 * Defines effects and behaviors for the Fracture demo page.
 */

var Demo = new Class({
	//class variables
	'current': 1,			//the current slide position
	'old': 0,				//the previous slide position
	'duration': 300,		//the length of time in milliseconds that a slide should take
	'thumb_width': 262,		//the width of a sliding element that isn't the current selection
	
	//setup	the demo
	'initialize': function(){
		new Asset.css(baseUrl + 'css/demo.css', { });
	
    if ($$('#steps_wrapper > p').length == 0)
    {
      return;
    }

		var dm = this;
		
		dm.wrapper = $('demo');
		
		//initialize the positioning of the demo images
		$$('#demo_slide > img').each(function(el){
			if ( ! el.hasClass('current')){
				el.setStyle('left', dm.get_left(el.get('id').substring(9)));
			}
		});		
		
		//setup a click event for navigating using the dots or clicking a thumbnail
		$$('#demo_nav > a', '#demo_slide > img').addEvent('click', function(){
			dm.nav(this);
		});
		
		//hide all step text but the first one
		$$('#steps_wrapper > p').fade('hide');
		$$('#steps_wrapper > p')[0].fade('show');
	},

	//defines event behavior for clicks on demo navigation
	'nav': function(el){
		var dm = this;
		
		if (el.hasClass('current')){
			return;
		}
		else {
			
			//update the current slider position and change the nav dots to reflect that
			dm.old = dm.current;
			dm.current = el.get('id').substring('9');
			
			$$('#demo_nav > .current').removeClass('current');
			$('demo_nav_' + dm.current).addClass('current');
			
			dm.slide();
		}
	},
	
	//defines functionality for the sliding effect
	'slide': function(dir){
		var dm = this;
		var old = $('demo_img_' + dm.old);
		var cur = $('demo_img_' + dm.current)
		
		//slide the container div left or right appropriately
		$('demo_slide').set('tween', {'duration': dm.duration}).tween('left', -1 * (dm.current - 2) * dm.thumb_width);
		
		//run the effect for making the currently selected image a thumbnail 
		var m1 = new Fx.Morph(old, {'duration': dm.duration, 'transition': Fx.Transitions.Cubic.easeIn, 
			'onComplete': function(){
				old.removeClass('current')
			}
		});
		m1.start({
			'top': 85,
			'left': dm.get_left(dm.old),
			'width': dm.thumb_width,
			'height': 180,
			'z-index': 1000,
			'cursor': 'pointer'
		});		
		
		//run the effect for making the selected thumbnail into the current image
		var m2 = new Fx.Morph(cur, {'duration': dm.duration, 'transition': Fx.Transitions.Cubic.easeIn,
			'onComplete': function(){
				cur.addClass('current')
			}
		});
		m2.start({
			'top': 0,
			'left': dm.get_left(dm.current),
			'width': 568,
			'height': 432,
			'z-index': 1010,
			'cursor': 'default'
		});
		
		//check if the transition is between pictures that are not consecutive and scroll the in between pictures
		if ((dm.old - dm.current).abs() > 1){
			$$('#demo_slide > img').each(function(el){
				var id = el.get('id').substring(9);
				if((id < dm.current && id > dm.old) || (id > dm.current && id < dm.old)){
					el.set('tween', {'duration': dm.duration}).tween('left', dm.get_left(id));
				}
			});
		}
		
		//fade out the old step text and fade in the new text
		$('step_' + dm.old).set('tween', {
			'duration': dm.duration / 2,
			'onComplete': function(){
				$('step_' + dm.current).set('tween', {'duration': dm.duration / 2}).fade('in');
			}
		}).fade('out');
	},
	
	//determines the target left position for a sliding element
	'get_left': function(c){
		if (c == this.current){
			return (this.current - 1) * this.thumb_width - 118;
		}
		else if(c < this.current){
			return (c - 1) * this.thumb_width - 13;
		}
		else{
			return c * this.thumb_width - 96;
		}
	}
});

//instantiate the demo class
window.addEvent('domready',function(){
	dm = new Demo();
});