if (!window.PiOpH)
	window.PiOpH = {};

PiOpH.Page = function() 
{
    
}

PiOpH.Page.prototype =
{
	handleLoad: function(control, userContext, rootElement) 
	{
		this.control = control;
		this.root = control.content.findName("Main");	
		control.content.findName("introAnimatie").addEventListener("Completed",Silverlight.createDelegate(this,this.startGame));
		control.content.findName("btnSkip").addEventListener("MouseLeftButtonDown",Silverlight.createDelegate(this,this.btnSkipClick));
		control.content.findName("btnSkip").addEventListener("MouseEnter",Silverlight.createDelegate(this,this.btnSkipEnter));
		control.content.findName("btnSkip").addEventListener("MouseLeave",Silverlight.createDelegate(this,this.btnSkipLeave));
		//control.content.findName("startGameAnimation").addEventListener("Completed",Silverlight.createDelegate(this,this.plaatsCirkels));
		control.content.findName("btnStart").addEventListener("MouseLeftButtonDown",Silverlight.createDelegate(this,this.btnStartClick));
		control.content.findName("btnStart").addEventListener("MouseEnter",Silverlight.createDelegate(this,this.btnStartEnter));
		control.content.findName("btnStart").addEventListener("MouseLeave",Silverlight.createDelegate(this,this.btnStartLeave));
		//eindeSpel();
		//GetAjaxScores();
		StartTimerAjaxCall();
	},
	
	btnSkipEnter: function(sender, eventArgs)
    {
       sender.getHost().content.findName("buttonMouseOver").begin();
    },
    
    btnSkipLeave: function(sender, eventArgs)
    {
        sender.getHost().content.findName("buttonMouseOut").begin();
    },
    
    btnStartEnter: function(sender, eventArgs)
    {
//        if(isTimerGestart() == false)
//        {
//            sender.getHost().content.findName("buttonMouseOver2").begin();
//        }
        sender.getHost().content.findName("buttonMouseOver2").begin();
    },
    
    btnStartLeave: function(sender, eventArgs)
    {
//        if(isTimerGestart() == false)
//        {
//            sender.getHost().content.findName("buttonMouseOut2").begin();
//        }
        sender.getHost().content.findName("buttonMouseOut2").begin();
    },
    
    btnSkipClick: function(sender, eventArgs)
    {
        this.startGame(sender, eventArgs);
    },
    
    btnStartClick: function(sender, eventArgs)
    {
        if(isTimerGestart() == false)
        {
            // het spel starten
            sender.getHost().content.findName("buttonMouseOut2").begin();
            this.plaatsCirkels();
            zetTijd();
            StartTimer();
       }
       else
       {
            // het spel starten met een herpositie van de cirkels
            sender.getHost().content.findName("buttonMouseOut2").begin();
            // eerst alle 7 de cirkels cirkels verwijderen
            for(i=1;i<=7;i++)
            {
                var mainCanvas = sender.getHost().content.findName("Main");
                mainCanvas.children.removeAt(mainCanvas.children.count - 1);
            }
            
            this.plaatsCirkels();
            zetTijd();
            StartTimer();
       }
    },
    
	startGame: function(sender, eventArgs)
    {
        var intro = sender.getHost().content.findName("introCanvas");
        if(intro != null)
        {   
            // de stage klaarzetten
            sender.getHost().content.findName("Page").children.remove(intro);
            sender.getHost().content.findName("startGameAnimation").begin();
        }
    },
    
	plaatsCirkels: function(sender,eventArgs)
	{
	    var downloader = this.control.createObject("downloader");
	    downloader.addEventListener("Completed",Silverlight.createDelegate(this,this.OnDownloadCompleted));
	    downloader.Open("GET","Silverlight/Circle.xaml");
	    downloader.send();
	},
	
	onCircleMoved : function(sender,eventArgs)
	{
	    
	},
	
	OnDownloadCompleted : function(sender,eventArgs)
	{
	    var xamlCode = sender.getResponseText("");
	
	   //de eerste 3 cirkels invullen
	    var y = 135; 
	    var globalCounter = 1;
	    var idCounter = 0;
	    
	    // beginnen met blanco
	    rasterPI[0][0]= "";
	    
	    // array maken om de tekst voor elk element in te vullen
	    arrLinks = new Array("22","  /"," 7");
	    
	    for(var i = 0 ; i < 3 ; i++)
	    {
	        var btn = this.control.content.createFromXaml(xamlCode,true);
            this.root.children.add(btn); //Toevoegen aan tree
            b = new PiOpH.Circle(idCounter,this.root,this.control,btn,17,y,arrLinks[i]); //positioneren
	        
	        b.add_itemMoved(this.onCircleMoved);
	        
	        y += 75;
	        rasterPI[globalCounter][0]= b;
	        globalCounter++;
	        idCounter++;
	    }
	    
	    // onderste blanco laten
	     rasterPI[4][0]= "";
	     
	    //middenste cirkel invullen
	    var btn = this.control.content.createFromXaml(xamlCode,true);
    	this.root.children.add(btn); //Toevoegen aan tree
    	b = new PiOpH.Circle(idCounter,this.root,this.control,btn,97,210," π"); //positioneren
    	globalCounter = 2;
    	idCounter++;
	    rasterPI[globalCounter][1]= b;
	    
	    globalCounter = 1;
	    
	    //de drie cirkels aan de rechterzijde invullen
	    // de eerste blanco laten
	    rasterPI[0][2]= "";
	    y = 135;
	    
	     // array maken om de tekst voor elk element in te vullen
	    arrRechts = new Array(" 3"," 1"," 4");
	    
	    for(var i = 0 ; i < 3 ; i++)
	    {
	       
	        var btn = this.control.content.createFromXaml(xamlCode,true);
    	    
	        this.root.children.add(btn); //Toevoegen aan tree
    	    
	        b = new PiOpH.Circle(idCounter,this.root,this.control,btn,177,y,arrRechts[i]); //positioneren
	        y += 75;
	       
	        rasterPI[globalCounter][2]= b;
	         globalCounter++;
	        idCounter++;
	    }
	    
	      rasterPI[4][2]= "";
	}
}

var timerID = 0;
var tStart  = null;
var timerIDAjax = 0;
var tStartAjax  = null;
var tvorigM = null;
var tvorigS= null;
var tvorigH = null;

//timer om ajax call te maken
function StartTimerAjaxCall() {
   tStartAjax   = new Date();  
   timerIDAjax  = setTimeout("GetAjaxScores()", 5000);
}

//ophalen scores callback
function GetAjaxScores()
{
  PiOpHServices.ScoreService.GetScores(GetScoresCallBack);
  setTimeout("GetAjaxScores()", 5000);
}

function GetScoresCallBack(result)
{
    var dataFromService;
    if(result != null)
    {
        dataFromService = result;
      
            var naam = "";
            var email = "";
            var voornaam = "";
            var tijd = "";
            
             var SilverlightControl = document.getElementById("SilverlightControl")

            //eerst tekst velden leeg maken voor als er minder dan 5 scores zijn
            for(var i = 1 ; i <= 5 ; i++)
            {
            
                
                SilverlightControl.content.findName("Speler" + i).Text = "";
                SilverlightControl.content.findName("Score" + i).Text = "";
                      
            } 
    
            //opvullen van de scores
            var SilverlightControl = document.getElementById("SilverlightControl")
            for(var i = 1 ; i <= dataFromService.length ; i++)
            {
            
                email = dataFromService[i-1].Email;
                tijd = dataFromService[i-1].Tijd;
                
                SilverlightControl.content.findName("Speler" + i).Text = email;
                SilverlightControl.content.findName("Score" + i).Text = tijd;
                      
            }      
    }
}

function isTimerGestart()
{
    // de timer mag niet opnieuw gestart worden
    var SilverlightControl = document.getElementById("SilverlightControl")
    var ms = SilverlightControl.content.findName("txtHonderdSec").Text
    var sec = SilverlightControl.content.findName("txtSec").Text
    var min = SilverlightControl.content.findName("txtMin").Text
    
    if (ms == "00" && sec == "00" && min == "00")
    {
        return false; 
    }
    else
    {
        return true;
    }
}

function UpdateTimer() {
   if(timerID) {
      clearTimeout(timerID);
      clockID  = 0;
   }

   if(!tStart)
      tStart   = new Date();

   var   tDate = new Date();   
   var   tDiff = tDate.getTime() - tStart.getTime();   
   tDate.setTime(tDiff);
   
   var h = tDate.getMilliseconds() + tvorigH;  
   var s = tDate.getSeconds() + tvorigS;   
   var m = tDate.getMinutes() + tvorigM;
      
   var miliseconden=""; 
   if  (h<10){
         miliseconden = "00";
   } 
   else if (h < 1000) {
         miliseconden = "" + h;
         miliseconden = miliseconden.substring(0,2)   
   }
   else {
             miliseconden = "00";          
   } 
   
   var seconden="";
   if  (s<10){
         seconden = "0"+s;
   }else{
         seconden = s;
   } 
   
           
   var minuten="";
   if  (m<10) {
         minuten = "0"+m;
   }else{
         minuten = m;
   }
                                 
   updateTijd(""+minuten,""+seconden,""+miliseconden);   
   timerID = setTimeout("UpdateTimer()", 100);
}

function StartTimer() {
   tStart   = new Date();  
   timerID  = setTimeout("UpdateTimer()", 100);
}

function updateTijd (min,sec,hd) 
{
    var SilverlightControl = document.getElementById("SilverlightControl");
    var minuten = SilverlightControl.content.findName("txtMin");
    var seconden = SilverlightControl.content.findName("txtSec");
    var hondersten = SilverlightControl.content.findName("txtHonderdSec");
	
    minuten.text = min;
    seconden.text = sec;
    hondersten.text = hd;
}

function zetTijd () 
{
    tStart  = null;
    tvorigM = null;
    tvorigS= null;
    tvorigH = null;
    var SilverlightControl = document.getElementById("SilverlightControl");
    var minuten = SilverlightControl.content.findName("txtMin");
    var seconden = SilverlightControl.content.findName("txtSec");
    var hondersten = SilverlightControl.content.findName("txtHonderdSec");
	
    minuten.text = "00";
    seconden.text = "00";
    hondersten.text = "00";
}

function eindeSpel()
{
    // stoppen van de timer
    StopTimer();
    // afspelen van een animatie
    document.getElementById("SilverlightControl").content.findName("piCanvas").Visibility = "Visible";
    document.getElementById("SilverlightControl").content.findName("eindeGameAnimation").begin();
    // eventueel nog een tekst laten weergeven
    
    //wegschrijven van score via ajax
    var SilverlightControl = document.getElementById("SilverlightControl");

  //bug
    //tvorigH = geefVorigeWaarde(SilverlightControl.content.findName("txtHonderdSec").Text);
    //tvorigS = geefVorigeWaarde(SilverlightControl.content.findName("txtSec").Text);    
    //tvorigM = geefVorigeWaarde(SilverlightControl.content.findName("txtMin").Text);

    tvorigH = SilverlightControl.content.findName("txtHonderdSec").Text;
    tvorigS = SilverlightControl.content.findName("txtSec").Text;    
    tvorigM = SilverlightControl.content.findName("txtMin").Text;

    
    var cookie = readCookie("pioph");
 
    PiOpHServices.ScoreService.InsertScore(cookie,tvorigM,tvorigS,tvorigH);
   // alert("test");
}

function eindeAnimatie(sender)
{
    document.getElementById("SilverlightControl").content.findName("piCanvas").Visibility = "Collapsed";
}

function checkUitgespeeld()
{
  // controleren van de linkerkolom
  if(rasterPI[1][0].text == " 3" && rasterPI[2][0].text == " 1" && rasterPI[3][0].text == " 4")
  {
    // controleren van de rechterkolom
      if(rasterPI[1][2].text == "22" && rasterPI[2][2].text == "  /" && rasterPI[3][2].text == " 7")
      {
        // controleren van het midden
        if(rasterPI[2][1].text == " π")
        {
           eindeSpel();
        }
      }
  }
}

function StopTimer() {
    var SilverlightControl = document.getElementById("SilverlightControl");
    //tvorigH = geefVorigeWaarde(SilverlightControl.content.findName("txtHonderdSec").Text);
    //tvorigS = geefVorigeWaarde(SilverlightControl.content.findName("txtSec").Text);    
    //tvorigM = geefVorigeWaarde(SilverlightControl.content.findName("txtMin").Text);




   if(timerID) {
      clearTimeout(timerID);
      timerID  = 0;
   }
   
   tStart = null;   
}

function geefVorigeWaarde (sTekst) {
    var getal = 0;
    getal = parseInt(sTekst);
    return getal;    
}