var img_path = '/images/news';

function init() {
  var json     = makeIESafe($('articles_json').innerHTML);
  var articles = $H(eval('(' +json+ ')'));
  if (articles.keys().length > 0) {
    articles.each(placeArticle);
  }
}

// IE7 decides that a <p> tag really should have a \n in front of it,
// even tho that breaks any javascript eval on the text containing the
// <p> tag. The insertion of the newline is meaningless, yet harmful. 
// Stupid, stupid, stupid.
function makeIESafe(str) {
  var new_str = str.replace(/\s+(<p>)/gi, "$1");
  return new_str;
}


function newElementWithClass(tag, cls) { 
  var elem = document.createElement(tag);
  Element.addClassName(elem, cls);
  return elem;
}


function placeArticle(article_pair) {

var article         = article_pair.value;
var article_id      = article_pair.key;
  
  var newElement = function(tag, cls) { 
    var elem = document.createElement(tag);
    Element.addClassName(elem, cls);
    elem.setAttribute("id", article_id + '_' + cls)
    return elem;
  };
  
  var container_div   = $('article_column');
  var article_div     = newElement('div',  'article');
  var dateline_div    = newElement('div',  'dateline');
  var date_span       = newElement('span', 'date');
  var title_span      = newElement('span', 'title');
  
  date_span.innerHTML = article.postdate;
  title_span.innerHTML= article.title;
  
  dateline_div.appendChild(date_span);
  dateline_div.appendChild(title_span);
  
  article_div.appendChild(dateline_div);
  
  var body_div        = newElement('div', 'body');
  if (article.photos.length > 0 && article.photos[0]) {
    
    var photo_div  = newElement('div', "photo_browser");
    if (!(article.bodycopy)) {  
      Element.addClassName(photo_div, "standalone");
    }
    body_div.appendChild(photo_div);
  }
  if (article.bodycopy) {
    var copy_div       = newElement('div', 'copy');
    copy_div.innerHTML = article.bodycopy;
    body_div.appendChild(copy_div);
  }
  article_div.appendChild(body_div);
  
  var break_all = document.createElement('br');
  break_all.setAttribute('clear', 'all');
  container_div.appendChild(article_div);
  container_div.appendChild(break_all);
  
  var return_object = new Object();
  return_object.article_div = article_div;
  if (photo_div != undefined) {
  return_object.photo_browser = setUpPhotoBrowser(photo_div, article_pair);
  }
  return return_object;
}


function setUpPhotoBrowser(div, article_pair) {
  
  var num_slots = (Element.hasClassName(div, 'standalone')) ?
                  3 : 1;
  var browser   = new Browser(div, num_slots, article_pair.key);
  
  browser.addTrigger("image_loads", function() {
      // addBrowserControls(browser);
    }
  );
  
  // custom function for this photo browser overrides function in item browser prototpe 
  browser.addBrowseLinkArrow = function(elem, img_name, proc) {
  	  Element.addClassName(elem, "scroller_control");
      var img = document.createElement("img");
      img.src = '/images/button/' + img_name;
      elem.appendChild(img);
      elem.onclick = proc;
  };
  
  // custom function for this photo browser overrides function in item browser prototpe 
  browser.addBrowsingLinks = function(div) {
  	var containing_browser = this;

  	var previous_link = document.createElement("span");
    previous_link.setAttribute('id', this.prefix + "browser_previous_link");
    Element.addClassName(previous_link, "previous_scroller_control");
    if (this.first_slot_index > 0) {
    	this.addBrowseLinkArrow(previous_link, "arrow_left.gif",
    														function() {containing_browser.slotPrevious();});
    }
    // div.appendChild(previous_link);

    var following_link = document.createElement("span");
    following_link.setAttribute('id', this.prefix + "browser_following_link");
    Element.addClassName(following_link, "following_scroller_control");
    if (this.first_slot_index < this.item_array.length - this.number_of_slots) {
    	this.addBrowseLinkArrow(following_link, 'arrow_right.gif',
  															function() {containing_browser.slotFollowing();});
    }
    // div.appendChild(following_link);
    div.insertBefore(following_link, div.firstChild);
    div.insertBefore(previous_link, div.firstChild);
  };
  
  // Add and display, in reverse numerical order (higher issue numbers first)
  article_pair.value.photos.each(function(img_src, idx) {
    var item = new Item(img_src);

    item.showInitialContent = function() {
      /*
      this.dom_element.innerHTML = '<img src="' + img_path + 
          '/' + img_src + '" ' +
          'alt="' + article_pair.value.title + ' photo ' +
          parseInt(idx+1)+ '" />';
      */
      var img = document.createElement('img');
      img.setAttribute('src', img_path + '/' + img_src);
      img.setAttribute('alt', article_pair.value.title + 
        ' photo ' + parseInt(idx+1));
      this.dom_element.appendChild(img);
      util.addEventListener(img, "load", function(){browser.trigger("image_loads")});
    };
    browser.addItem(item);
  }  
  );
  browser.showSlottedItems();
  return browser;  
}


// IE won't play nice, so maybe abandon
function addBrowserControls(browser) {
  
  var getElementStyle = function(elem, IEStyleProp, CSSStyleProp) {
    // IE?
    if (elem.currentStyle) {
        return elem.currentStyle[IEStyleProp];
    } 
    // Mozilla?
    else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, "");
        return compStyle.getPropertyValue(CSSStyleProp);
    }
    // Safari?
    else if (document.defaultView && document.defaultView.getComputedStyle) {
  		// external stylesheet for Mozilla and Safari 1.3+
  		return document.defaultView.getComputedStyle(elem,"").getPropertyValue(CSSStyleProp);
  	}
  	// Who knows.
    return "";
  }
  
  browser.SLOTS_LOADED++;
  if (browser.SLOTS_LOADED == browser.number_of_slots) {
  //  alert("browser " + browser.prefix + " slots loaded");
    var first_img   = browser.slotted_items[0].dom_element.getElementsByTagName("img")[0];
    var image_dims  = Element.getDimensions(first_img);
    var padding     = getElementStyle(first_img, "paddingBottom", "padding-bottom");
    padding         = padding.replace('px','');
    var pos_offset  = Position.positionedOffset(first_img);
  	
  	var left_offset = pos_offset[0];
    var top_offset  = image_dims.height + pos_offset[1] - padding; 
    
    
    var scroller_controls = document.getElementsByClassName("scroller_control", browser.dom_add_point);
    scroller_controls.each(function (ctrl, idx) {

      ctrl.style.position = 'absolute';
      ctrl.style.top      = top_offset + "px";
      ctrl.style.left     = left_offset + idx*25 + "px";
      ctrl.style.display  = 'block';
    });
  }
}