// JavaScript Document

function playDocument() {
	
	if(!document.all && navigator.userAgent.indexOf("Opera") == -1) {
			$('#sub_nav table').css('border-collapse','collapse');
	}
	
var currentPage = '0';
var currentPageVisible;
var notPaid = true;
//var notPaidCount = 0;
	
	/* for the columizer */
	function makeColumns() {
	colHeight = $('#col_1').css('overflow', 'hidden').height() + 5;
	//colHeight = $('#col_1').css('overflow', 'hidden').height() + 15;
		if(colHeight > 350) {
			$('#col_1').columnize({
				width:205,
				buildOnce : true,
				overflow : {
					id : "#col_2",
					height : colHeight,
					doneFunc : function(){
						$col2 = $('#col_2');
						if($col2.text() != "") $col2.show();
					}
				}
			});
		}
	}
	
	if($('#col_1')[0] && !$('#picthumb')[0]) {makeColumns();}
	//alert($('#col_1')[0]);
	
	/* end of columnizer */ 
	
	function handlePicNav() {
		var $pic_nav = $('#pic_nav');
		var picNum = 0;
		//if($pic_nav) {
			if($pic_nav.length > 0){
			$pic_nav.find('a').hover(function(){
				$(this).find('img:not(.active)').css({"position":"absolute","bottom":"0px"});							  
			},function(){
				$(this).find('img:not(.active)').css({"position":"absolute","bottom":"-54px"});
			});
			$pic_nav.find('img.active').click(function(){return false;});
			}
		//}
	}
	
	var containerWidth = $('#container').width();
	$sub_nav = $('#sub_nav'); // a reference to frequently used jquery obj.
	$main_nav = $('#main_nav'); // a reference to frequently used jquery obj.
	
	if($.browser.msie && ($.browser.version == '6.0')){
		DD_belatedPNG.fix('#sub_nav');
	}
	
	$sub_nav.hide();
	
	// this is a convenience function used for Task 2 in the outHandler event handler.
		// this function will be used twice so it's here to avoid code duplication.
		var removeSelectedAndHideCells = function(){
			$('#sub_nav .selected').each(function(){
				$(this).parents('ul:not(:last-child)').addClass('hidden');				  
				$(this).removeClass('selected');
			});
			/* hides cells, comment out because make page visible also hides cells aldready */
			$sub_nav.find('table').each(function(){
				$(this).find('td:not(:last-child)').addClass('hidden');	 
			});
		}
		
		function makeCurrentPageVisible() {
			var cp = makeSelectorFromString(currentPage);
			var pa = $sub_nav.find('#'+cp+' a').addClass('selected').parents('ul').removeClass('hidden');
				pa.siblings().addClass('hidden');
				pa.parents('td').removeClass('hidden');
				pa = pa.attr("pa");
				var final;
				if(pa) {final = pa;} else {final = currentPage;} //alert(final);
			while(pa) {
				pa = makeSelectorFromString(pa);
				if(pa) final = pa;
				pa = $sub_nav.find('#'+pa+' a').addClass('selected').parents('ul').removeClass('hidden');
				pa.siblings().addClass('hidden');
				pa.parents('td').removeClass('hidden');
				pa = pa.attr("pa");
			}
			//alert(final);
			final = makeSelectorFromString(final);
			$main_nav.find('#'+final +' a').addClass('selected');
		}
	
	var overHandler = function(e) {
		var $target = $(e.target);
		var targetId = $target[0].id;
		$sub_nav.find('table[pa='+targetId+']').show().siblings().hide();
		if($.browser.msie && ($.browser.version >= '7.0')){
			$sub_nav.show(); // this is to avoid the unpleasant gray background when using fadeIn effects in IE 7.0 and above.
		} else {$sub_nav.fadeIn('2500');}
		$target.siblings().find('a').removeClass('selected'); // remove class 'selected' from sibling anchors.
		$target.find('a').addClass('selected').siblings().removeClass('selected'); // add class 'selected' only to the target.
		/* This extra line is to ensure the the 1st <td> will always show */
		$('#sub_nav table').each(function(){ $(this).find('td:last-child').show(); });
	}

	var outHandler = function(e) {
	/* task1: the expected behaviours */
		var y = e.pageY - $(this).offset().top;
		var height = $(e.target).height();
		//alert(y);
		if (y >= height) {
			$sub_nav.hide().find('table').hide();
			$(e.target).find('a').removeClass('selected');
			makeCurrentPageVisible();
		} else {
			$sub_nav.mouseleave(function(ev){
				$(this).hide().find('table').hide();			
	/* task2: remove all selected links and hide all table cells */
				$('#main_nav .selected').removeClass('selected');
				removeSelectedAndHideCells();
	/* task3: reset the navigation to the selected page */
				makeCurrentPageVisible();
				// unbind the event handlers to save memories
				$(this).unbind('mouseleave');
			});
		}
	}
	
	function loadAJAXContent(urlAddress) {
		$('#content').load(urlAddress,function(){
			//$('#content h1').append("<br />The page is " +currentPage);
			$this = $(this);
			if($('#col_1')[0]) {makeColumns();}
			$('#canvas_details').hide();
			$('#loading').fadeOut(1000,function(){$(this).hide();});
			var tempHTML;
			if($this.find('#canvas').length <= 0) {
				tempHTML = $this.html();
				$this.html('<div id="canvas" />');
				$this.find('#canvas').html(tempHTML);
			}
			$this.fadeIn(function(){$('#canvas').hide().fadeIn(1000);$('#canvas_details').fadeIn(2000);});
			handlePicNav();
		});
	}
	
	function killAnchor() {return false;}
	function makeCopy() {
		var copyright = '<div id="copy">'; 
		copyright += ' Copyright &copy 2011 NQH';
		copyright += ' ARCHITECTS<br/>';
		copyright += 'Designed by NHPT</div>';
		
		var $copy = $('#footer #copy');
		if($copy.length > 0) {
			var text = $copy.text();
			var hasQN = -1;
			hasQN = text.indexOf("http://trinhnguyen.net");
			if(hasQN == -1){
				$copy.remove();
				$('#footer #left_nav').append(copyright);
			}
		} else {
			$('#footer #left_nav').append(copyright);
		}
	}
	
	$('#main_nav li').each(function(){
		var $this = $(this); 
		var temp = $(this)[0].id
		var tempTable = $('#sub_nav table[pa='+temp+']');
		if(tempTable.length > 0) {
			var tableOffset = containerWidth - ($this.position().left + ($this.outerWidth() * 1/2));
			tempTable.css('margin-right', tableOffset).hide();
			$this.hover(overHandler,outHandler).find('a').removeClass('selected').click(killAnchor);
			$this.click(overHandler);
		} else {$this.find('a').click(function(){ currentPage = temp;
									 	loadAJAXContent($(this).attr('href')); //alert($(this).attr('href'));
										
										return false;
									 });
				$this.hover(function(){ $this.siblings().find('a').removeClass('selected');
										$sub_nav.hide();
										//alert($this.find(a).attr('href'));
									 },
							function(){ makeCurrentPageVisible(); });}
	})
	
	
	$('#sub_nav td').click(function(e){
		$target = $(e.target);					
		if($target.get(0).tagName == 'A') {
			/* task 1: For cases when links are categories */
			if($target.attr('href') != "" && $target.attr('href') == "#") {
				$('#sub_nav ul').each(function(){
					if($target.parent()[0].id == $(this).attr('pa')) {
						//$('#debug').append($(this).attr('pa'));
						$(this).removeClass('hidden').siblings().addClass('hidden').end().parent().removeClass('hidden')
							.prevAll().addClass('hidden');
						$target.parent().parent().find('a').removeClass('selected');
						$target.addClass('selected');
						return false; // this is is to stop the loop.
					}
				}); // end each loop
			} // end if
			/* task 2: For cases when links are to load AJAX pages */
			else {
				var $targetId = $target.addClass('selected').parent()[0].id;
				$target.parent().siblings().find('a').removeClass('selected');
				$target.parents('td').prevAll().addClass('hidden').find('a').removeClass('selected');
				if($targetId != currentPage) {
					currentPage = $targetId;
					//$('#debug').html(currentPage);
					loadAJAXContent($target.attr('href'));
					
					//makeCurrentPageVisible();
				}
			}
			
		} // end if
		
		return false;
	}); // end click
	
	$('<div id="loading">Loading...</div>').insertBefore('#content').hide()
		.ajaxStart(function(){ $(this).fadeIn(); });
		
	if($.browser.msie && ($.browser.version == '6.0')){
		DD_belatedPNG.fix('#canvas_details');
	}
	makeCopy();
	handlePicNav();
	$('#canvas').hide().fadeIn(1000);
	$('#canvas_details').fadeIn(2000);
	if(currentPage == 0) {
		var theUrlVars = getUrlVars();
		if(theUrlVars['page_id'] != null) currentPage = theUrlVars['page_id'];
	}
	makeCurrentPageVisible();
	
}