document.observe('dom:loaded', function () { 
  var back_button = $$('a#back');
  var next_button = $$('a#next');

  var show_diascope_button = $$('a.showDiascopeButton');
  var close_diascope_button = $$('a.closeDiascopeButton');

	if (back_button != null) {
	    back_button.invoke('observe', 'click', load_back_dia);
	}
	
	if (next_button != null) {
	    next_button.invoke('observe', 'click', load_next_dia);
	}
	
	
	if (show_diascope_button != null) {
	    show_diascope_button.invoke('observe', 'click', show_diascope);
	}
	
	if (close_diascope_button != null) {
	    close_diascope_button.invoke('observe', 'click', close_diascope);
	}
	
	return true;
});

function load_back_dia(event) {
  event.stop();
  load_dia('back');
  return true;
}

function load_next_dia(event) {
  event.stop();
  load_dia('next');
  return true;
}

function load_dia(direction) {
	var url = 'diascope/stock.php';
	
	if ($('diascope_id') != null) {
	  var params = 'direction=' + encodeURIComponent(direction) + "&diascope_id=" + encodeURIComponent($('diascope_id').value);

    $('viewport').update("<div id=\"loading\"><img src=\"diascope/load.gif\" alt=\"Loading...\"></div>");
	  var ajax = new Ajax.Updater({success: 'viewport'},url,{method: 'get', parameters: params, onFailure: report_error, onSuccess: appear_on_success });
	}
}

function report_error(request) {
	$('viewport') = "Error";
}

function appear_on_success(request) {
  $('viewport').hide();
  new Effect.Appear('viewport');
}

function show_diascope(event) {
  event.stop();
  Effect.BlindDown('diascope-container'); 
  Effect.Fade('content-container', { from: 1, to: .2  });
  return true;
}

function close_diascope(event) {
  event.stop();
  Effect.BlindUp('diascope-container'); 
  Effect.Fade('content-container', { from: .2, to: 1  });
  return true;
}