function Utils(){
    
    this.display = new Display();
    
    function Images(){
        this.orientFacing = function( current, previous ){
            if( current != previous  ){
                if( current == "left" ){
                    
                }
                if( current == "right"){
                    
                }
            }
        }
    }
    
    function Display(){
        
        this.grid = new Grid();
        this.blinker = new Blinker();
        
        function Blinker(e){
            
            this.context = null;
            this.color = "#ffffff";
            this.x = 0;
            this.y = 0;
            this.w = 1;
            this.h = 1;
            this.active = false;
            this.blink = false;
            this.time = 250;
            this.interval = null;
            
            this.init = function(e){
                this.context = ( e.context == undefined ) ? "canvas" : e.context;
                this.color = ( e.color == undefined ) ? "#ffffff" : e.color;
                this.x = ( e.x == undefined ) ? 0 : e.x;
                this.y = ( e.y == undefined ) ? 0 : e.y;;
                this.w = ( e.w == undefined ) ? 1 : e.w;
                this.h = ( e.h == undefined ) ? 1 : e.h;
                this.time = 250;
            }
            
            this.start = function(){
                this.active = true;
                
                if( this.active ){
                    this.interval = setInterval( this.blink, this.time  );    
                }
            }
            
            this.blink = function(){
                this.blink = !this.blink;
                
                if( this.blink  ){
                    
                    var ctx = document.getElementById(this.context).getContext('2d');                    
                    ctx.save();
                    ctx.fillRect(this.x, this.y, this.w, this.h);
                    ctx.context.restore();
                }
            }
                                    
            this.stop = function(){
                this.active = false;
                clearInterval( this.interval );
                this.interval = null;
            }
        }
        
        function Grid(){
            var gtx = null;
                        
            this.show = false;    
            this.steps = 10;
                        
            this.toggle = function(){
                this.show = !this.show ;                               
            }
            
            this.onScreen = function( ctx ){                
                ctx.drawImage( document.getElementById('gridbox'), 0, 0, 500, 400 );
                //return gtx;
            }
            
            this.build = function(){                
                               
                var x = 0;
                var y = 0;
                var strokeStyle = "#999";
                var lineWidth = 1;
                
                gtx = document.getElementById('gridbox').getContext("2d");
                gtx.strokeStyle = strokeStyle;
                gtx.lineWidth = .25;
                
                gtx.clearRect(0,0, canvasWidth, canvasHeight); // clear canvas
                
                this.verticalGridLines();
                this.horizontalGridLines();
                                
            } 
            
            this.horizontalGridLines = function(){
                var y = 0;
                
                while( y < canvasHeight ){
                     y += this.steps;
                                        
                    gtx.beginPath();
                    gtx.moveTo( 0, y);
                    //gtx.lineTo( y, canvasWidth ); //draws a cool slope
                    gtx.lineTo( canvasWidth, y );
                    gtx.stroke();
                }
            }
            
            this.verticalGridLines = function(){
               var x = 0;
               
                while(  x < canvasWidth ){
                    x +=  this.steps;
                    
                    gtx.beginPath();
                    gtx.moveTo( x, 0);
                    gtx.lineTo( x, canvasHeight);
                    gtx.stroke();
                    
                }
            }
            
        } // function Grid()        
    } // function Display()
 } // function Utils()


function writeGameMessage( m ){
    document.getElementById("gameMessage").innerHTML = m;
}

function updateFpsCounter( i ){
    document.getElementById("fps_counter").innerHTML = i;
}


function debugMessage( m ){
    document.getElementById("debugMessage").innerHTML = m;
}

function FrameRate(){
    this.fps = 60;
    this.show = true;
    
    this.frameCount = 0;
    this.totalFrameCount = 0;
    var frameTime = 0;
    var compTime = 0;
    
    var  defaultElement = "fps_counter";
    var element = defaultElement;    
    
    this.init = function( o ){
        element = ( o.element != undefined ) ? o.element : defaultElement;
        this.show = ( o.show != undefined ) ? o.show : this.show;
    }
    
    this.setElement = function(i){
        element = i;
    }
    
    this.calculate = function(){
        
         this.totalFrameCount++;
        
        // Uses global startTime to initialize if it doesn't exist we create one
        compTime = ( frameTime > 0) ? frameTime : ( (startTime != undefined) ? startTime : tickTime ) ;
        
        //var d = new Date();                
        //var diff = d.getTime() - compTime;
        var diff = tickTime - compTime;
        
        if( diff > 1000 ){
            
            this.fps = this.frameCount;            
            if( this.show ) this.display();
            
            this.frameCount = 0;
            //frameTime = (new Date()).getTime();
            frameTime = tickTime;
                        
            return;
        }
        else if( this.totalFrameCount == 1 ){
            this.fps = 60;            
            if( this.show ) this.display();
        }
       
        this.frameCount++;
        return; 
    }
    
    this.display = function(){
        document.getElementById( element ).innerHTML = this.fps;
    }
}