/* 
visions interface javascript 
Copyright 2011, Fund for the City of New York
All rights reserved.

This source file is distributable subject to the terms of the
FCNY Open Source License. 
*/

// fonts
function fontSetup() {
  iterateElementsByTagAndClassName( "a", null, $("Navigation"), function( elements, i ) { 
    if ( !hasElementClass( elements[i].parentNode, "editor" ) ) {
      addElementClass( elements[i], "Univers");
    }
  } );
  iterateElementsByTagAndClassName( "a", null, $("Footer"), function( elements, i ) { 
    addElementClass( elements[i], "Univers");
  } );
  Cufon.replace( getElementsByTagAndClassName( null, "Univers"), { "fontFamily": "Univers", "hover": true });
  log("Fonts replaced");
}
connect( window, "ondomload", window, "fontSetup" );

// size control
var sizes = { "version": "1.0", "active": "small", "activelink": false }

sizes.preinit = function() {
  var cval = getCookieValue( 'size' );
  if ( cval ) {
    this.active = cval;
  }
  log("active size is",this.active);
  if ( this.active != "small" ) {
    this[ this.active ]();
  }
}

sizes.large = function() {
  var rule = addCSSRule( "#Object" );
  rule.style.fontSize = "24px";
  rule = addCSSRule( "#Object h1" );
  rule.style.fontSize = "34px";
  rule = addCSSRule( "#Object h2" );
  rule.style.fontSize = "32px";
  rule = addCSSRule( "#Object h3" );
  rule.style.fontSize = "28px";
  rule = addCSSRule( "#Object h4" );
  rule.style.fontSize = "24px";
  rule = addCSSRule( "#Sidebar" );
  rule.style.fontSize = "26px";
  rule = addCSSRule( "#Sidebar h3" );
  rule.style.fontSize = "26px";
  rule = addCSSRule( "#Navigation h2" );
  rule.style.fontSize = "28px";
  rule = addCSSRule( "#Navigation h3" );
  rule.style.fontSize = "24px";
  rule = addCSSRule( "#Navigation h4" );
  rule.style.fontSize = "24px";
  rule = addCSSRule( "#Footer" );
  rule.style.fontSize = "24px";
  rule.style.width = "640px";
  rule = addCSSRule( "div.userform" );
  rule.style.fontSize = "26px";
}

sizes.medium = function() {
  var rule = addCSSRule( "#Object" );
  rule.style.fontSize = "18px";
  rule = addCSSRule( "#Object h1" );
  rule.style.fontSize = "28px";
  rule = addCSSRule( "#Object h2" );
  rule.style.fontSize = "26px";
  rule = addCSSRule( "#Object h3" );
  rule.style.fontSize = "22px";
  rule = addCSSRule( "#Object h4" );
  rule.style.fontSize = "18px";
  rule = addCSSRule( "#Sidebar" );
  rule.style.fontSize = "20px";
  rule = addCSSRule( "#Sidebar h3" );
  rule.style.fontSize = "20px";
  rule = addCSSRule( "#Navigation h2" );
  rule.style.fontSize = "22px";
  rule = addCSSRule( "#Navigation h3" );
  rule.style.fontSize = "18px";
  rule = addCSSRule( "#Navigation h4" );
  rule.style.fontSize = "18px";
  rule = addCSSRule( "#Footer" );
  rule.style.fontSize = "18px";
  rule.style.width = "510px";
  rule = addCSSRule( "div.userform" );
  rule.style.fontSize = "20px";
}

sizes.small = function() {
  var rule = addCSSRule( "#Object" );
  rule.style.fontSize = "14px";
  rule = addCSSRule( "#Object h1" );
  rule.style.fontSize = "24px";
  rule = addCSSRule( "#Object h2" );
  rule.style.fontSize = "22px";
  rule = addCSSRule( "#Object h3" );
  rule.style.fontSize = "18px";
  rule = addCSSRule( "#Object h4" );
  rule.style.fontSize = "14px";
  rule = addCSSRule( "#Sidebar" );
  rule.style.fontSize = "16px";
  rule = addCSSRule( "#Sidebar h3" );
  rule.style.fontSize = "16px";
  rule = addCSSRule( "#Navigation h2" );
  rule.style.fontSize = "18px";
  rule = addCSSRule( "#Navigation h3" );
  rule.style.fontSize = "15px";
  rule = addCSSRule( "#Navigation h4" );
  rule.style.fontSize = "15px";
  rule = addCSSRule( "#Footer" );
  rule.style.fontSize = "15px";
  rule.style.width = "445px";
  rule = addCSSRule( "div.userform" );
  rule.style.fontSize = "16px";
}

sizes.clickhandler = function( e ) {
  var target = e.target();
  if ( target.tagName!="A" ) return;
  e.stop();
  this.active = target.hash.substr(1);
  log("Clicked", this.active );
  setCookieValue( "size", this.active, "PATH=/" );
  this[ this.active ]();
  Cufon.refresh();
  removeElementClass( this.activelink, "active" );
  iterateElementsByTagAndClassName( "a", this.active, $("Size"), function( elements, i ) { 
    addElementClass( elements[i], "active" );
    sizes.activelink = elements[i];
  });
}

sizes.init = function() {
  iterateElementsByTagAndClassName( "a", this.active, $("Size"), function( elements, i ) { 
    addElementClass( elements[i], "active" );
    sizes.activelink = elements[i];
  });
  $("Size").style.display = "block";
  connect( $("Size"), "onclick", this, "clickhandler" );
}
sizes.preinit();
connect( window, "ondomload", sizes, "init" );

// slides object
var slides = { "version":"1.5", "active": false, "slides": [] }
slides.show = function ( id, first ) {
  var slide = $(id);
  if ( !slide ) return;  
  if ( this.active ) {
    this.active.style.display = "none";
    $(this.active.id+"_caption").style.display = "none";
  }
  this.active = slide;
  this.active.style.display = "block";
  $(this.active.id+"_caption").style.display = "block";
  var videoid = getNodeAttribute( slide, "videoid" );
  if ( videoid && !first ) {
    log("Playing",videoid);
    window.setTimeout( "$('flowplayer"+videoid+"').DoPlay()", 1000 );
  }
}
slides.clickhandler = function ( e ) {
  if ( e.mouse().button["left"]==true ) {
    var target = e.target();
    if ( target.tagName!="A" ) return;
    target.blur();
    var id = target.hash.substr(1);
    this.show( id );
  }
}
slides.init = function() {
  // find slides
  this.slides = iterateElementsByTagAndClassName ( "div", "slide", $("Slideshow"), function( eles, i ) {
    connect( eles[i], "onclick", slides, "clickhandler" );
  });
  // show a different slide if requested
  if ( window.location.hash ) {
    var id = window.location.hash.substr(1);
    var isslide = $(id);
    if ( isslide && hasElementClass( isslide, "slide" ) ) {
      log("Showing slide on this page",id);
      this.show( id, true );
    }
  }
  else {
    this.show( this.slides[0].id, true );
  }
}
// init called in template


// lightbox for previews and thumbnails
var lightbox = { "version": "1.2", "counter": 0, "images": [] }

lightbox.previewClick = function( e ) {
  e.stop();
  var preview = e.src();
  var lb_id = getNodeAttribute( preview, "lightbox_id" );
  var rawimage = $( "lightbox_" + lb_id );
  if ( rawimage.lightbox===undefined ) {
    if ( !rawimage.width ) {
      var width = rawimage.currentStyle.width.substring( 0, rawimage.currentStyle.width.indexOf("px") );
      var height = rawimage.currentStyle.height.substring( 0, rawimage.currentStyle.height.indexOf("px") );
    }
    else {
      var width = rawimage.width;
      var height = rawimage.height;
    }
    rawimage.lightbox = { "w": width, "h": height };
  }
  else {
    var width = rawimage.lightbox.w;
    var height = rawimage.lightbox.h;
  }
  // get viewport size, and resize image (reduce only) to fit
  var winsize = getViewportDimensions();
  // take 16 off for scrollbars
  winsize.w = winsize.w - 16;
  if ( winsize.w < 1024 ) {
    winsize.h = winsize.h - 16;
  }
  var targetw = winsize.w - 20;
  var targeth = winsize.h - 20;
  if ( width > targetw ) {
    var ratio = targetw / width;
    width = targetw;
    height = Math.floor( height * ratio );
  }
  if ( height > targeth ) {
    var ratio = targeth / height;
    height = targeth;
    width = Math.floor( width * ratio );
  }
  // set position in window
  if ( window.pageYOffset===undefined ) {
    var scrolledto = document.documentElement.scrollTop;
  }
  else {
    var scrolledto = window.pageYOffset;
  }
  var posx = ( winsize.w - width ) / 2;
  if ( posx < 10 ) posx = 10;
  var posy = ( winsize.h - height ) / 3;
  if ( posy < 10 ) posy = 10;
  posy = posy + scrolledto;
  log( "Winsize", winsize, "scrolled to", scrolledto, "rawimage size", rawimage.lightbox.w,"x",rawimage.lightbox.h,"final position", posx,"x",posy, "final size",width,"x",height );
  rawimage.style.left = posx+"px";
  rawimage.style.top = posy+"px";
  rawimage.style.width = width+"px";
  rawimage.style.height = height+"px";
  if ( rawimage && hasElementClass( rawimage, "loaded" ) ) {
    addElementClass( rawimage, "active" );
    addElementClass( $("top"), "lightbox" );
    //ScrollTo( rawimage );
    log("click",preview,"lb_id", lb_id);
  }
  else {
    log( "no rawimage or not loaded" );
  }
}
lightbox.rawimageClick = function( e ) {
  e.stop();
  var rawimage = e.src();
  var origid = getNodeAttribute( rawimage, "original_id" );
  var orig = $( origid );
  removeElementClass( $("top"), "lightbox" );
  //ScrollTo( orig );
  removeElementClass( rawimage, "active" );
}
lightbox.rawImageLoad = function( e ) {
  e.stop();
  var rawimage = e.src();
  if ( !rawimage.complete ) {
    // not complete
    window.setTimeout('lightbox.rawImagePostLoad("'+rawimage.id+'")', 1000);
  }
  else {
    lightbox.rawImagePostLoad( rawimage.id );
  }
}
lightbox.rawImagePostLoad = function( rawimageid ) {
  var rawimage = $( rawimageid );
  if ( !rawimage.width ) {
    var width = rawimage.currentStyle.width.substring( 0, rawimage.currentStyle.width.indexOf("px") );
    var height = rawimage.currentStyle.height.substring( 0, rawimage.currentStyle.height.indexOf("px") );
  }
  else {
    var width = rawimage.width;
    var height = rawimage.height;
  }
  // check to see that rawimage is bigger than original in width or height
  var origid = getNodeAttribute( rawimage, "original_id" );
  var orig = $( origid );
  if ( orig.width >= width && orig.height >= height ) {
    // do not lightbox
    removeElementClass( orig, "lightbox" );
    disconnect( orig.lightboxclick );
    log("No lightbox for",orig.id,"since raw image is smaller");
  }
  else {
    if ( !getNodeAttribute( orig, "title" ) ) {
      setNodeAttribute( orig, "title", "Click to view full size." );
    }
    addElementClass( orig, "loaded" );
    addElementClass( rawimage, "loaded" );
    connect( rawimage, "onclick", lightbox, "rawimageClick" );
  }
}
lightbox.init = function() {
  iterateElementsByTagAndClassName ( "img", null, $("Object"), function( images, i ) {
    // if image src includes token preview or thumbnail
    if ( images[i].src.indexOf( "preview" ) > -1 || images[i].src.indexOf( "thumbnail" ) > -1 ) {
      // make sure preview is last namepart
      var names = images[i].src.split( "/" );
      var lastname = names.pop();
      // check for nolightbox on image and 2 parents
      if ( hasElementClass(images[i], "nolightbox") || hasElementClass(images[i].parentNode, "nolightbox") || hasElementClass(images[i].parentNode.parentNode, "nolightbox") ) {
        return;
      }
      // check for link tag in 3 parents
      if ( images[i].parentNode.tagName=="A" || images[i].parentNode.parentNode.tagName=="A" || images[i].parentNode.parentNode.parentNode.tagName=="A" ) {
        return;
      }
      if ( ( lastname.indexOf( "preview" )==0 || lastname.indexOf( "thumbnail" )==0 ) ) {
        // connect onclick and add lightbox class
        lightbox.counter ++;
        if ( !images[i].id ) {
          images[i].id = "lightbox_original_" + lightbox.counter;
          log("Assigned id to images",i,",",images[i].id);
        }
        images[i].lightboxclick = connect( images[i], "onclick", lightbox, "previewClick" );
        addElementClass( images[i], "lightbox" );
        setNodeAttribute( images[i], "lightbox_id", lightbox.counter );
        var rawname = names.join("/") + "/poster.jpg";
        var rawimage = IMG( { "id": "lightbox_"+lightbox.counter, "src": rawname, "class": "rawimage", "title": "Click again to close image", "original_id": images[i].id } );
        connect( rawimage, "onload", lightbox, "rawImageLoad" );
        $("top").appendChild( rawimage );
      }
    }
  });
  log("Lightbox set up for",lightbox.counter,"images");
}

connect( window, "onload", lightbox, "init" );