_.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g
    ,evaluate: /\[\[(.+?)\]\]/g
};

var masked = false;
var _json = undefined;
function makeMask(action){
    function _makeMask(e){
	try{
	    if (e)
		e.preventDefault();
	    var maskHeight = $(document).height();
	    var maskWidth = $(window).width();
	    $('#mask').css({'width':maskWidth,'height':maskHeight});
	    $('#mask').fadeIn(400);
	    $('#mask').fadeTo("slow",0.7);

	    var winH = $(window).scrollTop() + 200;
	    var winW = $(window).width();

	    
	    var _left = winW/2-$('#labyrinth').width()/2;
	    var _top = winH;
	    $('#labyrinth').css('top', _top);//'200px'
	    $('#labyrinth').css('left', _left);
	    
	    //closing
	    $('#labyrinth').before('<div id="lbefore">закрыть</div>');
	    $('#labyrinth').after('<div id="lafter">закрыть</div>');
	    
	    var lwidth = $('#labyrinth').width();
	    var lheight = $('#labyrinth').height();
	    
	    var _offset = 250;
	    $('#lbefore').css('top', _top + _offset);
	    $('#lbefore').css('left', _left - $('#lafter').width()-50);
	    $('#lafter').css('top', _top + _offset);
	    $('#lafter').css('left', _left + lwidth);

	    action(e);

	    $('#labyrinth').fadeIn(600);
	    masked = true;
	    $('#labyrinth.close').click(function (e) {
					  e.preventDefault();
					  $('#mask').hide();
					  $('#labyrinth').hide();
					  $('#labyrinth').html('');
					  masked = false;
				      });

	    $('#mask').click(function () {
				 $(this).hide();
				 $('#labyrinth').hide();
				 $('#labyrinth').html('');
				 masked = false;
				 $('#lbefore').remove();
				 $('#lafter').remove();
			     });

	    $(document.documentElement).keyup(function (event) {
						       if (event.keyCode == '27') {
							   $('#mask').click();
						       }
						   });

	}
	catch (e){
	    $('#mask').hide();
	    $('#labyrinth').hide();
	    $('#labyrinth').html('');
	    masked = false;
	    $('#lbefore').remove();
	    $('#lafter').remove();
	}
	//return false;
    }
    return _makeMask;
}


var Node = Backbone.Model.extend({});
var NodeView = Backbone.View.extend({
					    initialize: function() {
					       _.bindAll(this, "render", "showNext", "delegateEvents");
					   },
					   events:{
					       "click":"showNext"
					   },

					   showNext:function(e){
					       var url = this.model.get('url');
					       if (url && url != null){
						   document.location.href = url;
						   $('#mask').click();
					       }
					       else{
						   if (this.model.get('title') == 'Назад'){
						       this.__parent__.previous(this.model);
						   }						   
						   else{
						       if (!this.model.get('nodes') || this.model.get('nodes').length == 0)
							   document.location.href = '/pages/myaccount/question.aspx';
						       else
							   this.__parent__.next(this.model);
						   }
					       }
					   },

					   render: function(){
					       $(this.el).html(this.model.get('title'));
					       return this.el;
					   }
				       });

var NodesView = Backbone.View.extend({
					    initialize: function() {
						_.bindAll(this, "render", "next", "previous");
					    },

					    previous: function(model){
						var current = this.nodes.pop();
						current.remove();
						_(this.nodes).last().animate({'margin-left':'+=600'}, 400);
					    },

					    next: function(model){
						var parent = this;
						var nodes = _(model.get('nodes'))
						    .map(function(t) {
							     var view = new NodeView({
											    model:new Node(t),
											    className:'node'
											});
							     view.__parent__ = parent;
							     return view.render();
							 });						
						var div = $(document.createElement('div'));
						div.attr('class', 'nodes');
						_(nodes).each(function(t){div.append(t);});
						var last = _(this.nodes).last();
						last.after(div);
						last.animate({'margin-left':'-=600'}, 400);
						this.nodes.push(div);

					    },

					    render:function(){
						var parent = this;
						var nodes = _(this.model.get('nodes'))
							       .map(function(t) {
									var view = new NodeView({
												       model:new Node(t),
												       className:'node'
												   });
									view.__parent__ = parent;
									return view.render();
								    });
						var div = $(document.createElement('div'));
						div.attr('class', 'nodes');
						_(nodes).each(function(t){div.append(t);});
						this.nodes.push(div);
						this.el.html(div);
						this.el.prepend('<h1 id="labyrinthheader">Чем мы можем вам помочь?</h1>');
						this.el.append('<div id="nodesbottom"></div>');
						this.el.css('height','500px');

					   }
				       });

				       $(function () {

				       	var switcher = $('.labyrinthswitcher');
				       	if (switcher.length == 0) {
				       		return;
				       	}
				       	var body = $('body');
				       	var mask = $(document.createElement('div'));
				       	mask.attr('id', 'mask');
				       	body.append(mask);

				       	var labyrinth = $(document.createElement('div'));
				       	labyrinth.attr('id', 'labyrinth');
				       	body.append(labyrinth);


				       	var showLabyrinth = function (e) {
				       		var show = function (json) {
				       			$('#labyrinth').html('');
				       			var labyrinth = new NodesView({ model: new Node(json), el: $('#labyrinth') });
				       			labyrinth.nodes = [];
				       			labyrinth.headers = [];
				       			labyrinth.render();
				       		};
				       		if (_json) {
				       			show(_json);
				       		}
				       		else {
				       			var target = $(e.target);
				       			var splitted = target.attr('href').split('/');
				       			splitted.pop();
				       			splitted.pop();
				       			var joined = splitted.join('/') + '/help/Labyrinth.ashx';

				       			$.ajax({
				       				url: joined,
				       				success: function (data) {
				       					if (data == null) {
				       						document.location.href = '/pages/myaccount/question.aspx';
				       						return;
				       					}
				       					else {
				       						_json = data;
				       						show(_json);
				       					}
				       				}
				       			});
				       		}
				       	};
				       	$('#askquestiontop').click(makeMask(showLabyrinth));
				       	$('#askquestionbottom').click(makeMask(showLabyrinth));
				       	$('#askquestionleft').click(makeMask(showLabyrinth));
				       });