$('.slide').each(function(i){
	$(this).attr('id','slide' + (i + 1))
		   .hide()
})
$('.how_to').hide()

var stage = $('#anitme_area');

var paper = Raphael('anitme_area', 970, 235);
	
	
function intro (zero) {

		var circleStyle1 = {}

var y = '#EA8E15',
	r = '#CF081C',
    g = '#207425'

var circles = [
				[85,50,40,r],   [153,12,22,y],  [179,15,10,g],  [230,50,42,y],
				[125,55,20,y],  [190,63,20,r],  [310,39,6,r],   [344,32,6,y],   
				[332,28,8,g],  	[368,23,8,r],   [390,30,11,y],  [498,128,5,g],
				[525,119,7,r],  [544,126,11,y], [504,59,10,g],	[484,52,11,r], 
				[544,54,8,y],   [695,118,9,g],	[510,32,6,y],   [484,40,6,r],   
				[468,57,8,g],	[466,135,6,r],  [280,130,25,g], [175,130,50,g],
				[870,110,22,g], [170,85,15,y],  [262,223,15,r], [313,133,13,r],
				[333,117,17,g], [905,159,25,y],	[625,192,12,r], [115,168,70,r], 
				[708,194,10,r],	[745,32,16,g],  [537,47,5,y],   [686,188,16,y],
				[786,190,20,g], [753,178,16,y], [714,108,7,g],	[682,115,6,y],  
				[636,117,11,r], [655,124,8,y],	[784,106,22,g], [827,122,42,y], 
				[870,173,23,r],	[938,113,22,y], [850,18,48,r],  [767,15,14,g],
				[484,125,10,r]
			]	

		var nextdelay = 0;
		var animeSpeed = 1100
		for (var i = circles.length - 1; i >= 0; i--) { 
			(function(){
				
				var circle = paper.circle(-circles[i][0],circles[i][1],circles[i][2]).attr({fill : circles[i][3], stroke : 0, opacity: 1 })
				
				if(i) {
					var animation = Raphael.animation({cx : circles[i][0], opacity : 0.2 }, animeSpeed, 'backOut')
					circle.animate(animation.delay(nextdelay))
				} else {
					var animation = Raphael.animation({cx : circles[i][0], opacity : 0.2 }, animeSpeed, 'backOut', function(){setTimeout(scene2,50)})
					circle.animate(animation.delay(nextdelay))
				}
				nextdelay += 50
				animeSpeed *= 1.01
			})()
		};	


		setTimeout(function(){
			paper.circle(-200,100,80).animate({cx : 1200}, 700, '>').attr({fill : r, stroke : 0, opacity: 0.2 })

		}, 1800)


		setTimeout(function(){
			paper.circle(-200,150,150).animate({cx : 1200}, 500, '>').attr({fill : y, stroke : 0, opacity: 0.2 })

		}, 1500)

		setTimeout(function(){
			paper.circle(-200,90,120).animate({cx : 1200}, 1800, '>').attr({fill : g, stroke : 0, opacity: 0.2 })

		}, 1000)


		setTimeout(function(){
			scenes.scene1()
		}, 2000)
	}

intro()
	
var scenes = {

	scene1 : function () {
								
								var dot = { 
									cx : 750, cy : 28, r  : 7, 
									createDot : function() { return paper.circle(this.cx,this.cy,this.r) },
									attr : {stroke : 0, opacity: 0}, colorSwitch : 1
								}

								var dotsList = paper.set();

								for (var i = 0; i < 10; i++) {
									for (var y = 0; y < 10; y++) {
										dotsList.push(dot.createDot().attr(dot.attr))
										dot.cx += 20
										
										switch(dot.colorSwitch) {
										case 1:
											dotsList[dotsList.length-1].attr({'fill':'#237F28'})
											dot.colorSwitch++
											break	
										case 2:
											dotsList[dotsList.length-1].attr({'fill':'#E10920'})
											dot.colorSwitch++
											break	
										case 3:
											dotsList[dotsList.length-1].attr({'fill':'#FF9D18'})
											dot.colorSwitch = 1
											break	
										}				
									}

									dot.cy += 20
									dot.cx = 750
								};

								function shuffle(sourceArray) {
											 for (var n = 0; n < sourceArray.length - 1; n++) {
												  var k = n + Math.floor(Math.random() * (sourceArray.length - n));
								
												  var temp = sourceArray[k];
												  sourceArray[k] = sourceArray[n];
												  sourceArray[n] = temp;
											 }
										}
								
								shuffle(dotsList);

								var dotting = {
									keepWaving : true,
									timeInStage : 4000,
									enterStage : function() {
													$('.how_to').delay(1500).fadeIn(1000)
													$('#slide1').delay(1500).fadeIn(1000)
													var firePoint = 300
													$.each(dotsList,function(){
														var thisDot = this;
														var ocY = this.attr('cy')
														var ocX = this.attr('cx')
														stage.delay(35,'scene1').queue('scene1',function(next){
															firePoint += 6
															thisDot.attr({cy:400, cx: firePoint, r : 0})
																	.animate({opacity : 1,r : 2 , cy : ocY, cx : ocX}, 1800, '<>', function(){ dotting.waving(thisDot) })
															next()
														})

													})
													stage.delay(dotting.timeInStage,'scene1').queue('scene1',function(next){
														dotting.exitStage()
														next()
													})
													$.dequeue(stage[0],'scene1')
												  },
									waving 	   : function(thisDot){
															if(dotting.keepWaving) {
																thisDot.animate({'r': 6}, 1000, function(){
																	this.animate({'r': 7}, 1000, function(){ dotting.waving(thisDot) })
																		})
																}
														},
									exitStage : function(){
													$('#slide1').delay(1000).fadeOut(1000)
													dotting.keepWaving = false;
													var floatingSpeend = 1000
													var length = dotsList.length;
													$.each(dotsList,function(i){
														var thisDot = this;
														var ocY = this.attr('cy')
														var ocX = this.attr('cx')
														stage.delay(25,'scene1').queue('scene1',function(next){
															thisDot.animate({opacity : 1, cy : -30}, floatingSpeend, '<>')
															thisDot.animate({r : 4}, 250, '<>')
															next()
														})
													})
													stage.delay(3500,'pre-scene2').queue('pre-scene2',function(next){
														scenes.scene2()
														next()
													}).dequeue('pre-scene2')
												 }
								}

								dotting.enterStage()
							},
	

	scene2 : function () {
		$('#slide2').fadeIn(1000)
	
		var gameBoardScene = {
			
			// Game Board //
			gameBoard : {
								createGameBoard : function(){
													this.gameBoardElement = paper.path([['M',75,0],['l',75,0],['l',0,150],['l',-150,0],
																			['l',0,-150],['l',75,0],['M',0,50],['l',150,0],
																			['M',0,50],['l',150,0],['M',0,100],['l',150,0],
																			['M',50,0],['l',0,150],['M',100,0],['l',0,150]])
												   .attr(this.gameBoardStyle)
												 },
								gameBoardStyle : {'stroke-width' : 5, 'stroke': '#FBC817', 'transform': 't765,50'},	
								animateBoard : function(){
										this.createGameBoard()
										this.gameBoardElement.attr({opacity: 0}).animate({opacity: 1}, 800, '<>')
									}
							},

			// Game Circles
			gameCircles : {
								set : paper.set(),
								array : [
											// 1st Pocket => start positions
											// 2nd Pocket => end positions
											[[275,-75],	[25,25]],
											[[0,-75],  	[25,75]],
											[[0,-75],  	[25,125]],
											[[0,-75],  	[75,25]],
											[[0,-75],  	[125,25]],
											[[300,125],	[75,75]],
											[[275,75], 	[75,125]],
											[[275,75], 	[125,75]]
										],

								create : function () {
									this.winline = paper.path('M975,125l0,0')
										 .attr({ stroke : 'green',
												  'stroke-linecap' : 'round',
												  'stroke-width': 8, 
													opacity: 1,
												   r : 4
												 })
									for (var i = 0; i < this.array.length; i++) {

										if(i%2 == 0) { var playerColor = 'red'; }
										else { var playerColor = 'green'; }

										var newCircle = this.array[i];
										this.set.push(paper.circle(newCircle[0][0],newCircle[0][1],11)
												.attr({
														fill: playerColor,
														stroke : 0
													  }))
									}
									this.set.translate(765,50)
								},
								animatePlayers : function() {
												var length = this.set.length;
												var winline = this.winline;
												$.each(this.set,function(i){
													var currentCircle = this
													stage.queue('scene2',function(next){
														currentCircle.animate({ cx: gameBoardScene.gameCircles.array[i][1][0], 
																						cy: gameBoardScene.gameCircles.array[i][1][1]}, 900, 'backOut')
														next()
													}).delay(300,'scene2')
													if(i == length-1) {
															stage.delay(300).queue('scene2',function(next){
																winline.animate({path : 'M930,125L750,125'}, 900, 'elastic')
																next()
															})
														}
												})
												stage.delay(2000,'scene2')
											},
								exitStage : function() {
									$('#slide2').delay(6000).fadeOut(1000)
									// exit circles
									$.each(this.set,function(i){
													var currentCircle = this
													stage.queue('scene2-circles',function(next){
														currentCircle.animate({r : 0}, 500, 'backIn')
														next()
													}).delay(90,'scene2-circles')
												})
														
								
									// exit board
									
									stage.delay(150,'pre-scene3').queue('pre-scene3',function(next){
										scenes.scene3()
										next()
									})
									
									stage.delay(2000,'scene2').queue('scene2', function(next){
												gameBoardScene.gameCircles.winline.animate({path: 'M1075,125l0,0'},800, 'backIn')
												next()
												
												//exit circles
												$.dequeue(stage[0],'scene2-circles')
											})
											.delay(750,'scene2').queue('scene2', function(next){
												gameBoardScene.gameBoard.gameBoardElement.animate({'stroke-width': 0, opacity: 0},300, '>')
												
												$.dequeue(stage[0],'pre-scene3')
												next()
											})
									$.dequeue(stage[0],'scene2')
									
									},	
											
								play : function(){
									this.create();
									this.animatePlayers();	
									this.exitStage();
								}
							}

		}

		gameBoardScene.gameBoard.animateBoard()
		gameBoardScene.gameCircles.play()
		
	
	},
	
	scene3 : function() {
				$('#slide3').delay(1500).fadeIn(1000)
				paper.customAttributes.segment = function (x, y, r, a1, a2) {
					
                    var flag = (a2 - a1) > 180,
                        clr = (a2 - a1) / 360;
                    a1 = (a1 % 360) * Math.PI / 180;
                    a2 = (a2 % 360) * Math.PI / 180;
                    return {
                        path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]]
                    };
                };

                function animate(ms) {
                    var start = -360,
                        val;
                    for (i = 0; i < ii; i++) {
                        val = 360 / total * data[i];
                        paths[i].animate({segment: [0, 0, 80, start, start += val]}, ms || 3000, "backOut");
                        paths[i].angle = start - val / 2;
                    }
                }

                var data = [24, 92, 32],
                    paths = paper.set(),
                    total,
                    start,
                    bg = paper.circle(0, 0, 0).attr({stroke: "#fff", "stroke-width": 4});
                data = data.sort(function (a, b) { return b - a;});

                total = 0;
                for (var i = 0, ii = data.length; i < ii; i++) {
                    total += data[i];
                }
                start = 0;
                for (i = 0; i < ii; i++) {
                    var val = 360 / total * data[i];
                    (function (i, val) {
						
						switch(i) {
							case 0 : var color = '#237F28'; break;
							case 1 : var color = '#FF9D18'; break;
							case 2 : var color = '#E10A21'; break;
						}
						
                  paths.push(paper.path()
							 .attr({
							         segment: [0, 0, 1, start, start + val],
							         stroke: "transparent", 'stroke-width': 0, transform: 't840,125',
									 fill: color
								   })
							 .click(function () {
                            total += data[i];
                            data[i] *= 2;
                            animate();
                        }));
                    })(i, val);
                    start += val;
                }
                animate(1000);
				
				stage.delay(900,'scene3').queue('scene3', function(next){
					paths[0].animate({transform: 't836,135s1.2,1.2'}, 500, 'backOut')
					next()
				})
				stage.delay(500,'scene3').queue('scene3', function(next){
					paths[0].animate({transform: 't840,125s1,1'}, 500, 'backOut')
					next()
				})
				
				stage.delay(100,'scene3').queue('scene3', function(next){
					paths[2].animate({transform: 't860,112s1.2,1.2'}, 500, 'backOut')
					next()
				})
				stage.delay(500,'scene3').queue('scene3', function(next){
					paths[2].animate({transform: 't840,125s1,1'}, 500, 'backOut')
					next()
				})
			
				stage.delay(100,'scene3').queue('scene3', function(next){
					paths[1].animate({transform: 't838,104s1.2,1.2'}, 500, 'backOut')
					next()
				})
				.delay(500,'scene3')
				.queue('scene3', function(next){
					paths[1].animate({transform: 't840,125s1,1'}, 500, 'backOut')
					next()
				})

				
				stage.delay(2000,'scene3')
				
				.queue('scene3', function(next){
					$('#slide3').delay(0).fadeOut(1000)
					paths.attr({transform: 't840,125,r0,1,1'})
					paths.animate({transform: 't1200,125,r300,1,1'},1000,'backIn')	
					next()
				})
				.delay(4000)
				.queue('scene3', function(next){
					scenes.scene4()
					next()
				})
				
				
				$.dequeue(stage[0],'scene3')
	}, 
	scene4 : function() {
		var spirals = paper.set()
		
		var spiralsObj = [
								[[60,40,15],[20,40,15],[40,60,15],[40,20,15]],
								[[0,0,35],[80,0,35],[0,80,35],[80,80,35],[40,-20,35],[100,40,35],[-20,40,35],[40,100,35]],
								[[-40,-40,50], [-80,40,50], [120,-40,50],[160,40,50], [-40,120,50],[40,160,50], [120,120,50], [40,-80,50]]
							  ]
		
		
		$.each(spiralsObj,function(i){
			var style, rotateSpeed;
			switch(i) {
				case 0 : 
					style = {
								'fill': '#E10920',
								'stroke': 'transparent',
								'opacity' : 0,
								'transform' : 't800,80s0.5,0.5'
							  }; 
							  
					rotateSpeed = '5000';
					break;
				case 1 : 
					style = {
								'fill': '#FF9D18',
								'stroke': 'transparent',
								'opacity' : 0,
								'transform' : 't800,80s0.5,0.5'
							  };
					rotateSpeed = '3200';
					break;
				case 2 : 
					style = {
								'fill': '#237F28',
								'stroke': 'transparent',
								'opacity' : 0,
								'transform' : 't800,80s0.5,0.5'
							  };
					rotateSpeed = '3100';
					break;
			}
			
			// this Level
			


		$.each(this,function(i){
				// this Circle
				spirals.push(paper.circle(this[0],this[1],this[2]).attr(style))
				spirals[spirals.length-1].animate({transform : 't800,80s0.2,0.25,r'+rotateSpeed+',40,40'}, 30000)
			})
		})
		stage.delay(800,'scene4')
		.queue('scene4',function(next){
			$('#slide4').delay(0).fadeIn(1000)
			spirals.animate({opacity: 0.8}, 2000)
			next()
		})
		.delay(10000,'scene4')
		.queue('scene4',function(next){
			$('#slide4').delay(0).fadeOut(1000)
			spirals.animate({opacity: 0}, 2000)
			next()
		})
		.delay(2000,'scene4')
		.queue('scene4',function(next){
			scenes.scene5()
			next()
		})
		$.dequeue(stage[0],'scene4')
		
		
	},
	scene5 : function() {
				var ball1 = paper.circle(0,0,0).attr({'stroke-width' : 2, stroke : 'transparent', fill : '#E10920', opacity: 0})
				var ball2 = paper.circle(0,0,0).attr({'stroke-width' : 2, stroke : 'transparent', fill : '#FE9C18', opacity: 0})
				var ball3 = paper.circle(0,0,0).attr({'stroke-width' : 2, stroke : 'transparent', fill : '#237C28', opacity: 0})
				
			 	    
		
				stage
				.queue('scene5',function(next){
					$('#slide5').delay(1500).fadeIn(1000)
					ball1.attr({cx : 0, cy : -30, opacity: 1}).transform('t690,30')
						.animate({cx: 0, cy : 0, r : 25, transform: 't840,60,r-360,50,30'}, 2000, '<>')
					next()
				})
				.delay(200,'scene5')
				.queue(function(next){
					ball2.attr({cx : 0, cy : -60, opacity: 1}).transform('t660,30')
						.animate({cx: 0, cy : 60, r : 25, transform: 't840,60,r360,70,70'}, 2000, '<>')
					next()
				})
				.delay(200,'scene5')
				.queue('scene5',function(next){
					ball3.attr({cx : 0, cy : 100, opacity: 1}).transform('t660,30')
						  .animate({cx: 0, cy : 120, r : 25, transform: 't840,60,r360,60,60'}, 2000, '<>')
					next()
				})
				.delay(5000,'scene5')
				
				
				var glow1, glow2, glow3;
				
				stage.queue('scene5',function(next){
					var glowSet = {
						  width :15,
						  fill : true,
						  opacity : 0.5,
						  offsetx : 0,
						  offsety : 0,
						  color : 'red'
					 }
				
					glow1 = ball1.glow(glowSet)
					glow1.transform('s0.5,0.5').animate({transform : 's1,1'}, 350, '>')
					next()
				})
				.delay(250,'scene5')
				.queue('scene5',function(next){
					ball1.animate({r : '0'}, 500, 'backIn')
					glow1.animate({transform : 's0.1,0.1'}, 500, '<')
					glow1.animate({opacity : 0}, 700, '<')
					next()
				})
				.delay(0,'scene5')
				.queue('scene5',function(next){
					var glowSet = {
						  width :15,
						  fill : true,
						  opacity : 0.5,
						  offsetx : 0,
						  offsety : 0,
						  color : '#FE9C18'
					 }
				
					glow2 = ball2.glow(glowSet)
					glow2.transform('s0.5,0.5').animate({transform : 's1,1'}, 350, '>')
					next()
				})
				.delay(250,'scene5')
				.queue('scene5',function(next){
					ball2.animate({r : '0'}, 500, 'backIn')
					glow2.animate({transform : 's0.1,0.1'}, 500, '<')
					glow2.animate({opacity : 0}, 700, '<')
					next()
				})
				.delay(0,'scene5')
				.queue('scene5',function(next){
					var glowSet = {
						  width :15,
						  fill : true,
						  opacity : 0.5,
						  offsetx : 0,
						  offsety : 0,
						  color : '#237C28'
					 }
				
					glow3 = ball3.glow(glowSet)
					glow3.transform('s0.5,0.5').animate({transform : 's1,1'}, 350, '>')
					next()
				})
				.delay(250,'scene5')
				.queue('scene5',function(next){
					ball3.animate({r : '0'}, 500, 'backIn')
					glow3.animate({transform : 's0.1,0.1'}, 500, '<')
					glow3.animate({opacity : 0}, 700, '<')
					next()
				})
				.delay(1000,'scene5')
				.queue('scene5',function(next){
					$('.how_to').fadeOut()
					$('#slide5').delay(0).fadeOut(1000)
					paper.clear()
					intro()
					next()
				})
				$.dequeue(stage[0],'scene5')
	}
}	
	
//scenes.scene4()