" +
""+
"
";
Class_SBox = this;
$each($$(".slidebelow"), function(item) { item.set("onclick", "Class_SBox.slideOpen(this)"); });
},
openWithElement: function(el) {
Shadowbox.open({
content: el.title+this.close,
title: el.get('html'),
player: "html",
width: 300
});
},
slideBelow: function(el) {
// go up tree until we find a .slideTarget element (2 levels)
if ($chk(el.getParent(".slideTarget"))) {
el.addEvent('click', function() { // do new slide
Class_SBox.slideOpen(el);
});
return true;
}
return false;
},
slideOpen: function(el) {
if ($chk($("slide_below"))) {
$("slide_below").nix();
t = el.getChildren('span.stored')[0];
el.set('html' ,t.get('html'));
return false;
}
p = el.getParent(".slideTarget");
el.set('html', "Close [X]");
d = el.getParent(".slideTarget").clone();
d.set('style', '');
d.setStyle('display','none');
d.set('id', 'slide_below');
p.grab(d, "after");
d.set('html',el.title);
d.reveal();
}
});
var Shelf = new Class({
options: {
name: "scroller for homepage and other areas (shelf)",
number: 4,
target: 'shelf',
stopped: false,
url: '',
displayed: 0
},
Extends: AAIIjs,
initialize: function(options){
this.parent(options);
$self = this;
window.Shelf = this;
$self.rightInvisible = [];
$self.leftInvisible = [];
},
start: function(options) {
$self.target = $(options.target);
$self.number = options.number;
$self.url = options.url;
$self.itemCounter = 0;
$self.lock = false;
container = new Element('div', {
'class' : 'shelf'
});
$self.target.adopt(container);
// two arrows
var left = new Element('a', {
'class' : 'shelf_leftarrow',
'styles' : {
'display' : 'none'
},
'href' : 'javascript:void(0);',
'events' : {
'click' : function() {
$self.slidePrev();
}
}
});
var right = new Element('a', {
'class' : 'shelf_rightarrow',
'styles' : {
'display' : 'none'
},
'href' : 'javascript:void(0);',
'events' : {
'click' : function() {
$self.slideNext();
}
}
});
var counter = new Element('div', {
'id' : 'shelf_counter'
});
$self.target.adopt(counter);
$self.target.adopt(left);
$self.target.adopt(right);
// make request
// index of item array to start at
start = 0;
var req = new Request.JSON({url: $self.url,
method: 'get',
onRequest: function() {
container.set('text', 'loading...');
},
onSuccess: function(theJSON) {
// hide throbber
container.set({'styles':{'backgroundImage':'none'}});
// clear whatever may be in there
container.empty();
// reveal the arrows
right.show();
left.show();
i = 0;
while ($chk(theJSON.items[i])) {
window.Shelf.createItem(theJSON.items[i], container);
i++;
}
}
}).send();
// set up variables for fading
switch ($self.number) {
case 3:
difference = 190;
break;
default:
difference = 190;
}
},
createItem: function(JSONarray, container) {
$self.itemCounter++;
// create elements
var div = new Element('div', {
'class' : 'shelf_item shelf_columns_'+$self.number,
'id' : 'shelf_item_'+$self.itemCounter
});
var div2 = new Element('div', {
'class' : 'inner'
});
var span = new Element('span', {
'html' : JSONarray.category,
'class' : 'category'
});
var img = new Element('img', {
'src' : JSONarray.image
});
var a = new Element('a', {
'href' : JSONarray.link,
'class' : 'shelf_imglink'
});
div2.adopt(span);
div2.adopt(img);
a.wraps(img);
div.adopt(div2);
div.addEvents({
'mouseover' : function() {
temp = this.getFirst().getFirst().get('text');
this.getFirst().getFirst().set('text', 'click to read journal');
},
'mouseout' : function() {
this.getFirst().getFirst().set('text', temp);
}
});
if ($self.itemCounter < $self.number+1 )
{
container.adopt(div); // actually put it in container, give it a home
var divf = new Fx.Tween(div,{property: 'opacity'});
divf.start(1);
$self.lastItem = $self.itemCounter;
div.set('class', 'shelf_item shelf_columns_'+$self.number+' shelf_pos_'+$self.itemCounter);
div.setStyles({
'position': 'absolute',
'top': '20px'
});
div.setStyle('left', ((difference*($self.itemCounter-1)+27)));
}
else
{
// hide the item off to the side, we're not displaying it yet.
container.adopt(div);
$self.rightInvisible.push(div);
div.setStyles({
'position':'static',
'visibility':'hidden'
});
}
$self.updateTotals();
},
slideNext: function() {
if (!$chk($self.rightInvisible[0])) {
$self.fakeMoveRight();
return false;
} else if ($self.lock) {
return false;
}
// this is incompatible with numbers other than 3
left = $$('.shelf_pos_1')[0];
middle = $$('.shelf_pos_2')[0];
right = $$('.shelf_pos_3')[0];
var Q = new Queue(
// step 1: move all to the left.
function() {
$self.lock = true; // lock so no more clicks start animation
$self.moveLeft(left, function() {
$self.moveLeft(middle, function() {
$self.moveLeft(right, function() { // callback
Q.callChain(); // call next function in this chain
});
});
}
);
},
// step 2: hide the leftmost image and add to leftInvisible array.
function() {
// HIDE leftmost
left.setStyles({
'position': 'static',
'visibility' : 'hidden'
});
$self.leftInvisible.unshift(left);
// reset CSS Classes
left.removeClass('shelf_pos_1');
middle.removeClass('shelf_pos_2');
right.removeClass('shelf_pos_3');
left = middle;
middle = right;
left.addClass('shelf_pos_1'); // middle = new 'left'
middle.addClass('shelf_pos_2'); // right = new 'middle'
// new 'right' is displayed now:
// DISPLAY next
var div = $self.rightInvisible[0];
div.addClass('shelf_pos_3');
div.setStyles({
'position': 'absolute',
'top': '20px'
});
div.setStyle('left', 402+difference); // queue up
right = div;
Q.callChain();
},
// step 3: create the next right image and clear div from $self.rightInvisible
function() {
$self.lock = false; // unlock
right = $$('.shelf_pos_3')[0];
$self.moveLeft(right);
$self.rightInvisible.shift();
$self.updateTotals();
}
);
Q.callChain(); // starts first function in chain
// the rest are called from within
},
slidePrev: function() {
if (!$chk($self.leftInvisible[0])) {
$self.fakeMoveLeft();
return false;
} else if ($self.lock) {
return false;
}
// this is incompatible with numbers other than 3
left = $$('.shelf_pos_1')[0];
middle = $$('.shelf_pos_2')[0];
right = $$('.shelf_pos_3')[0];
var Q = new Queue(
// step 1: move all to the left.
function() {
$self.lock = true; // lock so no more clicks start animation
$self.moveRight(right, function() {
$self.moveRight(middle, function() {
$self.moveRight(left, function() { // callback
Q.callChain(); // call next function in this chain
});
});
}
);
},
// step 2: hide the rightmost image and add to rightInvisible array.
function() {
// HIDE rightmost
right.setStyles({
'position': 'static',
'visibility' : 'hidden'
});
$self.rightInvisible.unshift(right);
// reset CSS Classes
left.removeClass('shelf_pos_1');
middle.removeClass('shelf_pos_2');
right.removeClass('shelf_pos_3');
right = middle;
middle = left;
right.addClass('shelf_pos_3'); // right = new 'left'
middle.addClass('shelf_pos_2'); // right = new 'middle'
// new 'left' is displayed now:
// DISPLAY next
var div = $self.leftInvisible[0];
div.addClass('shelf_pos_1');
div.setStyles({
'position': 'absolute',
'top': '20px'
});
div.setStyle('left', 27-difference); // queue up
Q.callChain();
left = div;
},
// step 3: create the next right image.
function() {
$self.lock = false; // unlock
left= $$('.shelf_pos_1')[0];
$self.moveRight(left);
$self.leftInvisible.shift();
$self.updateTotals();
}
);
Q.callChain(); // starts first function in chain
// the rest are called from within
},
moveLeft: function(el, fn) {
if (!$chk(fn)) { fn = $lambda(true); } // set up callback function
var fx = new Fx.Morph(el, {
duration: 50,
transition: 'sine:in:out',
onStart: function() {
el.set('opacity', .5);
},
onComplete: function() {
el.set('opacity', 1);
fn();
}
});
fx.start({
'left' : (el.getPosition(container).x)-difference
});
},
moveRight: function(el, fn) {
if (!$chk(fn)) { fn = $lambda(true); } // set up callback function
var fx = new Fx.Morph(el, {
duration:50,
transition: 'sine:in:out',
onStart: function() {
el.set('opacity', .5);
},
onComplete: function() {
el.set('opacity', 1);
fn();
}
});
fx.start({
'left' : (el.getPosition(container).x)+difference
});
},
fakeMoveLeft: function() {
// bounce 'em to the left
var arr = [$$('.shelf_pos_1')[0], $$('.shelf_pos_2')[0], $$('.shelf_pos_3')[0]];
$each(arr, function(el) {
var fx = new Fx.Morph(el, {
duration: 50,
onComplete: function() {
var fx2 = new Fx.Morph(el, {'duration':50});
fx2.start({'left': el.getPosition(container).x+10});
}
});
fx.start({'left': el.getPosition(container).x-10});
});
},
fakeMoveRight: function() {
// bounce 'em to the left
var arr = [$$('.shelf_pos_1')[0], $$('.shelf_pos_2')[0], $$('.shelf_pos_3')[0]];
$each(arr, function(el) {
var fx = new Fx.Morph(el, {
duration: 50,
onComplete: function() {
var fx2 = new Fx.Morph(el, {'duration':50});
fx2.start({'left': el.getPosition(container).x-10});
}
});
fx.start({'left': el.getPosition(container).x+10});
});
},
updateTotals: function() {
var lcount = 0;
var rcount = 0;
var text = "
";
$each($self.leftInvisible, function() {
lcount++;
text = "
" + text;
});
$each($self.rightInvisible, function() {
rcount++;
text = text + "";
});
$('shelf_counter').set('html', text);
}
});
/************************************************
| Custom Utility Classes |
| > Queue, etc. |
***********************************************/
Queue = new Class({
Implements: Chain,
initialize: function(){
this.chain.apply(this, arguments);
}
});
Util = new Class({
initialize: function(){
},
getFileExtension: function(inputstr)
{
if( inputstr.length == 0 ) return "";
var dot = inputstr.lastIndexOf(".");
if( dot == -1 ) return "";
var extension = inputstr.substr(dot,inputstr.length);
return extension;
},
emptyChain: function(chain) {
while (chain.callChain()) {}
return true;
}
});
Scrollerize = new Class({
initialize: function(el, columns) {
// arrows
this.self = this;
this.container = el;
this.columns = columns;
this.itemWidth = el.getChildren('li')[0].getStyle('width').replace(/px/gi, "");
this.itemWidth = parseInt(this.itemWidth);
this.oneColumnWidth = (this.itemWidth + 10) * columns;
this.currentScroll = {x: 0, y: 0};
this.numItems = el.getChildren('li').length;
this.wrap = new Element('div', {"class":"scroller-wrap"});
this.uberWrap = new Element('div', {"class" : "scroller-uberwrap"});
this.uberWrap.adopt(this.wrap);
this.container.grab(this.uberWrap, "before");
this.wrap.grab(this.container);
this.uberWrap.grab(this.wrap);
var leftArr = new Element('a', {
"class" : "scroller-arrow left",
html: 'Scroll Left',
href: "#page-1",
events: {
'click' : (function() {
this.left();
}).bind(this)
}
});
var rightArr = new Element('a', {
"class" : "scroller-arrow right",
html: 'Scroll Right',
href: "#page-2",
events: {
'click' : (function() {
this.right();
}).bind(this)
}
});
this.leftArrow = leftArr;
this.rightArrow = rightArr;
this.leftArrow.setStyle('opacity', 0);
// styles
this.uberWrap.adopt(leftArr, rightArr);
var myfx = new Fx.Scroll(this.wrap);
myfx.set(0,0);
},
left: function() {
var myfx = new Fx.Scroll(this.wrap);
this.currentScroll.x -= this.itemWidth;
this.currentScroll.y = this.currentScroll.y;
this.self.checkArrows("left");
myfx.start(this.currentScroll.x, this.currentScroll.y);
},
right: function() {
var myfx = new Fx.Scroll(this.wrap);
this.currentScroll.x += this.itemWidth;
this.currentScroll.y = this.currentScroll.y;
this.self.checkArrows("right");
myfx.start(this.currentScroll.x, this.currentScroll.y);
},
checkArrows: function(direction) {
this.leftArrow.fade(1);
this.rightArrow.fade(1);
if (this.columns != 1) {
if (direction == "right") {
if (this.currentScroll.x >= (this.oneColumnWidth * this.columns - this.oneColumnWidth)) {
this.currentScroll.x = (this.oneColumnWidth * this.columns) - (this.oneColumnWidth);
this.rightArrow.fade(0);
}
} else {
if (this.currentScroll.x <= 0) {
this.currentScroll.x = 0;
this.leftArrow.fade(0);
}
}
} else {
if (direction == "left" && this.currentScroll.x == 0) {
this.leftArrow.fade(0);
} else if (direction == "right" && this.currentScroll.x == (this.itemWidth * this.numItems - this.itemWidth)) {
this.rightArrow.fade(0);
}
}
}
});
/* Comment-form */
var CommentForm = function() {
var state = $("comment-state");
var name = $("comment-name");
var req = new Request.JSON({
url: '/users/commentInfo',
mode: 'get',
onRequest: function() {
state.disabled = name.disabled = 1;
state.value = name.value = "Loading...";
},
onSuccess: function(r) {
state.disabled = name.disabled = 0;
if ($chk(r.name) && $chk(r.state)) {
state.value = r.state;
name.value = r.name;
}
},
onFailure: function() {
state.disabled = name.disabled = 0;
state.value = name.value = "";
}
}).send();
}
/* sharepops */
var Sharepops = function() {
$each($$(".share-pop"), function(i) {
i.addEvent('click', function(e) {
var sizestr = "width=600,height=325";
if (i.hasClass('big')) {
sizestr = "width=860,height=500";
}
window.open(i.get('href'), "Share using " + i.get('text'), "status=1,toolbar=0,location=0,menubar=1,scrollbars=1,"+sizestr);
return false;
});
});
};
/*
---
description: ScrollSpy
authors:
- David Walsh (http://davidwalsh.name)
license:
- MIT-style license
requires:
core/1.2.1: '*'
provides:
- ScrollSpy
...
*/
var ScrollSpy=new Class({Implements:[Options,Events],options:{container:window,max:0,min:0,mode:"vertical"},initialize:function(a){this.setOptions(a);this.container=document.id(this.options.container);this.enters=this.leaves=0;this.max=this.options.max;this.inside=false;this.addListener();},addListener:function(){this.container.addEvent("scroll",function(c){var a=this.container.getScroll(),b=a[this.options.mode=="vertical"?"y":"x"];if(b>=this.options.min&&(this.max==0||b<=this.max)){if(!this.inside){this.inside=true;this.enters++;this.fireEvent("enter",[a,this.enters,c]);}this.fireEvent("tick",[a,this.inside,this.enters,this.leaves,c]);}else{if(this.inside){this.inside=false;this.leaves++;this.fireEvent("leave",[a,this.leaves,c]);}}this.fireEvent("scroll",[a,this.inside,this.enters,this.leaves,c]);}.bind(this));}});