var PageModel = Backbone.Model.extend({
	title: '',
	ingress: '',
	info: '',
	currentProject: 0,
	url : function() {
      var base = 'contact';
      if (this.isNew()) return base;
      return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
    },
	
	initialize: function(obj){
		var model = this;
		model.title = obj.title;
		model.ingress = obj.ingress;
		model.info = obj.info;
		
	}
});var JSONController = Backbone.Controller.extend({
	callJSON: function(url, data, callBack){
		$.ajax({
        		type: "POST",
        		url: url,
        		processData: true,
        		beforeSend: function(x) {
		    	   if(x && x.overrideMimeType) {
						x.overrideMimeType("application/json;charset=UTF-8");
					}
				},
        		data: data,
        		success: function (data) {
					callBack(data);
        		}, 
	    		error: function (request, status, error) { 
					alert("ERRORZ:\n" + request.responseText); 
        		}
		 });
	}
});var Controller = Backbone.Controller.extend({
	controller: null,
	jsonController: null,
    routes: {
    	"":                      	"showIndex",
    	"/":                        "showIndex",
        "/contact":            		"showContact",
        "/links":                   "showLinks",
        "/links/:id":               "showProject"
    },
    
    showContact: function() {
        if(!controller.contactView){
    	
    		var url = "/scripts/server/json.php";	
    		var data = {action: 'getPage', pid: '2'};
    		
    		jsonController.callJSON(url, data, function(data){
    			controller.contactView = new ContactView({ 
					model: new PageModel($.parseJSON(data))
				});
    		});
			
    	} else {
    		controller.contactView.render();
    	}
    },
    
    showIndex: function() {
    	if(!controller.indexView){
    	
    		var url = "/scripts/server/json.php";	
    		var data = {action: 'getPage', pid: '1'};
    		
    		jsonController.callJSON(url, data, function(data){
    			controller.indexView = new IndexView({ 
					model: new PageModel($.parseJSON(data))
				});
    		});
			
    	} else {
    		controller.indexView.render();
    	}
    	
    },
    
    showLinks: function(id) {
    	if(!controller.linksView){
    	
    		var url = "/scripts/server/json.php";	
    		var data = {action: 'getPage', pid: '3'};

    		//GET PAGEDATA
    		jsonController.callJSON(url, data, function(data){
    			var pageData = $.parseJSON(data);
    			
    			//GET PORTFOLIO AS WELL
    			jsonController.callJSON(url, {action: 'getPortfolio'}, function(data2){
	
    				//CREATE AND POPULATE MODEL
					var lModel = new PageModel(pageData);
					lModel.projects = $.parseJSON(data2);
					lModel.set({currentProject: 0});
				
					controller.linksView = new LinksView({idx: id, model: lModel});
    			
				});
    		});
    		
			
    	} else {
    		controller.linksView.render();
    	}
        
    },
    
    showProject: function(id) {
    	if(!controller.linksView){
    		controller.showLinks(id);
    	} else {    		
    		controller.linksView.model.set({currentProject: id});
    	}
    },
    
    initialize: function(){
    	controller = this;
    	jsonController = new JSONController();
    }
});
var ContactView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    
    render: function() {
        var data = {name: 'Thomas', email: 'thomas@mosquito.no'};

		$.get('/scripts/public/templates/Contact.tpl', function(tmpl) {
		    $('#content').jqotesub(tmpl, data);
		});

        //$(this.el).html(out);
        //$('#content').html(this.el);
    }
});

var IndexView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    
    render: function() {
    	var model = this.model;
		$.get('/scripts/public/templates/Index.tpl', function(tmpl) {
		    $('#content').jqotesub(tmpl, model);
		});
		
        //$(this.el).html(out);
        //$('#content').html(this.el);
    }
});

var LinksView = Backbone.View.extend({
	pageData: {},
    initialize: function() {
    	var view = 	this;
        var idx = 	this.options.idx || 0;
        var model = this.options.model;
        
        model.bind('change:currentProject', function(event){
        	view.showProject(model, event.attributes.currentProject);
        });
		
		var initialProject = {title: "", info: "", url: ""};
		if(model.projects && model.projects.length>0){
			initialProject.title = 	model.projects[idx].title;
			initialProject.info = 	model.projects[idx].info;
			initialProject.url = 	model.projects[idx].url;
			initialProject.images = model.projects[idx].images;
		}
		
		var maxIndex = model.projects.length-1;
		pageData = {title: model.title, 
					ingress: model.ingress, 
					info: model.info, 
					projectTitle: initialProject.title, 
					projectInfo: initialProject.info, 
					projectUrl: initialProject.url, 
					projectImages: initialProject.images,
					nextIndex: 1,
					maxIndex: maxIndex, 
					links: []
					};
        
        events: {
        	 //"click .navarrow a"      : "editAccessLevel",
        };
        		
		this.render();				
		
    },
    
    showProject: function(model, idx){
    	var title = model.projects[idx].title;
    	var info = model.projects[idx].info;
    	var url = model.projects[idx].url;
    	var images = model.projects[idx].images;
    	
    	$(".portfolio h2").html(title);
    	$(".portfolio .info .description").html(info);
    	$(".portfolio .info .readmore").attr('href', url);
    	
    	var previous = parseInt(idx)-1;
    	var next = parseInt(idx)+1;
    	$(".navarrow.previous a").attr("href", "#/links/" + previous);
    	$(".navarrow.previous").css("display", previous >= 0 ? "block" : "none");
    	$(".navarrow.next a").attr("href", "#/links/" + next);
    	$(".navarrow.next").css("display", next < model.projects.length ? "block" : "none");
    	
    	//RESET IMAGE LIST
    	$(".images ul").html("");
    	$.each(images, function(index){
    		$(".images ul").append("<li><img src='/media/images/portfolio/"+ images[index].url +"' alt='' title='' /></li>\n<li><p class='caption'>" + images[index].caption + "</p></li>");
    	});
    	
    },
    
    /*
    *
    * CAUSES THE WHOLE PAGE TO REFRESH
    */
    render: function() {
		
		$.get('/scripts/public/templates/Links.tpl', function(tmpl) {
		    $('#content').jqotesub(tmpl, pageData);
		});
		
        //$(this.el).html(out);
        //$('#content').html(this);
    }
});

var App = {
    Views: {},
    Controllers: {},
    init: function() {
        new Controller();
        Backbone.history.start();
    }
};