/* FLY OVER BACKGROUND DHTML SCROLLER
 * created by Randall Goya aka decibel.places July 3,2009
 * Copyleft: © Copyright 2009 Randall Goya
 * http://netsperience.org
 *
 * Put this code in the body of your HTML page:

	<!-- we need to put the url of the bg image here, not in stylesheet -->
	<div id="demo-tile" style="background: transparent url('bg.jpg') no-repeat fixed top left">
	
		<div id="demo-tile-inner">
		
			<div id="content1" class="demo-content">
				<p>This is content1</p>
			</div>
			
			<div id="content2" class="demo-content">
				<p>This is content2</p>
			</div>
			
			<div id="content3" class="demo-content">
				<p>This is content3</p>
			</div>
			
			<div id="content4" class="demo-content">
				<p>This is content4</p>
			</div>
		
		</div><!--end demo-tile-inner-->
		
	</div><!--end demo-tile-->	
 *
 *
 *  This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License (agpl.txt)
    along with this program.  If not, see <http://www.gnu.org/licenses/>.

	Include this notice with any copies or modifications.
*/


//  sizer is the sets the size of each pane relative to the screen dimensions; 
//  a value of two would be equal to 1/2 screen width and height - a smaller value is larger eg 1.5
var sizer = 1.5;

// screen.availWidth, screen.availHeight are width and height of screen; 
var swidth = screen.availWidth/sizer;
var sheight = screen.availHeight/sizer;

//or you can set it explicitly
swidth = 768;

//works best when square, so we set sheight=swidth
sheight = swidth;



/************************************************************************
DO NOT CHANGE ANYTHING BELOW HERE UNLESS YOU UNDERSTAND WHAT YOU'RE DOING
*************************************************************************/

var target //tells the scrollers which pane is the target

//initialize some variables
var topc = 0;
var leftc = 0;
var topnum = 0;
var leftnum = 0;
var toppos = 0;
var leftpos = 0;
var totalw = 0;
var totalh = 0;
var tfact = 1;
var lfact = 1;
var progress = 0;
var intv = 10;
var setdist = .1;

/* scrolling functions */
function scrolltop() {
if (topc < topnum)
{
topc+=dist;
if (topc > topnum) topc = topnum;
toppos = topc;
document.getElementById('demo-tile-inner').style.marginTop = toppos*tfact + "px";
document.getElementById('demo-tile').style.backgroundPosition = leftpos*lfact + "px " + toppos*tfact + "px";
}
else if (topc > topnum)
{
topc-=dist;
if (topc < topnum) topc = topnum
topnum != topc ? toppos = topnum-topc : toppos = topc;
document.getElementById('demo-tile-inner').style.marginTop = toppos*tfact + "px";
document.getElementById('demo-tile').style.backgroundPosition = leftpos*lfact + "px " + toppos*tfact + "px";
}
else if(leftc == leftnum && topc == topnum) clearInterval(tint);
}

function scrollleft() {
if (leftc < leftnum)
{
leftc+=dist;
if (leftc > leftnum) leftc = leftnum
leftpos = leftc;
document.getElementById('demo-tile-inner').style.marginLeft = leftpos*lfact + "px";
document.getElementById('demo-tile').style.backgroundPosition = leftpos*lfact + "px " + toppos*tfact + "px" ;
}
else if (leftc > leftnum)
{
leftc-=dist;
if (leftc < leftnum) leftc = leftnum
leftnum != leftc ? leftpos = leftnum-leftc : leftpos = leftc;
document.getElementById('demo-tile-inner').style.marginLeft = leftpos*lfact + "px";
document.getElementById('demo-tile').style.backgroundPosition = leftpos*lfact + "px " + toppos*tfact + "px" ;
}
else if(leftc == leftnum && topc == topnum) clearInterval(tint); 
}

function scroller(){
progress += Math.abs(dist)*2
dist += (Math.atan((total - progress)))*2
scrollleft();
scrolltop();
}

/* initiate the scrolling */
function startscroll(target){
elm=document.getElementById(target);
leftnum = eval(elm.style.left.substring(0,elm.style.left.indexOf("px")));
topnum = eval(elm.style.top.substring(0,elm.style.top.indexOf("px")));
totalw = leftnum - leftc
totalw = Math.abs(totalw)
totalh = topnum - topc
totalh = Math.abs(totalh)
total = totalw + totalh
leftc <= leftnum ? lfact = -1 : lfact =  1;
topc <= topnum ? tfact = -1 : tfact =  1;
tint = setInterval('scroller()',intv)
dist = setdist
progress = 0
}

/* set up dimensions and position of each quadrant pane */
function setup(){
//positions
document.getElementById('content1').style.left="0px";
document.getElementById('content1').style.top="0px";
document.getElementById('content2').style.left = swidth +"px";
document.getElementById('content2').style.top= "0px";
document.getElementById('content3').style.left="0px";
document.getElementById('content3').style.top= sheight +"px";
document.getElementById('content4').style.left=swidth +"px";
document.getElementById('content4').style.top=sheight +"px";
//dimensions
document.getElementById('content1').style.width=swidth +"px";
document.getElementById('content1').style.height=sheight + "px";
document.getElementById('content2').style.width=swidth +"px";
document.getElementById('content2').style.height=sheight + "px";
document.getElementById('content3').style.width=swidth +"px";
document.getElementById('content3').style.height=sheight + "px";
document.getElementById('content4').style.width=swidth +"px";
document.getElementById('content4').style.height=sheight + "px";
}
onload = setup;