/**
* SchockSlider
* @author Beau Bishop  < beau [at] webteks [dot] com >
* @revision $Id: $
*/
var SchockSlider = new Class({
	options: {
		effect : {
			wait: false,
			duration: 700,
			transition: Fx.Transitions.Quad.easeOut
		},
		animations : [
			{  //< slide 1
				anim1 : { text: "Customized Solutions", xpos: 35, ypos: 82 },
				anim2 : { text: "Superior Functionality", xpos: 158, ypos: 442 },
				anim3 : { text: "Excellent Smooth Running", xpos: 242, ypos: 287 }
			}
			// 			{  //< slide 2
			// 				anim1 : { text: "Text 1", xpos: 35, ypos: 482 },
			// 				anim2 : { text: "Text 2", xpos: 145, ypos: 282 },
			// 				anim3 : { text: "Text 3", xpos: 235, ypos: 52 }
			// 			},
			// 			{  //< slide 3
			// 				anim1 : { text: "Text 1", xpos: 165, ypos: 82 },
			// 				anim2 : { text: "Text 2", xpos: 205, ypos: 82 },
			// 				anim3 : { text: "Text 3", xpos: 235, ypos: 82 }
			// 			},
			// 			{  //< slide 4
			// 				anim1 : { text: "Text 1", xpos: 25, ypos: 242 },
			// 				anim2 : { text: "Text 2", xpos: 115, ypos: 352 },
			// 				anim3 : { text: "Text 3", xpos: 195, ypos: 312 }
			// 			},
			// 			{  //< slide 5
			// 				anim1 : { text: "Text 1", xpos: 18, ypos: 420 },
			// 				anim2 : { text: "Text 2", xpos: 105, ypos: 430 },
			// 				anim3 : { text: "Text 3", xpos: 250, ypos: 400 }
			// 			},
			// 			{  //< slide 6
			// 				anim1 : { text: "Text 1", xpos: 35, ypos: 52 },
			// 				anim2 : { text: "Text 2", xpos: 135, ypos: 52 },
			// 				anim3 : { text: "Text 3", xpos: 235, ypos: 52 }
			// 			}
		],
		clickHrefs : [ 
			{ href: "" },
			{ href: "product_applications/furniture.php" },
			{ href: "product_applications/industrial.php" },
			{ href: "product_applications/medical.php" },
			{ href: "product_applications/transportation.php" },
			{ href: "product_applications/appliances.php" }
		],
		showAtStart: 0,		///< index of slide to display on startup, default is null
		slides: []   		///< each slide must have a unique id attribute!
	},
	
	initialize: function (container,options) {
		this.setOptions(options);
		this.currentAnimation = null;
		this.slides = $$('#'+container+' .slide');
		this.interval = $$('#'+container+' .slide a')[1].getStyle('width').toInt();
		this.moveAmount = $(container).getStyle('width').toInt() - this.interval * $$('#'+container+' .slide a').length;
		this.fx = new Fx.Elements(this.slides, this.options.effect);
		
		this.slides.each(function(slide, i){
			slide.fx = slide.effects(this.options.effect);
			slide.animation = this.options.animations[i];
			slide.setStyle("left", i * this.interval);
			slide.getFirst().addEvent("click", this.handleClick.bindAsEventListener(this, i));
		},this);
		
		this.handleClick(null, this.options.showAtStart); //< init first slide
	},
	
	handleClick : function (e, i) {
		if(e) new Event(e).stop();
		if (i!=0 && this.slides[i].getFirst().hasClass('active')) {
			this.handleClick(null, i-1);
			return;
		}
		var curSlide = this.slides[i];
			curSlide.getElements("p").remove();
			curSlide.getFirst().addClass('active').setStyle('left','-47px').blur();
			
		var x = curSlide.getStyle("left").toInt();
		var anim = {}; 
			anim[i] = { left : [x, i*this.interval] }
			
		this.slides.each(function(slide, j) {
			if (i != j) slide.getFirst().removeClass('active');
			if (i > j) slide.getFirst().setStyle('left','-47px');
			if (i < j) slide.getFirst().setStyle('left','0px');
			var x2 = slide.getStyle("left").toInt();
			if (i > j) anim[j] = { left : [x2, j*this.interval] };
			if (i < j) anim[j] = { left : [x2, (j*this.interval) + this.moveAmount] }
			slide.getElements("p").each(function(p) { p.remove(); });
		},this);
		
		//if(!window.ie) curSlide.fx.start({"opacity":0.85}); //< IE doesnt like opacity and negative left positioning combined.
		this.fx.start(anim).chain(function(){
			curSlide.fx.start({"opacity":1});
		});
		
		if (i > 0) {
			var morebtn = new Element('img',{src:"images/home/more_info_btn.png"});
			var morelink = new Element('a',{href:this.options.clickHrefs[i].href});//.setText("Click here for more info");
			morebtn.injectInside(morelink);
			morelink.setStyles({
				position:"absolute", 
				width:"130px",
				border:"0",
				background:"none",
				display:"block",
				top:"245px",
				right:"70px"
				//"opacity":"0.8"
			});
			morelink.injectAfter(curSlide.getFirst());
		}

		this.currentAnimation = $clear(this.currentAnimation);
		this.currentAnimation = null;
		if (curSlide.animation) this.startAnimation.bind(this,curSlide).delay(1500);
	},
	
	startAnimation : function (slide) {
		var animation = slide.animation;
		slide.getElements("p").each(function(p) { p.remove(); });
		this.currentAnimation = this.animate.bind(this,[slide,animation.anim1]).delay(700);
		this.currentAnimation = this.animate.bind(this,[slide,animation.anim2]).delay(1400);
		this.currentAnimation = this.animate.bind(this,[slide,animation.anim3]).delay(2100);
	},
	
	animate : function (slide, anim) {
		var elem = new Element("p").setStyles({top: anim.xpos+'px', left: anim.ypos+'px', opacity: 0}).setText(anim.text);
		var fade = new Fx.Style(elem, "opacity", this.options.effect);
		elem.injectInside($(slide.id));
		fade.start(0,1);
	}
	
});
SchockSlider.implement(new Options, new Events);