/*
* make art scroller work
	- have it resize with browser
	- resize crop images when they load for original ratio at a standard height
* image detail pages should scale to site width, with zoom button
* make homepage fancy rollovers for top category nav?
* hook up email form on Contact and Commissions pages
* make mobile layout css
* get build scripts working to export minified and concatenated .js and css
* next/prev thumbs and back button on image detail pages
* reupload all images to flickr, with descriptions from mom's texts
*/

var AreaModel = function( main_nav, site_loader, logo_header, dimmer, app_background ) {
	var _main_nav_links = null;
	var _loader = site_loader;
	var _logo_header = logo_header;
	var _dimmer = dimmer;
	var _app_background = app_background;
	var FADE_OUT_TIME = 350;
	var FADE_IN_TIME = 250;
	var _cur_area_obj = null;
	var _area_container = null;
	var _prev_path = null;
	var _page_title = document.title; // grab original HTML title to prepend page updates
	var _stage_width = 0;
	var _stage_height = 0;
	var _is_transitioning = false;
	var _queued_event = null;

	var init = function(){
		// grab main containers
		_area_container = $('#content_holder')[0];
		
		// init main nav links
		_gallery_links = $('#gallery_nav').find('.nav_item');
		_main_nav_links = $('#content_nav').find('.nav_item');
		rewriteLinksForAjax( $('#main_nav') );
		rewriteLinksForAjax( $('#nav') );
		rewriteLinksForAjax( $('#content_nav') );
		
		// set up routes and hash listener
		setupHashPaths();
	};
	
	var setupHashPaths = function() {
		//setup crossroads routes
		crossroads.addRoute('');
		crossroads.addRoute('admin/flickr');
		crossroads.addRoute('home');
		crossroads.addRoute('contact');
		crossroads.addRoute('about');
		crossroads.addRoute('commissions');
		crossroads.addRoute('work/{category}');
		crossroads.addRoute('work/{category}/{id}');
		// listen for routing changes
		crossroads.routed.add( routeChanged );
		
		//setup hasher
		hasher.initialized.add(crossroads.parse, crossroads); //parse initial hash value
		hasher.changed.add(crossroads.parse, crossroads); //parse hash changes
		hasher.init(); //start listening for history change
	};

	var sendInitSwfAddressUpdate = function(){
		// _main_nav.swfAddressChanged( false );
		// _logo_header.swfAddressChanged( false );
		// _dimmer.swfAddressChanged( false );
		// _app_background.swfAddressChanged( false );
	};
	
	var routeChanged = function( request, route, params ) {
		if( !_is_transitioning ) {
			// get current path
			var curPath = '/' + hasher.getHash();

			// leave section if path has changed
			if( curPath != _prev_path ) {
				exitCurSection();
			}
	
			// set page title
			document.title = formatDocumentTitle( hasher.getHash() );
	
			// make sure we're scrolled to the top
			// $('html, body').animate({scrollTop:0});
	
			// track it
			setTimeout(function(){
				// window.tracking.trackPage();
			}, 200);
		} else {
			_queued_event = event;
		}
	    // console.log(request +' - '+ route +' - '+ params);
	};

	var exitCurSection = function(){
		_is_transitioning = true;
		if( $( _area_container ).children().length > 0 ) {
			// fades out first child of content container, because for some reason, fading the container wasn't working properly :-/ we're blaming jQuery.
			$( _area_container ).children().first().animate({ opacity: 0 }, FADE_OUT_TIME, contentHidden);
		} else {
			contentHidden();
		}
	};
  
	var contentHidden = function(){
		// dispose previous area object
		if( _cur_area_obj != null ) _cur_area_obj.dispose();
		_cur_area_obj = null;
		// load new areas, since all previous are cleared out now
		loadAjaxContent( '/' + hasher.getHash() );
	};
	
	var loadAjaxContent = function( path ){
		// strip tail slash if there is one
		if( path.length > 1 && path[ path.length - 1 ] == '/' ) path = path.substr( 0, path.length - 1 );
		// get area html path based on section 
		var htmlLoadPath = './?path='+ path;

		$.ajax({
			url: htmlLoadPath,
			success: function( data ){
				// insert html, fade it in, create area object, and see if there's anything else to do
				createMainContentObj( data );
				showAjaxContent();
			}
		});
	};
	
	var createMainContentObj = function( data ){
		// read area type from data attribute of first element
		var outerNode = $( data )[0];
		var pageType = outerNode.getAttribute('data-area-type');
		
		// set content, rewrite links, and hide it
		_area_container.innerHTML = data;
		rewriteLinksForAjax( $( _area_container ) );
		$( _area_container ).children().first().css({ opacity: 0 });
		
		// create area object if there is one
		if ( window[pageType] ) {
			_cur_area_obj = new window[pageType]( _area_container, publicInterface, data );
		}

		// send any extra flags in ajax html
		applyAreaFlags( outerNode );
	};
	
	var rewriteLinksForAjax = function( obj ) {
		var links = obj.find('a');
		// rewrite links to be ajax style
		for(var i=0; i < links.length; i++){
			var linkHref = links[i].href;
			if( linkHref.indexOf('path=') !== -1 ) {
				// rewrite links for ajax calls
				var linkSplit = links[i].href.split('path=');
				var linkUrl = linkSplit[linkSplit.length-1];
				links[i].href = '#' + linkUrl;
			}
		}
	};

	var applyAreaFlags = function( outerNode ){	
		if( outerNode ) {
			// // pass on any flags to persistent objects
			// var hidesMainNav = ( outerNode.getAttribute('data-hides-main-nav') == 'true' );
			// _main_nav.swfAddressChanged( hidesMainNav );
			// var hidesLogo = ( outerNode.getAttribute('data-hides-logo') == 'true' );
			// _logo_header.swfAddressChanged( hidesLogo );
			// var showsDimmer = ( outerNode.getAttribute('data-shows-dimmer') == 'true' );
			// _dimmer.swfAddressChanged( showsDimmer );
			// var doesntReloadBg = ( outerNode.getAttribute('data-no-bg-reload') == 'true' );
			// var hasSpecificBg = outerNode.getAttribute('data-bg-img') || null;
			// _app_background.swfAddressChanged( doesntReloadBg, hasSpecificBg );
		}
	};
	
	var showAjaxContent = function(){
		// show the content
		$( _area_container ).children().first().animate({ opacity: 1 }, FADE_IN_TIME);

		// store previous paths
		_prev_path = '/' + hasher.getHash();//SWFAddress.getPath();

		// set flags, hide loader
		_is_transitioning = false;
		// _loader.hide();

		// check to see if the path has changed during destroy/rebuild
		if( _queued_event ) {
			swfAddressChanged( _queued_event );
			_queued_event = null;
		}
		
		setActiveNavButton();
	};
	
	var setActiveNavButton = function() {
		// get cur path to compare to - bail on tier 3+ path elements
		var pathSplit = _prev_path.split('/');
		while( pathSplit.length > 3 ) pathSplit.pop();
		var curPath = pathSplit.join('/');
		
		
		// update 'active' main nav button
		for (var i=0; i < _main_nav_links.length; i++) {
			checkNavButton( curPath, _main_nav_links[i] );
		}
		for (var i=0; i < _gallery_links.length; i++) {
			checkNavButton( curPath, _gallery_links[i] );
		}
	};
	
	var checkNavButton = function( curPath, buttonObj ) {
		// grab url/path from <a> 
		var aLink = $( buttonObj ).find('a')[0];
		var hrefPath = aLink.href.split('#')[1];
		
		// get rid of anything after the 2nd tier
		var pathSplit = hrefPath.split('/');
		while( pathSplit.length > 3 ) pathSplit.pop();
		hrefPath = pathSplit.join('/');
		
		// if( _prev_path.indexOf( hrefPath ) !== -1 ) {
		if( curPath == hrefPath ) {
			$( buttonObj ).addClass('active');
		} else {
			$( buttonObj ).removeClass('active');
		}
	};

	var toTitleCase = function(str) {
		return str.substr(0,1).toUpperCase() + str.substr(1).toLowerCase();
	};

	var formatDocumentTitle = function(title) {
		// title = title.replace(/-/g, ' ');
		var titleParts = title.split('/');
		for(var i=0; i < titleParts.length; i++) {
			var subParts = titleParts[i].split('-');
			for(var j=0; j < subParts.length; j++) {
				subParts[j] = toTitleCase( subParts[j] );
			}
			titleParts[i] = subParts.join(' ');
		}
		if( title != '/' )
			return _page_title + ' / ' + titleParts.join(' / ');
		else
			return _page_title;
	};

	var publicInterface = {
		init : init,
		site_loader : _loader
	};

	return publicInterface;
};