function InteractiveiPhone()
{
    this.spacing = 72;
    this.offset = 50;
    this.current = null;
    this.currentScreen = null
    this.activeColor = '#6C675E';
    this.inactiveColor = '#6C675E';
    
    this.data = {
        'log'       : { 'top': this.offset + this.spacing*0 },
        'share'     : { 'top': this.offset + this.spacing*1 },
        'post'      : { 'top': this.offset + this.spacing*2 },
        'discover'  : { 'top': this.offset + this.spacing*3 },
        'publish'   : { 'top': this.offset + this.spacing*4 }
    }
    
    this.showScreen = function(id)
    {
        
        if(id == this.current)
        {
            return;
        }
        
        this.current = id;
        
        $("#iphone-nav > ul > li > a").css({'color': this.inactiveColor});
        
        var c = this;
        
        $('#iphone-active-indicator').stop()
        $('#iphone-active-indicator').animate({
            'top': this.data[id].top
          }, 200, function(){
              
              if(c.currentScreen != null)
              {
                  c.currentScreen.animate({'opacity': 0}, 200, null);
              }
              
              $("#iphone-nav > ul > li > a").css({'color': c.inactiveColor});
              $('#iphone-nav-' + id).animate({'color': c.activeColor}, 200, null);
              c.currentScreen = $('#iphone-screen-' + id)
              $('#iphone-screen-' + id).animate({'opacity': 1}, 200, null);
          });
    }
    
    this.setActiveColors = function(active, inactive){
        this.activeColor = active;
        this.inactiveColor = inactive;
    }
    
    this.init = function()
    {   
    	var ip = this;
    	
    	$("#iphone-nav > ul > li > a").bind("mouseover", function(){
    		ip.showScreen($(this).attr('id').split('-')[2])
    	})
    	
        this.showScreen('log')
    }
}

$(document).ready(function() {
	iPhone = new InteractiveiPhone()
	iPhone.init()  
	
})