/* 
  ------------------------------------
  PRESS by Duong Nguyen
	VARIABLES FROM HTML:
	listdata = Image Info:  image, text
	projecttitle
	projectlocation
	
	Change Log:
	2.209 Add footer
	2.207 Add jScrollPane cross-browser custom scrollbar
	2.2 Add galleriffic slideshow

  ------------------------------------
*/

NoScrollbar()


//Zoom
var zoomfactor=0 //Chrome, IE
var ffzoom="" //FF
var ffzoomtop=""  //FF
var ffzoombottom="" //FF
var StyleLeft="left:50px;" //Chrome, IE
var SummaryLeft="left:600px;"
zoom (900)

//NAVIGATION Container: logo, menu, motto
document.write('<div class="TopDiv" style="'+ffzoomtop+'">')
	//BOTTOM MOTTO
	document.write('<div id="mottowrapper" style="position:relative;z-index:100; width:900px;height:41px;top:560px;'+StyleLeft+'">')
		document.write('<img src="images/footer900.gif">')
		//FOOTER ADDRESS
		var footer="Hayashida Architects  |  1250 45th Street, Suite 340 Emeryville, CA 94608  |  T.510.428.2491  |  info@hayashida-architects.com"
		document.write('<div class="footer">'+footer+'</div>')

	document.write('</div>')
		
	//HAYASHIDA LOGO
	document.write('<div id="menuwrapper" style="position:relative;z-index:100; width:900px;height:34px;top:-30px;'+StyleLeft+'">')
		document.write('<a href="index.html"><img src="images/hayashida_logo.png" width="450" height="34" border="0"/></a>')
	document.write('</div>')
	
	document.write('<div class="clear"></div>')

	//MENU:  z-index to place menu on top of image
	document.write('<div id="menuwrapper" style="position:relative;z-index:501; width:900px; height:50px; top:-30px;'+StyleLeft+'">')
		LoadMenu()
	document.write('</div>')

	
	//TITLE
	document.write('<div class="projecttitle" align="right" style="position:relative;width:900px;height:50px; top:-30px;'+StyleLeft+'">'+projecttitle+'<BR><font class="projectlocation">'+projectlocation+'</div>')
	
//End of Navigation Container
document.write('</div>')

//Clear from float division (do not wrap text)
document.write('<div class="clear"></div><BR>')


//CONTENT Container	
document.write('<div class="MidDiv" style="position:relative;z-index:301;'+ffzoom+'">')
	//Gray background container
	document.write('<div style="position:absolute;background-color:gray;width:900px;height:400px;'+StyleLeft+'">')
	
		//SLIDESHOW
		document.write('<div style="position:relative;left:-300px;width:900px">')
			SlideShow()
		document.write('</div>')

		//SUMMARY
			//SUMMARY: use tabbed content if credit content (teamlist) exists
			if ((typeof teamlist) == 'undefined') {
				//width is 300-15 for jscroll-pane used in tabcontent
				document.write('<div style="position:relative;left:605px;width:295px">') 
					//jscroll-bar: 1) must wrap text in <p>...</p> 2) call $('.about').jScrollPane();
					//where '.about' should match div class="about"
					document.write('<div id="summary" class="about"><p>'+projectsummary+'</p></DIV>')
				document.write('</div>')
			}
			else {
				document.write('<div style="position:relative;left:605px;width:300px">') 
					TabContent()
				document.write('</div>')
			}
		document.write('</div>')
		
	document.write('</div>')
document.write('</div>')


/* 
  ------------------------------------
  ZOOM by Duong Nguyen
  ------------------------------------
*/

function zoom(contentX) {
//Delete background image
window.document.body.style.backgroundImage="none"

//Jquery window width: IE, FF, Chrome compatible
var BrowserWidth=$(window).width() 
var zoomlimit=contentX+400*(800/contentX)
var BrowserHeight=$(window).height()
//alert(BrowserWidth+","+BrowserHeight)
//Turn on scrollbar if content height does not fit
if (BrowserHeight <= 600) {window.document.body.style.overflow="scroll"}

//Website is designed to fit 1200px monitor width, scaled up if monitor is higher res
zoomfactor=BrowserWidth/zoomlimit

if (BrowserWidth > zoomlimit) {
	//ZOOM: works in Chrome & IE
	document.body.style.zoom=BrowserWidth/zoomlimit
	//if (browsername.search(/MSIE/i) > 0) {
		StyleLeft="left:"+(BrowserWidth-contentX*zoomfactor)/2/zoomfactor+"px;"
		//SummaryLeft="left:"+(600+((BrowserWidth-contentX*zoomfactor)/2/zoomfactor))+"px;"
	//} else if (browsername.search(/Firefox/i) > 0) {
		//Firefox zoom
		ffzoomtop="-moz-transform: scaleX("+zoomfactor+") scaleY("+zoomfactor+"); -moz-transform-origin: 0% 35%;"
		ffzoom="-moz-transform: scaleX("+zoomfactor+") scaleY("+zoomfactor+"); -moz-transform-origin: 0% -25%;"
		ffzoombottom="-moz-transform: scaleX("+zoomfactor+") scaleY("+zoomfactor+"); -moz-transform-origin: 0% -40%;"
	//}
}
else if (BrowserWidth > (contentX+100) && BrowserWidth < zoomlimit) {
		StyleLeft="left:"+(BrowserWidth-contentX+(zoomlimit-BrowserWidth))/2+"px;"
		//SummaryLeft="left:"+(600+(BrowserWidth-contentX+(zoomlimit-BrowserWidth))/2)+"px;"
}

//alert(BrowserWidth+","+zoomlimit+","+StyleLeft+","+SummaryLeft)

} //End of ZOOM

/* 
  ------------------------------------
  HIDE SCROLLBAR by Duong Nguyen
  ------------------------------------
*/
function NoScrollbar() {
	if (!(navigator.userAgent.match(/iPhone/i)) || !(navigator.userAgent.match(/Android/i)) || !(navigator.userAgent.match(/iPod/i))) {
		 $("body").css("overflow", "hidden"); //jQuery
	}
}


/* 
  ------------------------------------
  LOADMENU by Duong Nguyen
  ------------------------------------
*/
function LoadMenu() {
document.write('<ul id="nav">')
	document.write('<li><a href="index.html">values</a></li>')
	document.write('<li><a class="trigger" href="architecture.html">architecture</a>')
		document.write('<ul>')
			document.write('<li><a href="works_restaurant.html">restaurant</a></li>')
			document.write('<li><a href="works_retail.html">retail & shopping center</a></li>')
			document.write('<li><a href="works_officelab.html">office & laboratory</a></li>')
			document.write('<li><a href="works_residential.html">residential & multi-family</a></li>')
			document.write('<li><a href="works_historic.html">historic preservation</a></li>')
			document.write('<li><a href="works_hospitality.html">recreational & hospitality</a></li>')
			document.write('<li><a href="works_institution.html">institution & sanctuary</a></li>')
		document.write('</ul>')
	document.write('</li>')
	document.write('<li><a href="press.html">press & awards</a></li>')
	document.write('<li><a href="of_interest.html">of interest</a></li>')
	document.write('<li><a class="trigger" href="#">about us</a>')
		document.write('<ul>')
			document.write('<li><a href="about_firm.html">firm</a></li>')
			document.write('<li><a href="about_people.html">people</a></li>')
			document.write('<li><a href="about_affiliates.html">affiliates</a></li>')
			document.write('<li><a href="about_services.html">our services</a></li>')
			document.write('<li><a href="about_clients.html">partial client list</a></li>')
		document.write('</ul>')
	document.write('</li>')
	document.write('<li><a href="contacts.html">contact us</a></li>')
	document.write('<li><a href="/ajaxplorer/index.php">login</a></li>')
document.write('</ul>')
}

/* 
  ------------------------------------
  MENU
  ------------------------------------
*/
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}

 $(document).ready(function(){					
	mainmenu();
});



/*
  -----------------------------------------------------
  JQUERY TAB CONTENT: Display contents in multiple tabs
  Instruction:
  1) requires external CSS
  2) requires function TabContent()
  3) requires function JQUERY TAB BAR
  4) requires function makelist() for credit tab content
  -----------------------------------------------------
*/

/*
  ----------------------------------------------
  2) TABCONTENT: Display contents in multiple tabs
  ----------------------------------------------
*/
function TabContent() {
document.write("<div id='tabs_wrapper'  style='width:280px'>")
	//<!--  the tab links  -->
	document.write("<a href='#' class='tab_link tab_link_selected' title='#article'>Article</a>")

	//Credits tab
	if ((typeof teamlist) == 'undefined') {var projectcredits='none'} else {projectcredits = makelist (teamlist,2)}
	if (projectcredits != 'none') {document.write("<a href='#' class='tab_link' title='#credits'>Credits</a>")	}
	
	
	//<!--  clear it  -->
	document.write("<div class='clear'></div>")
	
	//<!-- start tab text containers  -->
	
	//SUMMARY
	document.write("<div class='tab_text active_tab' id='article'>")
		document.write('<div id="summarytext" class="projecttext"><p>'+projectsummary+'</p></DIV>')
	document.write("</div>")

	//PROJECT CREDITS
	if (projectcredits != 'none') {
	document.write('<div class="tab_text" id="credits">')
		document.write('<div id="credittext" class="whitetext12"><p>'+projectcredits+'</p></DIV>')
	document.write('</div>')
	}

	
	//<!--  end tab text containers  -->

document.write("</div>  ")
//<!-- end the tabs wrapper -->                                    
}

/* 
  ------------------------------------
  4) MAKELIST by Duong Nguyen
  ------------------------------------
*/
function makelist (mylist, fieldno) {
	fieldno=fieldno-1
	var formatlist='<UL>'
	listlen=mylist.length-1
	for (var c = 0; c < listlen; ++c) {
		//if weblink is provided
		if (mylist[c+1].length>0) {
			formatlist=formatlist+'<LI><a href="'+mylist[c+1]+'" class="whitetext12" title="Visit '+mylist[c+1]+'" target="new">'+mylist[c]+'</A></LI>'
			}
		else { formatlist=formatlist+'<LI><font class="whitetext12">'+mylist[c]+'<BR>'}
		c=c+fieldno
	}		
	formatlist=formatlist+'</UL>'
	return formatlist
}

/*
  ------------------------------------
  3) JQUERY TAB BAR: Display contents in multiple tabs
  ------------------------------------
*/
    $(document).ready(function(){
         /*Since all the tabs are hidden with css we are displaying the tab with class .active_tab using fadeIn()
         function. If you just want it to show with no effect, just put show() instead of fadeIn() */
        $('.active_tab').fadeIn();
        
        //when a tab link is clicked...
        $('.tab_link').live('click', function(event){
            
            /*...prevent the default behaviour...*/
            event.preventDefault();
            
            /* ...remove the tab_link_selected class from current active link... */
            $('.tab_link_selected').removeClass('tab_link_selected');
            
            /* ...and add it to the new active link */
            $(this).addClass('tab_link_selected');
        
            /*...get the title attribute (which corensponds to the id of the needed text container),
            but you can use any attribute you want*/
            var container_id = $(this).attr('title');
            
            //...animate the current active_tab by changing it's height and opacity ...'
            $('.active_tab').animate({ 
                
                height : 'toggle' , opacity : 'toggle' 
                
            //...and when that animation ends...
            },function(){
            
                //...remove the active_tab class from the current active tab...
                $(this).removeClass('active_tab');
                
                //...and add that class to the tab that corensponds the clicked link...
                $(container_id).addClass('active_tab');
                
                //...and animate the new active_tab by using toggle on height and opacity again...
                $('.active_tab').animate({
                   
                    height : 'toggle' , opacity : 'toggle'
                    
                });
				//DN: fixes for jScrollPane
				$('.active_tab').css("height", "370px"); //set height for scrollbar
				$('.tab_text').jScrollPane();  //used in tabbed content

            });
            
        });
    });
	
/////////////// End TabContent /////////////////////

/*
  -----------------------------------------------------
  JQUERY GALLERIFFIC: Slideshow
  Instruction:
  1) requires external galleriffic-2.css
  2) requires external galleriffic jquery code (see library.js)
  3) requires function SlideShow()
  4) requires function LoadThumb()
  5) requires function Jquery Hide/Show Caption
  6) requires function Jquery Galleriffic
  -----------------------------------------------------
*/

/*
  ----------------------------------------------
  3) SLIDESHOW
  ----------------------------------------------
*/

function SlideShow() {
document.write('<div id="gallery" class="content" >')
	document.write('<div class="slideshow-container">')
		//CONTROLS
		document.write('<div id="controls" class="controls"></div>')
		document.write('<div id="loading" class="loader"></div>')
		//SLIDESHOW
		document.write('<div id="slideshow" class="slideshow"></div>')
	document.write('</div>')
	//CAPTION
	document.write('<div id="thumbnails" class="caption-fadein">')
		document.write('<div id="caption" class="caption-container"></div>')
	document.write('</div>')
	//THUMBNAILS
	document.write('<div id="thumbnails" class="thumb-container">')
		LoadThumb()
	document.write('</div>')
document.write('</div>')

}

/*
  ----------------------------------------------
  4) THUMBNAIL GALLERY
  ----------------------------------------------
*/

function LoadThumb() {
document.write('<div id="thumbs" class="navigation">')
	document.write('<ul class="thumbs noscript">')
		//Count # of slides, minus one ("END" item)
		listlen=listdata.length-1
		for (var c = 0; c < listlen; ++c) {
			smallpic=listdata[c]
			//Check for valid image
			if ( (smallpic.match(/jpg/i)) || (smallpic.match(/png/i)) ) {
				document.write('<li>')
					//IMAGE
					document.write('<a class="thumb" href="'+folder+smallpic+'">')
						document.write('<img src="'+folder+smallpic+'" alt="'+listdata[c-1]+'" NAME="myslide" width="70px" height="70px" border="0px">')
					document.write('</a>')	
					//CAPTION
					document.write('<div class="caption">')
						document.write('<div class="image-desc">'+listdata[c-1]+'</div>')
						document.write('<div class="download">')
							document.write('<a href="'+listdata[c+1]+'">project page &rsaquo;</a>')
						document.write('</div>')
					document.write('</div>')		
				document.write('</li>')
			}
		}
	document.write('</ul>')
document.write('</div>')
document.write('<div style="clear: both;"></div>')

}

/* 
  ------------------------------------
  5) JQUERY HIDE/SHOW CAPTION
  ------------------------------------
*/

$(document).ready(function() {

	//On mouse over image
	$('.content').hover(function() {
		//Display control
		$(this).find('div.controls').css('filter', 'alpha(opacity=80)'); //fixed IE8 opacity problem
		$(this).find('div.controls').stop(false,true).fadeIn(200).css({'z-index' : '20'});
		//Display caption
		$(this).find('div.caption-container').css('filter', 'alpha(opacity=80)'); //fixed IE8 opacity problem
		$(this).find('div.caption-container').stop(false,true).fadeIn(200).css({'z-index' : '20'});
		//Display thumbnails
		$('.thumb-container').stop(false,true).fadeIn(200).css({'z-index' : '500'});
	},
	//On mouseout over image
	function() {
		//Hide control
		$(this).find('div.controls').stop(false,true).fadeOut(200);
		//Hide caption
		$(this).find('div.caption-container').stop(false,true).fadeOut(200);
		//Hide thumbnails
		$('.thumb-container').stop(false,true).fadeOut(10);
	});


});

/* 
  ------------------------------------
  6) JQUERY GALLERIFFIC
  ------------------------------------
*/


jQuery(document).ready(function($) {

	// We only want these styles applied when javascript is enabled
	$('div.navigation').css({'width' : '268px', 'float' : 'left'}); //DN: change width to 280 to prevent horizontal scrollbar
	$('div.content').css('display', 'block');

	// Initially set opacity on thumbs and add
	// additional styling for hover effect on thumbs
	var onMouseOutOpacity = 0.67;
	$('#thumbs ul.thumbs li').opacityrollover({
		mouseOutOpacity:   onMouseOutOpacity,
		mouseOverOpacity:  1.0,
		fadeSpeed:         'fast',
		exemptionSelector: '.selected'
	});
	
	// Initialize Advanced Galleriffic Gallery
	var gallery = $('#thumbs').galleriffic({
		delay:                     3500,
		numThumbs:                 12,
		preloadAhead:              10,
		enableTopPager:            true,
		enableBottomPager:         true,
		maxPagesToShow:            7,
		imageContainerSel:         '#slideshow',
		controlsContainerSel:      '#controls',
		captionContainerSel:       '#caption',
		loadingContainerSel:       '#loading',
		renderSSControls:          true,
		renderNavControls:         true,
		playLinkText:              'Play Slideshow',
		pauseLinkText:             'Pause Slideshow',
		prevLinkText:              '&lsaquo; Previous Photo',
		nextLinkText:              'Next Photo &rsaquo;',
		nextPageLinkText:          'Next &rsaquo;',
		prevPageLinkText:          '&lsaquo; Prev',
		enableHistory:             false,
		autoStart:                 true,
		syncTransitions:           true,
		defaultTransitionDuration: 1400,
		onSlideChange:             function(prevIndex, nextIndex) {
			// 'this' refers to the gallery, which is an extension of $('#thumbs')
			this.find('ul.thumbs').children()
				.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
				.eq(nextIndex).fadeTo('fast', 1.0);
		},
		onPageTransitionOut:       function(callback) {
			this.fadeTo('fast', 0.0, callback);
		},
		onPageTransitionIn:        function() {
			this.fadeTo('fast', 1.0);
		}
	});
});

/////////////// End SLIDESHOW /////////////////////

/* 
  ------------------------------------
  JQUERY JSCROLL-BAR
  Instruction:
  1) Must load external function JSCROLL-PANE (see library.js)
  2) Must load external css jquery.jscrollpane.css (see library.js)
  3) must wrap text in <p>...</p>
  4) ex: call $('.about').jScrollPane() where '.about' should match div class="about"
  Note: italic text mess up horizontal scrollbar
  ------------------------------------
*/
			$(function()
			{
				$('.about').jScrollPane(); //used in project_summary
				$('.tab_text').jScrollPane();  //used in tabbed content
			});

/////////////// End jscroll-pane /////////////////////

/* 
  ------------------------------------
  JQUERY CHARACTER JUSTIFY
  Instruction:
  1) Must load external function JQUERY FULLY JUSTIFY (see library.js)
  2) Define class in css
  3) must wrap text in <p class="justify">...</p>
  ------------------------------------
*/

       $(document).ready(function(){
          $(".footer").fullyJustify({properties: ['letter-spacing', 'word-spacing', 'font-size']});
       });