/*
	file: applicaton.js 
	authors: Morgan Roderick (morgan@roderick.dk), Casper Warming (casper@warming.dk)
	Copyright 2009 - Morgan Roderick - https://creativecommons.net/MRoderick/
	Copyright 2009 - Casper Warming
	License: http://creativecommons.org/licenses/by-sa/2.5/dk/
*/

// Set class js-enabled on body, to allow for unobtrusive enhancements
Event.onReady( function(){ $(document.body).addClassName( "js-enabled" ); });

ExternalLinks = Behavior.create({
	onclick : Event.delegate({
		'a': function( e ) {
			var target = Event.element( e );
			if ( target.rel === 'external' ) {
				window.open( target.href );
				Event.stop( e );
			}
		}
	})
});

/*
	Enhances a UL LI based menu, to become Ajax tabs
	
	Sample html: 
  <div class="scene wide faq">
     <div class="nav">
        <ul>
           <li class="selected"><a href="/m/dummy/faq.html">FAQ</a></li>
           <li><a href="/m/dummy/leveringsbetingelser.html">Leveringsbetingelser</a></li>
           <li><a href="/m/dummy/returproces.html">Returproces</a></li>
           <li><a href="/m/dummy/kontakt.html">Kontakt</a></li>
        </ul>   
        <div class="progress"></div>
     </div>
     <div class="content">
        <h2>FAQ</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan, odio blandit ultrices luctus, augue nisl dignissim enim, ullamcorper faucibus velit tortor tincidunt est. Nunc tempus odio sed est congue at accumsan odio cursus. Cras vulputate, justo vitae dictum interdum, mi libero lacinia risus, vitae faucibus ipsum augue eget lectus. Integer sollicitudin, sapien sed sodales facilisis, dui nunc posuere libero, eget accumsan tellus neque eu urna. Nullam elementum massa ac felis consequat sit amet auctor velit aliquam. In ut tortor et velit porttitor pulvinar sit amet et est. Nulla quis est id risus hendrerit condimentum faucibus non magna. Nunc faucibus libero vel elit scelerisque sollicitudin. Nulla rhoncus lectus ut dolor viverra tincidunt. Nullam nec odio non lorem consectetur tempor id in neque. Fusce at nibh quis felis facilisis suscipit eget at sem. Proin eleifend nulla sed quam fringilla pulvinar. Aliquam suscipit vulputate sapien, a placerat erat fringilla ac.</p>
        <p>Pellentesque dictum consequat metus, nec volutpat felis gravida ut. Proin libero odio, ultricies nec ornare at, vehicula vel tortor. Etiam et varius metus. Aenean vitae enim in risus rutrum auctor vitae in quam. Mauris quis enim diam, ac viverra elit. Morbi tincidunt sapien sed neque fringilla bibendum. Proin feugiat viverra dui, consequat iaculis turpis semper in. Phasellus ac eros mi, ac semper dui. Aliquam a odio orci. Integer iaculis blandit est fermentum pellentesque. Donec rutrum diam et arcu consectetur pellentesque. Duis mattis felis vel est dignissim sit amet elementum nunc dapibus. Ut eget mauris nulla. Nulla facilisi. Praesent ultrices, lorem vitae commodo tempor, libero metus egestas risus, ac lacinia diam lorem vel enim. Maecenas vitae pellentesque nulla. Sed adipiscing scelerisque tellus ac vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Donec elit nisl, interdum sit amet elementum sed, cursus ut risus. Proin interdum auctor dui ac viverra. Sed ultricies sem eu lacus sollicitudin sollicitudin. Nam id arcu sed est sodales molestie non eget felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut bibendum posuere tempor. Duis sem quam, porta a dapibus sit amet, faucibus at velit. Phasellus ullamcorper volutpat odio at sollicitudin. Quisque ut justo ut nulla adipiscing elementum et at neque. Nullam pretium porttitor nisi, id viverra tellus varius sit amet.</p>
        <p>Nunc sollicitudin sapien leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin feugiat turpis at dolor viverra ac consequat risus sagittis. Vivamus libero neque, feugiat ornare ultrices sit amet, pellentesque in quam. Ut eget est eu lectus consequat cursus. Pellentesque pulvinar tellus a eros cursus eget porta nulla facilisis. Etiam mauris ipsum, scelerisque sed malesuada quis, porttitor sit amet ipsum. Vestibulum convallis viverra urna id mollis. Ut interdum, sem sit amet convallis adipiscing, ligula sem elementum eros, vel lobortis dui felis ac quam. Aenean ut nulla ligula. Nam pellentesque consectetur sem, sit amet laoreet lectus scelerisque ac. Donec eleifend euismod nulla ut congue. Cras volutpat tristique nisi non mattis. Donec dolor purus, hendrerit sit amet interdum venenatis, adipiscing vel augue. In sodales elit hendrerit ligula congue a ultrices erat ornare. In eleifend eleifend quam, et hendrerit tellus feugiat id.</p>
        <p>Fusce vel elit nibh, a porta neque. Proin id neque ut libero imperdiet porttitor. Morbi laoreet, risus sagittis dapibus mattis, arcu metus accumsan nunc, at volutpat lacus enim in ipsum. Fusce lectus sapien, semper a porta et, tincidunt quis felis. Nam magna leo, congue vehicula vehicula vel, gravida sit amet lorem. Nullam ligula nisl, vehicula et consectetur et, rhoncus quis turpis. Nunc blandit venenatis nisi, eget interdum neque facilisis a. Nulla eleifend fermentum augue, non volutpat lacus suscipit ac. Mauris sodales ligula vitae lectus feugiat feugiat. Phasellus ultrices sodales erat, ac adipiscing turpis suscipit tempor. Proin at mauris sem, semper mollis felis. Sed porta, eros tincidunt egestas porta, lacus libero aliquam ipsum, et semper risus lorem ornare mi. Nulla ac elit sit amet odio euismod tincidunt a eu nibh. In a massa ipsum. Curabitur pulvinar ornare justo ac imperdiet. Duis lacinia iaculis euismod. Nunc nec odio lacus, quis pretium felis. Duis at neque et dolor aliquet adipiscing eget vel eros. Mauris volutpat volutpat dapibus.</p>
     </div>
     <div class="deco-left"></div>
     <div class="deco-right"></div>
  </div>
*/
FaqTabs = Behavior.create({
  contentDiv : null,
  selectedTab : null,
  progressIndicator : null,
  ajaxUrlSuffix : '?render_mode=raw',
  selectedClassName : 'selected',
	
	initialize : function() {
	  this.contentDiv = this.element.up().down('div.content');
	  this.selectedTab = this.element.down('li.selected');
    this.progressIndicator = this.element.up().down('div.progress');
    this.progressIndicator.hide(); // make sure the initial state is hidden

		// create a back link inside div.nav
		this.element.insert({bottom: '<a class="back">Tilbage</a>'});
	},
	
	// needed for Safari 4.0.2 / WebKit nightly r45754 to update the style on the progress indicator
	// FIXME: create bug report in webkit bugzilla for this
	clearprogress : function() {
	  window.setTimeout( function() {
	    this.progressIndicator.hide();
			this.element.down('a.back').show();
	  }.bind(this), 10);
	},
	
	showProgressIndicator : function() {
		this.progressIndicator.show();
		this.element.down('a.back').hide();
	},

	onclick : Event.delegate({
		'div.nav ul li a': function( e ) {
		  var target = Event.element(e);
		  var targetTab = target.up();
		  var raw_url = target.href.toString() + this.ajaxUrlSuffix;
		  
		  // using 'bind(this)' to make sure that 'this' refers to the FaqTabs instance and not the onSuccess function instance
      new Ajax.Updater( this.contentDiv, raw_url, {
        onLoading : function( transport ) {
          this.showProgressIndicator();
        }.bind(this),
        
        onSuccess : function( transport ) {          
          this.selectedTab.removeClassName( this.selectedClassName );
          this.selectedTab = targetTab.addClassName( this.selectedClassName );
        }.bind(this), 

        onFailure : function( transport ) {
          this.clearprogress();
          alert( 'Kunne ikke få forbindelse til serveren, prøv venligt igen.' );
        }.bind(this),
        
        onComplete : function( transport ) {
          this.clearprogress();
        }.bind(this)
      });      
      Event.stop( e );
		},
		'div.nav a.back' : function( e ) {
			history.back( 1 );
		}
	})
});

BrowseMovies = Behavior.create({
	
	selectedItems : $A([]),
	submitButton  : null,
	
  initialize : function() {
		// locate the submit button
		this.submitButton = this.element.down('button.submitBtn' );

		// initialize the state of all the movies
		var listItems = $A( this.element.getElementsByTagName('li') );
		listItems.each( function( li ){ 
			this.updateSelectedClassName( $( li ) );
		}.bind(this));
		
  },

	// IE doesn't support proper use of the onchange event, so we're using onclick event instead
	onclick : Event.delegate({
		'input': function( e ){ // prototypes match method does not support attribute selectors in IE, prototype should fix this
		  var target = Event.element( e );
		  var li = target.up('li');
			this.updateSelectedClassName( li, target );
		}
	}),
	
	onsubmit : function( e ) {
		if ( this.submitButton.hasClassName('disabled') ){
			Event.stop( e );
		}
	},
	
	// expects prototype extended listitems, if not will throw errors in 
	updateSelectedClassName : function( listItem, checkbox  ) {
		var chk = checkbox || listItem.down( 'input' ); // prototypes match method does not support attribute selectors in IE, prototype should fix this
		if ( chk && chk.checked ){
			listItem.addClassName( 'selected' );
			this.selectedItems.push( listItem );
			this.removeExtraSelectedItems();
		} else {
			listItem.removeClassName( 'selected' );
			this.selectedItems = this.selectedItems.without( listItem );
		}
		this.updateSubmitButtonState();
	},
	
	removeExtraSelectedItems : function() {
		while( this.selectedItems.length > 2 ){
			var listItem = this.selectedItems.shift();
			var chk = listItem.down('input');
			chk.checked = false;
			listItem.removeClassName('selected');
		}
	},
	
	updateSubmitButtonState : function() {
		if ( this.selectedItems.length === 2 ) {
			this.submitButton.removeClassName('disabled');
		} else {
			this.submitButton.addClassName('disabled');
		}
	}
	
});

Event.addBehavior({
	'div.scene.wide.faq div.nav' : FaqTabs,
	'div.scene.wide.browse' : BrowseMovies,
	'body' : ExternalLinks
});
			
MovieList = Behavior.create({
	onmouseover: function() {
		var movieAlt = this.element.down('img').getAttribute('alt');
		this.element.up('div').up('div').down('#movie-description').innerHTML = movieAlt;
  	},
  	onmouseout: function() {
		this.element.up('div').up('div').down('#movie-description').innerHTML = 'Klik og læs om filmene på Filmportens hjemmeside';
	}
});			

Event.addBehavior({
	'div.filmporten-movies a' : MovieList
});