// Override View.remove()'s default behavior
Backbone.View = Backbone.View.extend({
	/*remove: function() {
		// Empty the element and remove it from the DOM while preserving events
		$(this.el).empty().detach();

		return this;
	},*/
	
	// http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/
	close: function() {
		// remove from the DOM
		this.remove();
		// events that our view triggers directly this.trigger(…)
	  this.unbind(); 
	  // unbind any model and collection events that our view is bound to
	  if (this.onClose){
	    this.onClose();
	  }
	}
	
});



var StartView = Backbone.View.extend({

	//Initialize with the template-id
	initialize: function(view) {
		//this.view = view;
		setTimeout(function() { $('.start img:nth-child(2)').fadeIn(); }, 500);
	},
	
	// Get the template content and render it into a new div-element
	render: function(template) {
		$(this.el).html(template);
		return this;
	},
	
	/*
	// garabe collection
	onClose: function(){
    this.model.unbind("change", this.render);
  }*/
	
});


var ContentView = Backbone.View.extend({

	//Initialize with the template-id
	initialize: function(view) {
		//this.view = view;
		//log('ContentView::view::'+view);
	},
	
	events: {
    //"change #Name": "setName",
    "mouseover .children": "showSubNav"
  },
	
	showSubNav: function(e){
		
		log('showSubNav::'+e.currentTarget.rel);
	},
  
  modalClosed: function(){
    // do whatever you need, when the user accepts the terms n conditions
    log('modalclosed');
  },
	
	// Get the template content and render it into a new div-element
	render: function(template) {
		/*var template = $(this.view).html();
		$(this.el).html(template);

		return this;*/
		
		//$(this.el).html('<h1>'+this.view+'</h1><p>'+this.view+' content</p><p><a class="modal">click</a></p>');
		$(this.el).html(template);
		return this;
	},
	
	/*
	// garabe collection
	onClose: function(){
    this.model.unbind("change", this.render);
  }*/
	
});



var ImageView = Backbone.View.extend({

	initialize: function(view) {
		//this.view = view;
		log('ImageView::slideshow::'+view);
		/*$('.slideshow').cycle({ 
			fx:'fade',
			speed:  'slow', 
    	timeout: 0, 
    	next:   '.next', 
    	prev:   '.prev' ,
    	after:   onAfter,
    	pager:  '.navimgs',
    	pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        //$('.navimgs a').removeClass('current');
		    //$('.navimgs a.no'+(idx)).addClass('current');
        return '.navimgs li:eq(' + idx + ') a'; 
    	} 
    	
  	});
  	
  	function onAfter(curr, next, opts) {
		    var index = opts.currSlide;
		    //log('onAfter::'+index);
		    $('.prev')[index == 0 ? 'hide' : 'show']();
		    $('.next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
		    $('.navimgs a').removeClass('current');
		    $('.navimgs a.no'+(index+1)).addClass('current');
		}*/
		
  	
	},
	
	slideshow: { pos:1, length:0 },
	
	events: {
    //"mouseover .children": "showSubNav",
    "click .navimgs a": "gotoPos",
    "click .prev": "showPrev",
    "click .next": "showNext"
  },
  
  showSubNav: function(e){
		
		log('showSubNav::'+e.currentTarget.rel);
	},
	
  gotoPos: function(e){
  	e.preventDefault();
  	//log(e.currentTarget);
  	log('gotoPos::'+e.currentTarget.rel);
  	
    $('.slideshow img:nth-child('+this.slideshow.pos+')').fadeOut();
    this.slideshow.pos = e.currentTarget.rel;
    $('.slideshow img:nth-child('+this.slideshow.pos+')').fadeIn();
    this.onAfter();
  },
	
  showPrev: function(e){
    $('.slideshow img:nth-child('+this.slideshow.pos+')').fadeOut();
    this.slideshow.pos--;
    $('.slideshow img:nth-child('+this.slideshow.pos+')').fadeIn();
    this.onAfter();
  },

  showNext: function(e){
    //e.preventDefault();
    //$(e.currentTarget).val();
    //log('showNext::' +this.slideshow.pos );
    $('.slideshow img:nth-child('+this.slideshow.pos+')').fadeOut();
    this.slideshow.pos++;
    $('.slideshow img:nth-child('+this.slideshow.pos+')').fadeIn();
   	this.onAfter();
  },
  
  onAfter: function() {
  	// get length if first navimg click
  	if (!this.slideshow.length) { this.slideshow.length = $('.slideshow img').length; }
  	
  	$('.prev')[this.slideshow.pos==1 ? 'hide' : 'show']();
		$('.next')[this.slideshow.pos==this.slideshow.length ? 'hide' : 'show']();
		
  	$('.navimgs a').removeClass('current');
    $('.navimgs a.no'+this.slideshow.pos).addClass('current');
    log('onAfter::length::' +this.slideshow.length );
  },
  

  render: function(template) {
    $(this.el).html(template);    
		return this;
  },
  
	// garabe collection
	onClose: function(){
		//delete this.slideshow;
		this.slideshow.pos=1;
		this.slideshow.length=0;
    //this.model.unbind("change", this.render);
  }
  
});