var trd_span;
// text resize detection setup
function trd_prep(){
	trd_span = new Element('span', {
		'styles': {
			'position': 'absolute',
			'line-height': '1em',
			'visibility': 'hidden',
			'left': '-400px'
		 },
		 'id': 'trd'
	}).injectBefore('contained');
	trd_span.setText(' ');

	// text resize detection (does not work for zoom)

   //id of element to check for and insert control
   TextResizeDetector.TARGET_ELEMENT_ID = 'trd';
   //function to call once TextResizeDetector has init'd
   TextResizeDetector.USER_INIT_FUNC = trd_init;



}
	// text resize detection initialization
   function trd_init()  {
      var iBase = TextResizeDetector.addEventListener(onFontResize,null);

      // fire event in case font is different size initially
      onFontResize(null, [{
      	'iSize': trd_span.getStyle('height').toInt()
      }]);
   }

	// event action
   function onFontResize(e,args) {

      var h = 0;
      var base = args[0].iSize * 1.1; // #content font-size
      var round_down = function(x){ return Math.floor(x*10)/10; };
      var h1 = function(){ return 1.6 * base; }; // h1 font-size
      h += round_down(h1()*1.2); // h1 margin-top
      h += round_down(h1()*1.25); // h1 line-height
      h += round_down(h1()*.6); // h1 margin-bottom

      var p = function(){ return 1.1 * base; }; // p font-size
      h += round_down(p()*1.4); // p line-height
      h += round_down(p()); // p margin-bottom
      h += round_down(p())*(10/12); // gap between gallery and paragraph

      // gallery top position
      gw.setStyle('top', h);
      // gallery navigation position
      gn.setStyle('margin-top', (base+400+(round_down(p())*(10/12))+(round_down(p())*(7/12))));
         // height of gallery + distance between p and gallery + margin below gallery + nav margin top

   }


var scroll_gallery;
var selected_sample = {removeClass: function(){} };
var border_gallery;
var gw;
var gn;
// Sample selection toggle
function sample_selection(sel){
    selected_sample.removeClass('activeState');
    if(sel.o){ selected_sample = sel.o; }
    if(sel.s){ selected_sample = $(sel.s);  }
    if(sel.o || sel.s){ selected_sample.addClass('activeState'); }
}
function gallery_prep(){
	gn = $('gallery_navigation');
    if( gn == null ) return false;
    //window.addEvent('domready', trd_prep);
    trd_prep();

	loc = parseUri(window.location.href);
	var graphic_width = $E('div.graphic').getStyle('width').toInt();
   anchors = new Array();
   var gallery_nav = $$('#gallery_navigation a');
   gallery_nav.each(function(anchor){
      anchor.postpound = anchor.href.split('#')[1];
      // since the above works, no reason to replace with parseURI
      // a URL parser I came across late in development for implementing urchinTracker

      anchors.include(anchor.postpound);

      // Onclick event
      anchor.addEvent('click', function(event){
         var event = new Event(event)
         event.stop();

         if(selected_sample != this){
            sample_selection({'o': this});
            //scroll_gallery.toElement(this.postpound);
            // Sequence of events:
            // 1. Fade out outline
            //    when changing color of entire border it lags,
            //    each side individually is faster, cleaner for some reason
            // 2. scroll
            // 3. Fade in outline
            border_gallery.start({
               'border-top-color': '#ebebeb',
               'border-right-color': '#ebebeb',
               'border-bottom-color': '#ebebeb',
               'border-left-color': '#ebebeb'
               }).chain(
               //function(x){
               	//scroll_gallery.toElement(x).chain(
               function(options){
               	// toElement is imperfect in Firefox for some reason
               	// scroll based on width of graphic and which graphic
               	scroll_gallery.scrollTo(anchors.indexOf(options.postpound)*options.graphic_width).chain(
							function(){border_gallery.start({
								'border-top-color':'#666666',
								'border-right-color':'#666666',
								'border-bottom-color':'#666666',
								'border-left-color':'#666666'
							});}
               	);
               }.pass({ 'postpound': this.postpound, 'graphic_width': graphic_width})
            );

         }
         urchinTracker(loc.directory+loc.file+((loc.query)? '?'+loc.query : '')+'#'+this.postpound);

      }.bind(anchor))
   }); // anchor click event

	gw = $('gallery_wrap');
   border_gallery = new Fx.Styles(gw, {
     wait: false,
     duration: 300
   });


   scroll_gallery = new Fx.Scroll(gw, {
     wait: false,
     duration: 300,
     transition: Fx.Transitions.Circ.easeInOut,
     wheelStops: false // important for vertical animations, kills horizontal however
   });

  // This function handles if user visits by means of anchor
  // which could happen via opening in new tab.
  function offset_x(){
    var href = document.location.href; //why not use hash? o_O
    if(href.indexOf('#') == -1){
     scroll_gallery.scrollTo(0, false);
         sample_selection({'o': gallery_nav[0]});
    }else{
     var postpound_key = anchors.indexOf(href.split('#')[1]);
     if(postpound_key == -1){ scroll_gallery.scrollTo(0, false); //scroll_gallery.toElement($(anchors[0]));
         sample_selection({'o': gallery_nav[0]});
     }else{ scroll_gallery.scrollTo(postpound_key*565, false); //scroll_gallery.toElement($(anchors[postpound_key]));
         sample_selection({'o': gallery_nav[postpound_key]});
     }
    }
  }
  offset_x()

} //gallery_prep


window.addEvent('domready', gallery_prep);
//window.addEvent('domready', trd_prep);