var App = Backbone.Router.extend({
	
	baseURL: '/',
	ajaxURL: '/home/',
	docTitle: "Lighthouse Productions",
	currentView: null,
	section: null,
	page: null,
	template: null,
	self : this,
	
	routes: {
		//"": "lorem",
		//"lorem": "lorem",
		//"at": "at",
		//"duis": "duis",
		//"*else": "notFound",
		
		//"!/contact" : "pageAction",
		"!/locations": "locationsAction",
		"!/featured-work": "featuredWorkAction",
		"!/making-of": "makingOfAction",
		"!/:route/:where": "subPageAction",
		"*page": "defaultAction"
	},
	
	initialize: function(el) {
		this.el = el;
		
		/*this.homeView = new ContentView();
		this.shipView = new ContentView();
		this.storyView = new ContentView();
		this.videoView = new VideoView();
		this.contactView = new ContactView();*/
		//this.notFoundView = new ContentView('#not-found');
		this.cursorChange();
		this.preloadImages();
	},
	
	// while loading
	// http://postpostmodern.com/instructional/global-ajax-cursor-change/
	cursorChange: function() {  
		$("html").bind("ajaxStart", function(){  
		 $(this).addClass('busy');  
		}).bind("ajaxStop", function(){  
		 $(this).removeClass('busy');  
		});  
	},
	
	// update title to hash
	updateDocTitle: function(page,section) {
		
		document.title = this.docTitle +' | '+ ((section)? section.replace(/-/,' ')+' | ':'') + ((page=='start')? 'home':page.replace(/-/,' '));
	},
	
	preloadImages: function() {
		
		var baseURL = this.baseURL +'assets/Interface/';
		var imageArr = ['nav.png','anzac-maps.png','frame.png','lighthouse-logo-sm.png','nav-arrows.png'];
		
		setTimeout(function() {
			
			$(imageArr).each(function(){
				$('<img/>')[0].src = baseURL + this;
				// Alternatively you could use:
				// (new Image()).src = this;
			});
		}, 1000);
	},
	
	defaultAction: function( ajaxSegment ){
	
		this.page = (ajaxSegment) ? ajaxSegment.slice(2) : 'start';
		this.section = null;
		this.template = (this.page=='start') ? 'StartView' : 'ContentView';
		//if (this.page=='locations') { this.page='aus-city'; }
	
		//var pageUrl = this.ajaxUrl +'data.php?page=' + page;
		var pageURL = this.ajaxURL + this.page +'/';
		this.loadRestfulData( pageURL );
		
	},
	
	locationsAction: function(){
		
		this.subPageAction( 'locations', 'nz-alpine' );
		
	},
	
	featuredWorkAction: function(){
		
		this.subPageAction( 'featured-work', 'new-911' );
		
	},
	
	makingOfAction: function(){
		
		this.subPageAction( 'making-of', 'mini' );
		
	},
	
	subPageAction: function( route, action ){
		
		log('subpageAction::'+route+'::'+action);
		
		this.section = route;
		this.page = action;
		this.template = 'ImageView';
		/*this.page = (action) ? action : fallback;*/
		

		//log('subpageAction::'+this.page);
			
		//if (this.page=='locations') { this.page='aus-city'; }
	
		//var pageUrl = this.ajaxUrl +'data.php?page=' + page;
		var pageURL = this.ajaxURL + this.section +'/'+ this.page +'/';
		this.loadRestfulData( pageURL );
		
	},
	
	pageAction: function( ){ 
		
		//page = (ajaxSegment ? ajaxSegment.slice(2) : 'home');
		this.page = 'contact';
		
		var pageURL = this.ajaxURL + this.page + '.php';
		this.loadRestfulData( pageURL );
	},
	
	// google crawler
	crawlerAction: function( request ){
		
	},
	
	// mimic restful app
	loadRestfulData: function( pageURL ){
			
		//$("#Content").fadeOut(); //.html('<div class="loading">loading...</div>');
		//log('lrd::'+this.page);
		var page = this.page;
		var section = this.section;
		var tmpl = this.template;
		//var newView = eval('this.'+ this.page+'View');
		
		this.updateDocTitle(page,section);
		
		// loading
		//log('loading::cursor::progress');
		//$('html').css('cursor', 'progress');
		
		// html data
		$.ajax({
			url: pageURL,
			dataType: 'html',
			success: function(data){
				//Once we receive the data, set it to the content pane.
				$("#Layout").fadeOut( function(){
					//$("#Content").html( data ).fadeIn();
					//this.el.html(view.el);
					//log('ajax::'+page);
					
					if (this.currentView){
    			  this.currentView.close();
    			  //log('close');
    			}
    			
    			/*switch(section)
					{
						case 'start':
							var newView = new StartView();
							break;
						case 'locations':
							var newView = new ImageView();
							break;
						default:
							var newView = new ContentView();
							break;
					}*/
					if (section=='locations'||section=='featured-work'||section=='making-of') {
						var newView = new ImageView();
						newView.render(data);
						
					} else if (page=='start') {
						var newView = new StartView();
						newView.render(data);
					} else {
						var newView = new ContentView();
						newView.render(data);
					}
    			
					//var newView = new tmpl();
    			this.currentView = newView;
   				
   				// finished loading
   				//$('html').css('cursor', 'auto');
   				//log('loading::cursor::auto');
					
   				$("#Layout").html(this.currentView.el).fadeIn();
   				
   				if (page=='contact') {
   					$('span.mailme').mailme();
   				}
   				
   				if (section) {
	   				//log('section::'+section+' page::'+page);
						$('#nav a.'+ section).addClass('current');
						$('#nav .subnav.'+section).show();
						$('#nav .subnav a.'+ page).addClass('current');
						if (page.indexOf('nz')==0) {
							$('#nav .subnav a.nz').addClass('section');
							$('#nav .subnav li.nz').addClass('current');
						} else if (page.indexOf('aus')==0) {
							$('#nav .subnav a.aus').addClass('section');
							$('#nav .subnav li.aus').addClass('current');						
						}
						// maybe do by css
						$('.leaf').hide();
					}
   				
				});
			}
		});
		
		
		
			
	},
	
	
	showView: function( view ){
		
		// overide backbone.view.js for garbage collection
    if (this.currentView){
      this.currentView.close();
    }

    this.currentView = view;
    this.currentView.render();

   	$("#Content").html(this.currentView.el).fadeIn();
  },
	
	
	events: {
    //"change #Name": "setName",
    "click .children": "showSubNav"
  },
	
	showSubNav: function(e){
		
		log('showSubNav');
	}
	
	
	
	/*currentView: null,

	switchView: function(view) {
		if (this.currentView) {
			// Detach the old view
			this.currentView.remove();
		}

		// Move the view element into the DOM (replacing the old content)
		this.el.html(view.el);

		// Render view after it is in the DOM (styles are applied)
		view.render();

		this.currentView = view;
	},
	
	//Change the active element in the topbar 
	setActiveEntry: function(url) {
		// Unmark all entries
		$('li').removeClass('active');

		// Mark active entry
		$("li a[href='" + url + "']").parents('li').addClass('active');
	},
	
	lorem: function() {
		this.switchView(this.loremView);
		this.setActiveEntry('#lorem');
	},
	
	at: function() {
		this.switchView(this.atView);
		this.setActiveEntry('#at');
	},
	
	duis: function() {
		this.switchView(this.duisView);
		this.setActiveEntry('#duis');
	},
	
	notFound: function() {
		this.switchView(this.notFoundView);
	}*/
});