//Scrollbar Breakout 2006 intersmash.com
//This file was designed to be used within an iframe found at http://www.intersmash.com/scrollbar-breakout/
//Feel free to reuse anything you wish
//Contact at http://www.intersmash.com/scrollbar-breakout/contact/







 //game play variables
 var x,y,ball,body,dir,english,brickx,bricky,color,level=1,lives=0,score=0,brickhit;

 //height of the window
 var h=490;

 //ball increment in pixels
 var inc=10;

 //time interval between increments in ms
 var interval=30;

 //Level Data
 var datax=new Array('',
      	new Array(0,0,0,0,20,20,20,20,40,40,40,40,60,60,60,60),
	new Array(100,100,260,260,   120,120,80,80,   140,140,60,60, 160,160,40,40),
	new Array(0,0,0,0,20,20,20,20,40,40,40,40,60,80,80,60),
	new Array(0,0,20,20,40,40,60,60,80,80,100,100,500,400),
	new Array(40,40,40,40,0,20,60,100,140,180,220,260),
	new Array(0,0,0,20,20,20,40,40,40,60,60,60,300,400,500,600));

 var datay=new Array('',
	new Array(0,125,250,375,0,125,250,375,0,125,250,375,0,125,250,375,0,125,250,375),
	new Array(50,325,100,275,   100,275,100,275,  100,275,100,275, 100,275,100,275),
	new Array(0,125,250,375,0,125,250,375,0,125,250,375,0,125,250,375,0,125,250,375),
	new Array(0,375,25,350,50,325,75,300,100,275,125,250,175,175),
	new Array(40,165,290,415,375,375,375,375,375,375,375,375),
	new Array(75,200,325,75,200,325,75,200,325,75,200,325,175,175,175,175));

 var datac=new Array('',
	new Array('#66f','#66f','#66f','#66f','#f63','#f63','#f63','#f63','#cf6','#cf6','#cf6','#cf6','#f69','#f69','#f69','#f69'),
	new Array('#fff','#fff','#fff','#fff','#66f','#66f','#66f','#66f','#f63','#f63','#f63','#f63','#cf6','#cf6','#cf6','#cf6'),
	new Array('#66f','#66f','#66f','#66f','#f63','#f63','#f63','#f63','#cf6','#cf6','#cf6','#cf6','#f69','#fff','#fff','#f69'),
	new Array('#66f','#66f','#fff','#fff','#f63','#f63','#fff','#fff','#cf6','#cf6','#fff','#fff','#f69','#f69'),
	new Array('#fff','#fff','#fff','#fff','#66f','#66f','#cf6','#cf6','#f69','#f69','#f63','#f63'),
	new Array('#66f','#66f','#66f','#f63','#f63','#f63','#cf6','#cf6','#cf6','#f69','#f69','#f69','#fff','#fff','#fff','#fff'));



window.onload=function(){

	//If framed (desired), set up the environment
  	if (self != top) {
		body=document.getElementsByTagName('body')[0];
		drawbricks();
		ball=document.getElementById('ball');
		message=document.getElementById('message');

		updatescore();

		//write a start screen
    		messagestring="<span onclick=\"play(true)\">START</span>";
    		writemessage("black",false,messagestring);

	}

	//Or, load game in parent frame
  	else {
		location.href="http://www.intersmash.com/scrollbar-breakout/";
	}
}





//Draw at least 20 unique bricks for various level configurations
function drawbricks(){
  	string="";
  	for (pointer=0;pointer<20;pointer++){
      		string+='<div id="b'+pointer+'" class="brick"></div>';
  	}
  	body.innerHTML+=string;
}






//Start playing!
function play(newLevel){

	//Starting fresh?
  	if (lives<1){
		lives=4;
		level=1;
		score=0;  
		newLevel=true; 
  		updatescore();
	}
	
	//Draw a new level?
  	if (newLevel){
		drawlevel(level);
	}

	//reset some variables for game start
  	x=100;
  	y=10;
  	english=1;
	dir=true;
  	message.style.display="none";
  	ball.style.display="block";
  	body.style.backgroundColor="black";

	//Start the motion
  	i=setInterval('moveit()',interval);

}








//Draw a new level
function drawlevel(loadLevel){

	//Make sure level exists.  If not, recycle.
	if(loadLevel>datax.length-1){loadLevel=datax.length-1;}

	//reset arrays
  	brickx=new Array();
  	bricky=new Array();
  	color=new Array();

	//load level data
  	for (pointer=0;pointer<datax[loadLevel].length;pointer++){
  		brickx[pointer]=datax[loadLevel][pointer];
  		bricky[pointer]=datay[loadLevel][pointer];
  		color[pointer]=datac[loadLevel][pointer];
	}

	//Style the appropriate bricks
  	for (pointer=0;pointer<brickx.length;pointer++){
   		b=document.getElementById('b'+pointer);
   		b.style.display="block";
   		b.style.top=bricky[pointer]+"px";
   		b.style.left=brickx[pointer]+"px";
   		b.style.backgroundColor=color[pointer];
  	}
}







//The motion of the ball
function moveit(){

	//Update the ball Y position (with english!)
  	y+=english;

	//style the ball in its new position
  	ball.style.left=x+"px";
  	ball.style.top=y+"px";

	//Update the ball X position
  	x =(dir)?x+inc:x-inc;

	//Ball has reached the right side?
	if (x>685){

        	//Has the ball hit our scrollbar?
		//Make a *guess* at the position of the scrollbar.  
		
		//How far have we scrolled?
  		ps=self.pageYOffset;

		//We know how tall the window is.  
		//We know how tall the content is.
		//We know how far we've scrolled from the top.  So...
		v=Math.round((ps/100)*(h/51))-5;

		//Yes!
		if ((y>v-15)&&(y<v+65)){

			//Reverse the ball direction
    			dir=false;

			//Apply some english to that ball depending on which part of the paddle it hit
    			english=Math.round(-(30-(y-v))*.45);

	   	}

		//No!  Miss!
   		else {
			outofbounds();
 		}
  	}

	//Has ball reached either the top of the bottom of the screen? If so, reverse english.
  	if (y<0){english=-english;}
  	if (y>h){english=-english;}

	//Ball reached the left side? If so, reverse direction.
	if (x<0){dir=true;}

  	//Has ball collided with any brick?

	//Set temp collision variable
  	brickhit=false;

	//loop through bricks and check brick coords against ball coords
  	for (pointer=0;pointer<brickx.length;pointer++){
   		if ((x<brickx[pointer]+15)&&(x>brickx[pointer])&&(y>bricky[pointer]-15)&&(y<bricky[pointer]+125)){

			//A hit! 
			brickcollision(pointer); 

			//change ball direction
			if (dir){dir=false;x-=inc; }
			else {dir=true; x+=inc; }

		}

	}

	//Other things to do if a brick was hit
  	if (brickhit==true){

  		//check for cleared screen by looping through array and checking values.
  			win=true;
  			for (pointer=0;pointer<brickx.length;pointer++){
   				if ((color[pointer]!="#fff")&&(brickx[pointer]>-50)){win=false;}
  			}

			//true?
  			if (win==true){
    				
				//stop the motion
				clearInterval(i)

				//increase level
 				level++;

				//write a message
    				messagestring="<span onclick=\"play(true)\">LEVEL "+level+"</span>";
    				writemessage("#cf3",true,messagestring);

		 	}

		//update the score
  		updatescore();
  	}
}








function writemessage(bgcolor,hidebricks,messagestring){
	ball.style.display="none";
	body.style.backgroundColor=bgcolor;
	if (hidebricks){for (pointer=0;pointer<brickx.length;pointer++){ document.getElementById('b'+pointer).style.display="none"; }}
    	message.innerHTML=messagestring;
    	message.style.display="block";
}







//Ball out of bounds
function outofbounds(){

	//stop the motion
    	clearInterval(i)

	//remove a life
 	lives--;

	//set some message text depending on lives left
  	ltext=(lives>1)?lives+" LIVES LEFT!":"LAST LIFE!";
        if (lives<1){ltext="PLAY AGAIN?";}
	messagestring="<span onclick=\"play(false)\">"+ltext+"</span>";

	//write message
    	writemessage("#930",false,messagestring);
}








function brickcollision(pointer){

	//Not a white brick (by not changing the properties of white bricks when they're hit, they effectively act as walls)
	if (color[pointer]!="#fff"){
		brickhit=true;

		//set temp variable that holds a positive value for english
		e=english;if(english<0){e=-english;}
		
		//adjust score according to brick location, english, and level.
		score+=(Math.round(((700-brickx[pointer])/100)*level)*e);

		//change the value of the brick in the array
		brickx[pointer]=-100;
	
		//hide the brick on the screen
		document.getElementById('b'+pointer).style.display="none";

	}
}



function updatescore(){
  	parent.document.getElementsByTagName('p')[0].innerHTML="<span>SCORE: "+score+"</span> <span class=\"right\">LEVEL: "+level+"</span>";
}