var x = 0;
// var tmpCount = 0;
var screenHeight = document.documentElement.clientHeight;
var screenWidth = document.documentElement.clientWidth;
// alert(screenHeight + ":" + screenWidth);

var style = document.createElement('style');
document.head.appendChild(style);
var stylesheet = style.sheet;

//window.scrollTo(0, 0);
window.onscroll = myFunction;

function scrollEvent() {
   alert("scroll");
}

// animation globals
var t=0; 
var frameInterval = 25; // in ms
var canvas = null; // canvas DOM object
var context = null; // canvas context
var intervalProcess = null;

// ball globals
var ballRadius = 15;
  
// physics globals
var collisionDamper = .3;
var floorFriction = 0.005 * frameInterval;
var mouseForceMultiplier = 2 * frameInterval;
var restoreForce = .0125 * frameInterval;
  
var mouseX = 99999;
var mouseY = 99999;
  
var balls = null;
var blur = 13;

var runMotion = true;


function Ball(x,y,vx,vy,color,val) {
    this.x=x;
    this.y=y;
    this.vx=vx;
    this.vy=vy;
    this.color=color;
    this.val=val;
    this.width = context.measureText(val).width;
    this.origX = x;
    this.origY = y;
}

function init() {

    setCanvasHeaderSize();
}

function initStageObjects() {
    
    balls = null;
    balls = new Array();
	
    var blue = "#3A5BCD";
    var red="#EF2B36";
    var yellow = "#FFC636";
    var green="#02A817";
    var cyan="cyan";
    var collorArray = [cyan, red, yellow, green, blue];
    var tmpSize = 0;
    var tmpXLoc = 0;
    var tmpYLoc = 0; //org: 75
    var tmpTxtXLoc = 0;
    var tmpCurrHalfSize = 0;
    var tmpPrevHalfSize = 0;
    var tmpTxtSpacer = 0; //org: 10
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    var strStoreName = "Monster Dollar";
    var seed = Math.floor((Math.random() * 5) + 1);
    
    var strMDArray = new Array();
    strMDArray = strStoreName.split("");
    tmpYLoc = (canvasHeight/2);
    var tmpTxtTotalWidth = context.measureText(strStoreName).width + (tmpTxtSpacer*(strMDArray.length-1));
    
    // alert('str width: ' + tmpTxtTotalWidth + ' : ' + canvas.width);
    
    for (var x=0; x < strMDArray.length; x++) {
        tmpCurrHalfSize = context.measureText(strMDArray[x]).width / 2;
        tmpXLoc = tmpXLoc + tmpPrevHalfSize + tmpCurrHalfSize + tmpTxtSpacer;
        tmpTxtXLoc = (canvasWidth/2) - (tmpTxtTotalWidth/2);
        balls.push(new Ball(tmpTxtXLoc + tmpXLoc,tmpYLoc,0,0, collorArray[(x+seed) % collorArray.length], strMDArray[x] ));
        tmpPrevHalfSize = context.measureText(strMDArray[x]).width / 2;
    }
}

function updateStage() {
    if ( runMotion ) {
        t+=frameInterval;
        clearCanvas();
        updateStageObjects();
        drawStageObjects();
    }
}

function clearCanvas() {
    context.clearRect(0,0,canvas.width+100, canvas.height); // Added 100px to remove extra space at the end of canvas
}

function updateStageObjects() {
    for (var n=0; n<balls.length; n++) {
  
        // set ball position based on velocity
        balls[n].y+=balls[n].vy;
        balls[n].x+=balls[n].vx;
  
        // restore forces
        if (balls[n].x > balls[n].origX) {
            balls[n].vx -= restoreForce;
        }
        else {
            balls[n].vx += restoreForce;
        }

        if (balls[n].y > balls[n].origY) {
            balls[n].vy -= restoreForce;
        }
        else {
            balls[n].vy += restoreForce;
        }
 
        // mouse forces
        var distX = balls[n].x - mouseX;
        var distY = balls[n].y - mouseY;
  
        var radius = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2));
  
        var totalDist = Math.abs(distX) + Math.abs(distY);
  
        var forceX = (Math.abs(distX) / totalDist) * (1/radius) * mouseForceMultiplier;
        var forceY = (Math.abs(distY) / totalDist) * (1/radius) * mouseForceMultiplier;
 
        if (distX > 0)
        { // mouse is left of ball
            balls[n].vx += forceX;
        }
        else {
            balls[n].vx -= forceX;
        }

        if (distY > 0)
        { // mouse is on top of ball
            balls[n].vy += forceY;
        }
        else {
            balls[n].vy -= forceY;
        }
  
  
        // floor friction
        if (balls[n].vx>0) {
            balls[n].vx-=floorFriction;
        }
        else if (balls[n].vx<0) {
            balls[n].vx+=floorFriction;
        }

        if (balls[n].vy>0) {
            balls[n].vy-=floorFriction;
        }
       else if (balls[n].vy<0) {
            balls[n].vy+=floorFriction;
        }

        // floor condition
        if (balls[n].y > (canvas.height-ballRadius)) {
            balls[n].y=canvas.height-ballRadius-2;
            balls[n].vy*=-1; 
            balls[n].vy*=(1-collisionDamper);
        }
  
        // ceiling condition
        if (balls[n].y < (ballRadius)) {
            balls[n].y=ballRadius+2;
            balls[n].vy*=-1; 
            balls[n].vy*=(1-collisionDamper);
        }
  
        // right wall condition
        if (balls[n].x > (canvas.width-ballRadius)) {
            balls[n].x=canvas.width-ballRadius-2;
            balls[n].vx*=-1;
            balls[n].vx*=(1-collisionDamper);
        }
  
        // left wall condition
        if (balls[n].x < (ballRadius)) {
            balls[n].x=ballRadius+2;
            balls[n].vx*=-1;
            balls[n].vx*=(1-collisionDamper);
        }
	
    }
    // mouse forces
    setTimeout(function() { resetMouse(); }, 1000);
}

function resetMouse() {
     mouseX = 99999;
     mouseY = 99999;
}

function drawStageObjects() {
    for (var n=0; n < balls.length; n++) {    
        // context.restore();
        context.beginPath();
        context.fillStyle=balls[n].color;
	context.fillText(balls[n].val, balls[n].x, balls[n].y);
        context.fill();
    }
}

function setCanvasHeaderSize() {

    if ( intervalProcess !== null ) {
        clearInterval(intervalProcess);
    } 
    
    var viewPortWidth =  document.documentElement.clientWidth;
    var fontSize = "";

    // Iphone 6: 890 / 500
    // Iphone 7+: 981 / 552
    switch (true) {
        case (viewPortWidth>1440):
            // alert('1440: ' + viewPortWidth);
            fontSize = "120px";
            break;
        case (viewPortWidth > 800):
            // alert('800: ' + viewPortWidth);
            fontSize = "80px";
            break; 
        case (viewPortWidth > 499):
            //alert('500: ' + viewPortWidth);
            fontSize = "50px"; 
            break;
        case (viewPortWidth > 200):
            //alert('200: ' + viewPortWidth);
            fontSize = "30px";
            break;
        default:
            fontSize = "20px";
            break;
    }

    canvas = document.getElementById("bannerCanvas");
    context = canvas.getContext("2d");
    
    var _p = canvas.parentNode;
    canvas.width = _p.clientWidth;
    canvas.height = _p.clientHeight;

    context.textAlign="center";
    context.textBaseline="middle";
    // context.font = "700 " + fontSize + " Fontdiner Swanky";
    context.font = '700 ' + fontSize + ' myFirstFont';
    context.shadowColor = "#000";
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 20;
    context.shadowBlur = blur;
    
    // context.save();
    
    // var charwidth = context.measureText('M').width;
    // alert ('char width: ' + charwidth);
    
    // initStageObjects();
    
    balls = null;
    balls = new Array();
	
    var blue = "#3A5BCD";
    var red="#EF2B36";
    var yellow = "#FFC636";
    var green="#02A817";
    var cyan="cyan";
    var collorArray = [cyan, red, yellow, green, blue];
    var tmpSize = 0;
    var tmpXLoc = 0;
    var tmpYLoc = 0; //org: 75
    var tmpTxtXLoc = 0;
    var tmpCurrHalfSize = 0;
    var tmpPrevHalfSize = 0;
    var tmpTxtSpacer = 5; //org: 10
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var strStoreName = "Monster Dollar";
    
    var seed = Math.floor((Math.random() * 5) + 1);
    
    var strMDArray = new Array();
    strMDArray = strStoreName.split("");
    tmpYLoc = (canvasHeight/2);
    var tmpTxtTotalWidth = context.measureText(strStoreName).width + (tmpTxtSpacer*(strMDArray.length-1)) + blur;
    
    for (var x=0; x < strMDArray.length; x++) {
        tmpCurrHalfSize = context.measureText(strMDArray[x]).width / 2;
        tmpXLoc = tmpXLoc + tmpPrevHalfSize + tmpCurrHalfSize + tmpTxtSpacer;
        tmpTxtXLoc = (canvasWidth/2) - (tmpTxtTotalWidth/2);
        balls.push(new Ball(tmpTxtXLoc + tmpXLoc,tmpYLoc,0,0, collorArray[(x+seed) % collorArray.length], strMDArray[x] ));
        tmpPrevHalfSize = context.measureText(strMDArray[x]).width / 2;
    }
    
        
    intervalProcess = setInterval(updateStage, frameInterval);
}

function handleMouseMove(evt) {
    mouseX = evt.clientX - canvas.offsetLeft;
   mouseY = evt.clientY - canvas.offsetTop - ( (canvas.height/2) - (context.measureText('M').width*.9) );
}
  
function handleMouseOut() {
    mouseX = 99999;
    mouseY = 99999;
}

function myFunction1(){
	var xBody = document.getElementById('idBody');
	var s = xBody.scrollTop;
	var h = xBody.scrollHeight;
	alert(s + "::" + h);
}

var prevScrollpos = window.pageYOffset;

function myFunction() {
       
        var currentScrollPos = window.pageYOffset;
        if (prevScrollpos > currentScrollPos || currentScrollPos < 300) {
            document.getElementById("navbar").style.top = "0";
        } else {
            document.getElementById("navbar").style.top = "-70px";
        }
        prevScrollpos = currentScrollPos;
        
	var xBody = document.getElementById('idBody');
	var pBody = xBody.parentNode;
	//var s = pBody.scrollTop;
	//var h = xBody.scrollHeight;
	//alert(s + ":" + h);

	var s = Math.max(xBody.scrollTop, pBody.scrollTop);
	var h = pBody.scrollHeight;
	
	var body = document.body;
	var html = document.documentElement;

	// var s = document.body.scrollTop;
	// var h = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
    
	var p = s / h;
	
	var selector = ".bgimg-1";
	var property = "opacity";
	var value = 1 - (p*4);
	
        // Disable md title update motion after scroll up
        if ( p > .50 ) {
            runMotion = false;
        } else {
            runMotion = true;
        }
        
        /*
        switch (true) {
            case ( p > .5 ):
                // $("#googleAd2").addClass("disabledbutton");
                // $("#googleAd3").addClass("disabledbutton");
                // $("#googleAd4").addClass("disabledbutton");
                $("#googleAd6").removeClass("disabledbutton");
            break;
            case ( p > .45):
                // $("#googleAd2").addClass("disabledbutton");
                // $("#googleAd3").addClass("disabledbutton");
                $("#googleAd4").removeClass("disabledbutton");
                $("#googleAd5").removeClass("disabledbutton");
                $("#googleAd6").addClass("disabledbutton");
            break;
            case ( p > .3):
                // $("#googleAd2").addClass("disabledbutton");
                $("#googleAd3").removeClass("disabledbutton");
                $("#googleAd4").addClass("disabledbutton");
                $("#googleAd5").addClass("disabledbutton");
            break;
            case ( p > .15):
                $("#googleAd2").removeClass("disabledbutton");
                $("#googleAd3").addClass("disabledbutton");
                // $("#googleAd4").addClass("disabledbutton");
                // $("#googleAd5").addClass("disabledbutton");
            break;
            default:
                $("#googleAd2").addClass("disabledbutton");
                $("#googleAd3").addClass("disabledbutton");
                $("#googleAd4").addClass("disabledbutton");
                $("#googleAd5").addClass("disabledbutton");
                $("#googleAd6").addClass("disabledbutton")
            break;
        }
        */
       
        
	// Fade home page
	if ( p < .30 ) {
		// Reduce opacity for home page
		// stylesheet.insertRule(selector + ' {' + property + ':' + value + '}', stylesheet.cssRules.length);
		
		// Increase opacity for 2nd page
		var x  = document.getElementById('page2');
		// x.style.opacity = p*5;

		// Increase opacity for 2nd page background
		value = (p)*6;
		// stylesheet.insertRule('.bgimg-2' + ' {' + property + ':' +  value + '}', stylesheet.cssRules.length);
		
		// Slide up 2nd page background
		var yval = 100-(p*470);
		stylesheet.insertRule('.bgimg-2' + ' {' + 'background-position' + ':' +  '0 ' + yval + 'px}', stylesheet.cssRules.length);
	}

        
	// Start fading page2 and SLide background
	if ( p > .20 && p < .55){
		// Reduce opacity 
		var x  = document.getElementById('page2');
		// x.style.opacity = 1-(p*.7);
                
		// Reduce opacity for 2nd page background
		value = 1-((p-.25)*4.5);
		// stylesheet.insertRule('.bgimg-2' + ' {' + property + ':' +  value + '}', stylesheet.cssRules.length);
	}
	
	// Increase opacity page3
	if ( p > .15 && p < .40){
		var x  = document.getElementById('page3');
                // x.style.opacity = (p-.15)*3;
                
		// var p3value = (p-.3)*6;
                var p3value = (p)*6;
		// stylesheet.insertRule('.bgimg-3' + ' {' + property + ':' +  p3value + '}', stylesheet.cssRules.length);
		
		// var yval = 150-(p*370);
                var yval = 100-(p*470);
		stylesheet.insertRule('.bgimg-3' + ' {' + 'background-position' + ':' +  '0 ' + yval + 'px}', stylesheet.cssRules.length);
		
	}

	// Start fading on page3 and background
	if ( p > .35 && p < .80){
		var x  = document.getElementById('page3');
		// x.style.opacity = 1-p*.7;

		// Fade
		var p3valuea = 1-((p-.50)*5.5);
		// stylesheet.insertRule('.bgimg-3' + ' {' + property + ':' +  p3valuea + '}', stylesheet.cssRules.length);

		// Slide
		var yval = 1-(p*370);
		stylesheet.insertRule('.bgimg-3' + ' {' + 'background-position' + ':' +  '0 ' + yval + 'px}', stylesheet.cssRules.length);
			
	}
	
        // Increase opacity page4
	if ( p > .45 && p < .75 ) {
		var x  = document.getElementById('page4');
		// x.style.opacity = (p-.30)*8;
                // x.style.opacity = (p-.35)*3;
                
                var p4value = (p)*6;
		// stylesheet.insertRule('.bgimg-4' + ' {' + property + ':' +  p4value + '}', stylesheet.cssRules.length);	
                
                // Slide
		var yval = 100-(p*470);
		stylesheet.insertRule('.bgimg-4' + ' {' + 'background-position' + ':' +  '0 ' + yval + 'px}', stylesheet.cssRules.length);
	}
        
        // Start fading on page4 and background
	if ( p > .70 && p < 1){
		var x  = document.getElementById('page4');
		// x.style.opacity = 1-p*.1;

		// Fade
		var p4valuea = 1-((p-.50)*1.5);
		// .insertRule('.bgimg-4' + ' {' + property + ':' +  p4valuea + '}', stylesheet.cssRules.length);

		// Slide
		var yval = 1-(p*370);
                // stylesheet.insertRule('.bgimg-4' + ' {' + 'background-position' + ':' +  '0 ' + yval + 'px}', stylesheet.cssRules.length);		
	}
        
        // Increase opacity page5
        if ( p > .70 ) {
            var x  = document.getElementById('page5');
            x.style.opacity = (p-.15)*6;
            
            var p5value = (p)*6;
            stylesheet.insertRule('.bgimg-5' + ' {' + property + ':' +  p5value + '}', stylesheet.cssRules.length);	
        }
	
        /*
	document.getElementById("demo").innerHTML = p;
	document.getElementById("demo1").innerHTML = h;
	document.getElementById("dem").innerHTML = p;
	document.getElementById("dem1").innerHTML = h;
	document.getElementById("de").innerHTML = p;
	document.getElementById("de1").innerHTML = h;
	document.getElementById("d").innerHTML = p;
	document.getElementById("d1").innerHTML = h;
	// x += tmpCount;
         */
}