Element.observe(document, 'dom:loaded', function(){

    var originalWidth = $('left').getWidth();
    var middleMargin = $('middle').getStyle('margin-top');

    if ($$('.contentbox').size()>1) {

      //add onclick event for each contentbox header/link
      $$('a.contentboxlink').each(function(element) {
	  element.observe('click', function(event) {
	      event.stop();
	      Effect.AtcToggleContentbox(element.up('div.contentbox'), originalWidth, middleMargin);
	    });
	});
      
      //add onclick event for each item header, and change cursor style
      $$('.contentbox dt').each(function(element) {
	  element.observe('click', itemHeaderOnclick);
	  element.setStyle({cursor: 'pointer'});
	});
      
      //do all content hiding, shortening etc
      onLoadHide();
      
      //add onclick event for each 'expand' span
      $$('.contentbox dd div span.expand').each(function(element) {
	  element.observe('click', expandOnclick);
	  element.setStyle({cursor: 'pointer'});
	});
      
      //add onclick event for each 'collapse' span
      $$('.contentbox dd div span.collapse').each(function(element) {
	  element.observe('click', collapseOnclick);
	  element.setStyle({cursor: 'pointer'});
	});
      
      $$('.photoNav').each(function(element) {
	  element.observe('click', photoNavOnclick);
	});
    }

    //startAjax();
});

startAjax = function() {
  ////////////////
  //Ajax Events
  ////////////////
  $$('.paginationControl a').each(function(el) {
      var link = el.readAttribute('href');
      var oldLink = link;
      link = link.slice(link.search('/')+1);
      var base = link.slice(0,link.search('/'));
      link = link.slice(link.search('/'));
      var newLink = base + '/#' + link;
      el.writeAttribute({href: newLink});

      el.observe('click', function() {
	  new Ajax.Updater('left', oldLink + '?format=html', {
	    onComplete: function() {
		startAjax();
	      }
	    });
	});
    });
}

onLoadHide = function() {
    //get show description objects
    var shows = $$('dl#shows dd');
    for (var index = 0; index < shows.length; ++index) {
        //leave first three alone, hide others
        if (index > 2) {
            shows[index].hide();
            shows[index].removeClassName('open');
            shows[index].addClassName('closed');
        }
        var longText = shows[index].down('div').innerHTML;
        if (shortenEntry(longText)) {
            shows[index].update("<div><span class='short'>" + shortenEntry(longText) +
                                "</span><span class='expand short'>[...]</span><span class='long'>" +
                                longText + "</span><span class='collapse long'>[&lt;&lt;&lt;]</span></div>");
            shows[index].select('div span.long').invoke('hide');
        }
    }

    //get news description objects
    var news = $$('dl#news dd');
    for (var index = 0; index < news.length; ++index) {
        //leave first post alone, hide others
        if (index > 0) {
            news[index].hide();
            news[index].removeClassName('open');
            news[index].addClassName('closed');
        }
        var longText = news[index].down('div').innerHTML;
        if (shortenEntry(longText)) {
            news[index].update("<div><span class='short'>" + shortenEntry(longText) +
                                "</span><span class='expand short'>[...]</span><span class='long'>" +
                                longText + "</span><span class='collapse long'>[&lt;&lt;&lt;]</span></div>");
            news[index].select('div span.long').invoke('hide');
        }
    }

    //get blog description objects
    var blog = $$('dl#blog dd');
    for (var index = 0; index < blog.length; ++index) {
        //leave first post alone, hide others
        if (index > 0) {
            blog[index].hide();
            blog[index].removeClassName('open');
            blog[index].addClassName('closed');
        }
        var longText = blog[index].down('div').innerHTML;
        if (shortenEntry(longText)) {
            blog[index].update("<div><span class='short'>" + shortenEntry(longText) +
                                "</span><span class='expand short'>[...]</span><span class='long'>" +
                                longText + "</span><span class='collapse long'>[&lt;&lt;&lt;]</span></div>");
            blog[index].select('div span.long').invoke('hide');
	    }
    }

    //get photos
    var photos = $$('#photosbox .photo');
    for (var index = 0; index < photos.length; ++index) {
      var previousPhoto = Builder.node('span', {
	className: 'photoNav pPhoto'
	}, '<');
      var nextPhoto = Builder.node('span', {
	className: 'photoNav nPhoto'
	}, '>');
      photos[index].insert({ top: previousPhoto });
      photos[index].insert(nextPhoto);
        if (index > 0) {
	  photos[index].hide();
        }
    }
	
	//get videos
    var videos = $$('#videosbox .photo');
    for (var index = 0; index < videos.length; ++index) {
      var previousVideo = Builder.node('span', {
	className: 'photoNav pPhoto'
	}, '<');
      var nextVideo = Builder.node('span', {
	className: 'photoNav nPhoto'
	}, '>');
      videos[index].insert({ top: previousVideo });
      videos[index].insert(nextVideo);
        if (index > 0) {
	  videos[index].hide();
        }
    }
};

Effect.AtcToggleContentbox = function(element, originalWidth, middleMargin) {
    column = element.up('.contentcol');
    //float middle column to right if right column being expanded and vice versa, for correct animation
    if (column == $('right')) {
        $('middle').setStyle({'float':'right'});
    } else {
        $('middle').setStyle({'float':'left'});        
    }

    //get all content boxes, and loop through
    $$('.contentbox').each(function(el) {
        //if it's not the clicked element then toggle via appear/fade
        if (el !== element) {
            if (column.getWidth() == originalWidth) {
                if (column == el.up('.contentcol')) {
                    new Effect.toggle(el, 'blind', { queue: 'front', duration: 0.5 });
                } else {
                    new Effect.toggle(el, 'appear', { queue: 'front', duration: 0.5 });
                }
            } else {
                if (column == el.up('.contentcol')) {
                    new Effect.toggle(el, 'blind', { queue: 'end', duration: 0.5 });
                } else {
                    new Effect.toggle(el, 'appear', { queue: 'end', duration: 0.5 });
                }
            }//if it is the clicked element, then expand or contract it
        } else { //this code here so that clicked column only gets changed once
            //if width of clicked elements column is same as middle column, expand
            if (column.getWidth() == originalWidth) {
                new Effect.Morph('middle',
                    { style: 'margin-top: 0;',
                      queue: 'front' });
                new Effect.Morph(column,
                    { style: 'width: 784px;',
                    queue: 'end' });
                //expand descriptions
                var toExpand = element.select('dd div span.expand');
                toExpand.each(function(item) {expandItem(item);});
                //show descriptions within clicked element
                var descriptions = element.select('dd.closed');
                new Effect.multiple(descriptions, Effect.BlindDown);
                //stop onclick event and cursor change
                element.select('dt').each(function(item) {
                    item.observe('click', itemHeaderOnclickNoState);
                });
            } else { //else collapse to original size
                new Effect.Morph('middle',
                    { style: 'margin-top: ' + middleMargin + ';',
                      queue: 'front' });
                new Effect.Morph(column,
                    { style: 'width: ' + originalWidth + 'px;',
                    queue: 'front' }
                );
                //collapse descriptions
                var toCollapse = element.select('dd div span.collapse');
                toCollapse.each(function(item) {collapseItem(item);});
                //hide descriptions within clicked element, if of class 'open'
                var descriptions = element.select('dd.closed');
                new Effect.multiple(descriptions, Effect.BlindUp);
                //(re)start onclick event and cursor change
                element.select('dt').each(function(item) {
                    item.observe('click', itemHeaderOnclick);
                });
            }
        }
    });
};

Effect.AtcToggleItem = function(element, state) {
    var elementDd = element.next('dd');
    //save state of item using class attribute
    if (state) {
        if (elementDd.hasClassName('open')) {
            elementDd.removeClassName('open');
            elementDd.addClassName('closed');
        } else {
            elementDd.removeClassName('closed');
            elementDd.addClassName('open');
        }
    }
    new Effect.toggle(elementDd, 'blind', { duration: 0.5 });
};

itemHeaderOnclick = function(event) {
    event.stop();
    Effect.AtcToggleItem(Event.element(event), true);
};

itemHeaderOnclickNoState = function(event) {
    event.stop();
    Effect.AtcToggleItem(Event.element(event), false);
};

expandOnclick = function(event) {
    event.stop();
    element = Event.element(event);
    expandItem(element);
};

collapseOnclick = function(event) {
    event.stop();
    element = Event.element(event);
    collapseItem(element);
};

expandItem = function(element) {
    element.up().select('span.short').invoke('hide');
    element.up().select('span.long').invoke('show');
};

collapseItem = function(element) {
    element.up().select('span.long').invoke('hide');
    element.up().select('span.short').invoke('show');
};

photoNavOnclick = function(event) {
  element = Event.element(event);
  new Effect.Fade(element.up('.photo'), {queue: 'front', duration: 0.5});
    if (element.hasClassName('nPhoto')) {//next photo
      var next = element.up('.photo').next('.photo');//next .photo div
      if (next == undefined) {//got to end of list, so start at beginning
	var photos = element.up('.photo').siblings();
	var next = photos[0];//first .photo div
      }
    } else {//previous photo
      var next = element.up('.photo').previous('.photo');//previous .photo div
      if (next == undefined) {//got to start of list, so start at end
	var photos = element.up('.photo').siblings();
	var next = photos[photos.length];//last .photo div
      }
    }
    new Effect.Appear(next, {queue: 'end', duration: 0.5});
};

shortenEntry = function(entry) {
    if (entry.length>400) {
        if (entry.slice(200).include('<br')) {
            return entry.slice(0,200) + entry.slice(200).split('<br',1);
        } else {
            return false;
        }
    } else {
        return false;
    }
};