addEventListener("load", function()
{
    setTimeout(updateLayout, 0);
}, false);
var currentWidth = 0;
function updateLayout()
{
    if (window.innerWidth != currentWidth)
    {
        currentWidth = window.innerWidth;
        var orient = currentWidth == 320 ? "profile" : "landscape";
        document.body.setAttribute("orient", orient);
        setTimeout(function()
        {
            window.scrollTo(0, 1);
        }, 100);           
    }
}

var rating = new Array();
rating[0] = 'Brilliant';
rating[1] = 'Great';
rating[2] = 'Good';
rating[3] = 'Average';
rating[8] = 'Genius';

var score = new Array();
score[0] = 100;
score[1] = 50;
score[2] = 25;
score[3] = 10;
score[8] = 200;

var ballcolor = '1';
var ball_regular = '../images/ball-1.png';
var ball_highlight = '../images/ball-1a.png';
var ball_lowlight = '../images/ball-1b.png';
var openspace = '5-1';

function select_open(id)
{
    document.getElementById('id-' + openspace).setAttribute('openspace','');
    openspace = id;
    document.getElementById('id-' + openspace).setAttribute('openspace','true');
    saveSettings();
    confirmRestartGame();
}


setTimeout(set_ball_selection, 100);
function set_ball_selection()
{
    document.getElementById('select-ball-1').src='../images/ball-1a.png';
}

function select_ball(newballcolor)
{
    ballcolor = newballcolor;
    ball_regular = '../images/ball-' + ballcolor + '.png';
    ball_highlight = '../images/ball-' + ballcolor + 'a.png';
    ball_lowlight = '../images/ball-' + ballcolor + 'b.png';

    for (var i=1; i <= 6; i++) 
        document.getElementById('select-ball-' + i).src='../images/ball-' + i + '.png';
    document.getElementById('select-ball-' + ballcolor).src='../images/ball-' + ballcolor + 'a.png';
    
    for (var firstx=1; firstx <= 9; firstx++) 
    {
        for (var firsty=1; firsty <= 5; firsty++) 
        {
            sourceposition = 'id-' + firstx + '-' + firsty;
            source = document.getElementById(sourceposition);
            if(source)
                if(source.src.match(/ball/))
                    source.src=ball_regular;
        }
    }
    saveSettings();
}

function basename (path) { return path.replace( /.*\//, "" ); }
var start;
var movehistory = new Array();
function click(ball)
{
    if(ball)
    {
        position = ball.id.split('-');
        x = parseInt(position[1]);
        y = parseInt(position[2]);
    }
    if(start)
    {
        startposition = start.id.split('-');
        startx = parseInt(startposition[1]);
        starty = parseInt(startposition[2]);
    }
    if(basename(ball.src)==basename(ball_regular))
    {
        if(start)
            start.src=ball_regular;
        start = ball
        ball.src = ball_lowlight;
    }
    else if(basename(ball.src)==basename(ball_lowlight))
    {
        if(start)
            start.src=ball_regular;
        start = null;
    }
    else if(basename(ball.src)=='hole.png' && start)
    {
        // Diagonal or Horizontal
        if( ( makepos(startx - x) == 2 && makepos(starty-y) == 2 ) || ( makepos(startx - x) == 4 && makepos(starty-y) == 0 ) )
        {
            if( makepos(startx - x) == 4 && makepos(starty-y) == 0 )
            {
                // Horizontal
                if(startx - x == 4)
                    middlex = startx - 2
                else
                    middlex = startx + 2
                if(starty-y == 0)
                    middley = starty
            }
            
            // Diagonal
            if( makepos(startx - x) == 2 && makepos(starty-y) == 2 )
            {
                if(startx - x == 2)
                    middlex = startx - 1;
                else
                    middlex = startx + 1;
                if(starty-y == 2)
                    middley = starty - 1;
                else
                    middley = starty + 1;
            }

            middleposition = 'id-' + middlex + '-' + middley;
            middle = document.getElementById(middleposition);
            if( basename(middle.src) == basename(ball_regular))
            {
                start.src='../images/hole.png';
                middle.src='../images/hole.png';
                ball.src=ball_regular;
                movehistory.push(startx + '-' + starty + '+' + middlex + '-' + middley + '+' + x + '-' + y);
                findmoves(false);
            }
            else
            {
                start.src=ball_regular;
            }
            start = null;
        }
        else
        {
            // NOOP - not legal move
            if(start)
                start.src=ball_regular;
        }
        
        
    }
}

function confirmRestartGame()
{
    if(confirm("Your current game is not over. Restart game?"))
        restartGame();
}

function restartGame()
{
    movehistory = new Array();
    for (var firstx=1; firstx <= 9; firstx++) 
    {
        for (var firsty=1; firsty <= 5; firsty++) 
        {
            sourceposition = 'id-' + firstx + '-' + firsty;
            source = document.getElementById(sourceposition);
            if(source)
            {
                if(source.getAttribute('openspace')=='true')
                    source.src='../images/hole.png';
                else
                    source.src=ball_regular;
            }
        }
    }
    findmoves(false);
}

var moves = new Array();
var marblecount;
function findmoves(forceshow)
{
    marblecount=0;
    var movesavailable=0;
    for (var firstx=1; firstx <= 9; firstx++) 
    {
        for (var firsty=1; firsty <= 5; firsty++) 
        {
            sourceposition = 'id-' + firstx + '-' + firsty;
            source = document.getElementById(sourceposition);
            if(source && basename(source.src)==basename(ball_regular))
            {
                marblecount++
                for (var secondx=1; secondx <= 9; secondx++) 
                {
                    for (var secondy=1; secondy <= 5; secondy++) 
                    {
                        destpostion = 'id-' + secondx + '-' + secondy;
                        dest = document.getElementById(destpostion);
                        if(dest && basename(dest.src)=='hole.png')
                        {
                            // Diagonal or Horizontal
                            if( ( makepos(firstx - secondx) == 2 && makepos(firsty-secondy) == 2 ) || ( makepos(firstx - secondx) == 4 && makepos(firsty-secondy) == 0 ) )
                            {
                                if( makepos(firstx - secondx) == 4 && makepos(firsty-secondy) == 0 )
                                {
                                    // Horizontal
                                    if(firstx - secondx == 4)
                                        middlex = firstx - 2
                                    else
                                        middlex = firstx + 2
                                    if(firsty-secondy == 0)
                                        middley = firsty
                                }
            
                                // Diagonal
                                if( makepos(firstx - secondx) == 2 && makepos(firsty-secondy) == 2 )
                                {
                                    if(firstx - secondx == 2)
                                        middlex = firstx - 1;
                                    else
                                        middlex = firstx + 1;
                                    if(firsty-secondy == 2)
                                        middley = firsty - 1;
                                    else
                                        middley = firsty + 1;
                                }

                                middleposition = 'id-' + middlex + '-' + middley;
                                middle = document.getElementById(middleposition);
                                if( basename(middle.src) == basename(ball_regular))
                                {
                                    movesavailable++;
                                    if(forceshow || document.getElementById('showmoves').getAttribute('toggled')=='true')
                                        moves.push(source, middle, dest);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    if(forceshow || document.getElementById('showmoves').getAttribute('toggled')=='true')
        setTimeout(showmove, 100);
    
    document.getElementById('avail').innerHTML=movesavailable + ' &nbsp;';
    document.getElementById('marblecount').innerHTML=marblecount + ' &nbsp;';
    
    if(marblecount == 1 && basename(document.getElementById('id-5-1').src) == basename(ball_regular))
        marblecount=0;

    if(movesavailable == 0)
        setTimeout(askrestart, 100);
}

function saveScore(thisscore, marblecount) 
{
    var http_request = false;

    http_request = new XMLHttpRequest();
    http_request.onreadystatechange = function() { saveScoreResponse(http_request); };

    http_request.open('GET', '?action=savescore&moves=' + movehistory.join(',') + '&remaining=' + marblecount, true);
    http_request.send(null);
}

opacity = 0
function saveScoreResponse(http_request) 
{
    if (http_request.readyState == 4) 
    {
        if (http_request.status == 200) 
        {
            if(http_request.responseText)
            {
                document.getElementById('scores').innerHTML=http_request.responseText;
                opacity = 0
                setTimeout(showsave, 100);
            }
        } 
        else 
        {
            alert("The score wasn't saved. Check your internet connection.");
        }
    }
}

function askrestart()
{
    var message = marblecount + " marbles remaining, New Game?";
    var thisscore = score[marblecount];
    var thisrating = rating[marblecount];

    saveScore(thisscore, marblecount);
    if(marblecount == 0)
        message = '1 marble remaining in initial open space is ' + thisrating + '! New Game?';
    else if(marblecount == 1)
        message = '1 marble remaining is ' + thisrating + '! New Game?';
    else if(thisrating)
        message = marblecount + " marbles remaining is " + thisrating + '! New Game?';
    
    if(confirm(message))
        restartGame();
}


var source;
var middle;
var dest;
function hidemove()
{
    source.src=ball_regular;
    middle.src=ball_regular;
    dest.src = '../images/hole.png';
    if(moves.length>0)
        setTimeout(showmove, 100);
}
function showmove()
{
    dest = moves.pop();
    middle = moves.pop();
    source = moves.pop();
    source.src = ball_highlight;
    middle.src = ball_highlight;
    dest.src   = '../images/holea.png';
    setTimeout(hidemove, 500);
}

var movelist;
var orig_id;
function replay(moves, id)
{
    orig_id=openspace;
    document.getElementById('id-' + openspace).setAttribute('openspace','');
    openspace = id;
    document.getElementById('id-' + openspace).setAttribute('openspace','true');
    restartGame();
    movelist = moves.split(',');
    setTimeout(replayhighlightmove, 1000);
}
var moves;
function replayhighlightmove()
{
    moves = movelist.shift().split(' ');
    document.getElementById('id-' + moves[0]).src=ball_highlight;
    document.getElementById('id-' + moves[1]).src=ball_highlight;
    document.getElementById('id-' + moves[2]).src='../images/holea.png';

    setTimeout(replaymove, 700);
}

function replaymove()
{
    document.getElementById('id-' + moves[0]).src='../images/hole.png';
    document.getElementById('id-' + moves[1]).src='../images/hole.png';
    document.getElementById('id-' + moves[2]).src=ball_regular;

    if(movelist.length>0)
        setTimeout(replayhighlightmove, 300);
    else
    {
        document.getElementById('id-' + openspace).setAttribute('openspace','');
        openspace = orig_id;
        document.getElementById('id-' + openspace).setAttribute('openspace','true');
    }
}


function makepos(num)
{
    if(num < 0)
        return num *-1;
    return num;
}

function saveSettings() 
{
    var http_request = false;

    http_request = new XMLHttpRequest();
    http_request.onreadystatechange = function() { saveSettingsResponse(http_request); };

    if(document.getElementById('showmoves').getAttribute('toggled')=='true')
        showmoves = '1';
    else
        showmoves = '0';

    http_request.open('GET', '?action=save&showmoves=' + showmoves + '&ballcolor=' + ballcolor + '&openspace=' + openspace, true);
    http_request.send(null);
}

var opacity = 0
function saveSettingsResponse(http_request) 
{
    if (http_request.readyState == 4) 
    {
        if (http_request.status == 200) 
        {
            if(http_request.responseText)
            {
                document.getElementById('saved').innerHTML=http_request.responseText;
                opacity = 0
                setTimeout(showsave, 100);
            }
        } 
        else 
        {
            alert("The settings weren't saved. Check your internet connection.");
        }
    }
}

function showsave()
{
    opacity = opacity + 0.1
    document.getElementById('savedContainer').style.display = 'block';
    document.getElementById('savedContainer').style.opacity = opacity

    document.getElementById('saveScoreContainer').style.display = 'block';
    document.getElementById('saveScoreContainer').style.opacity = opacity


    if(opacity < 0.6)
        setTimeout(showsave, 100);
    else
        setTimeout(hidesave, 1000);
}

function hidesave()
{
    opacity = opacity - 0.1

    if(opacity < 0.1)
    {
        document.getElementById('savedContainer').style.display = 'none';
        document.getElementById('saveScoreContainer').style.display = 'none';
    }
    else
    {
        setTimeout(hidesave, 100);
        document.getElementById('savedContainer').style.opacity = opacity;
        document.getElementById('saveScoreContainer').style.opacity = opacity;
    }
}