/**
*
* Add browser detection
*
**/
var Browser = {
detect: function() {
var UA = navigator.userAgent;
this.isKHTML = /Konqueror|Safari|KHTML/.test(UA);
this.isGecko = (/Gecko/.test(UA) && !this.isKHTML);
this.isOpera = /Opera/.test(UA);
this.isMSIE = (/MSIE/.test(UA) && !this.isOpera);
this.isMSIE7 = this.isMSIE && !(/MSIE 6\./.test(UA) && !this.isOpera);
this.isMSIE6 = this.isMSIE && !this.isMSIE7;
this.isIPHONE = /iPhone|iPod/.test(UA);
}
}
Browser.detect();
/**
*
* Shiny cursor
*
**/
c_shiny_cursor = Class.create({
//
// initialize
//
initialize: function() {
// settings
this._background_elmt = $$('body')[0];
this._background_offset = 232;
// system variables
this._is_stopped = false;
// initialize
this.set_event_handlers();
},
//
// set event handlers
//
set_event_handlers: function() {
document.observe('mousemove', function(e) {
this.move(e);
}.bind(this));
},
//
// move
//
move: function(e) {
if(!this._is_stopped) {
x = e.pointerX()-this._background_offset;
y = e.pointerY()-this._background_offset;
this._background_elmt.setStyle('background-position: '+x+'px '+y+'px;');
}
},
//
// pause
//
pause: function() {
this._is_stopped = true;
},
//
// resume
//
resume: function() {
this._is_stopped = false;
}
});
/**
*
* Image manager
*
**/
c_image_manager = Class.create({
//
// initialize
//
initialize: function() {
// settings
this._thumb_elmts = $$('div.thumb');
// system variables
this._queued = [];
this._queued_large = [];
this._loaded = [];
this._delay = 0;
this._loading_img = '/imgs/loading_'+$('slide').className+'.gif';
this._loading_finished = false;
// initialize
this.prepare_dom();
},
//
// prepare dom
//
prepare_dom: function() {
window.tmp_imgs = [];
this._thumb_elmts.each(function(a, b) {
_img = a.select('img')[0];
_img.identify();
this._queued.push(_img);
rnd = Math.floor(Math.random()*100000);
window.tmp_imgs[b] = new Image();
window.tmp_imgs[b].src = _img.src.replace(/\_th.jpg/, '.jpg?'+rnd);
_img.large_url = window.tmp_imgs[b].src;
this._queued_large.push(window.tmp_imgs[b]);
new Insertion.Top('container', '
');
this.show_thumb_loading_icon(a);
}.bind(this));
this.load_images();
},
//
// show thumb loading icon
//
show_thumb_loading_icon: function(obj) {
new Insertion.Top(obj, '');
},
//
// hide thumb loading icon
//
hide_thumb_loading_icon: function(obj) {
thumb_elmt = obj.up('div.thumb');
loading_elmt = thumb_elmt.select('div.loading')[0];
loading_elmt.fade({
duration: 0.4,
afterFinish: function(e) {
e.element.remove();
}.bind(this)
});
},
//
// load images
//
load_images: function() {
this._loading_interval = new PeriodicalExecuter(function() {
this.check_loading_state();
}.bind(this), 0.1);
},
//
// check loading state
//
check_loading_state: function() {
this._queued.each(function(a, b) {
if(a.complete == true && this._queued_large[b].complete == true) {
this._queued = this._queued.without(a);
this._loaded.push(a);
this._delay += 400;
window.setTimeout(function() {
this.hide_thumb_loading_icon(a);
}.bind(this), this._delay);
}
if(this._queued.length == 0) {
this._loading_interval.stop(a);
this._loading_finished = true;
$$('img.tmp').each(function(b) {
$(b.getAttribute('alt')).large_dims = b.getDimensions();
b.remove();
});
}
}.bind(this));
}
});
/**
*
* Navigation manager
*
**/
c_navigation_manager = Class.create({
//
// initialize
//
initialize: function() {
// settings
this._nav_elmt = $$('ul.nav')[0];
this._top_item_elmts = $$('ul.nav>li>a');
this._sub_item_elmts = $$('ul.nav ul.subnav li a');
this._slide_elmt = $('content');
this._offset = 8000;
this._effect_duration = 0.3;
this._colors = {
'design-and-web-development': '#2d515c',
'mixed-media-mashups': '#563d28',
'photographic-art': '#534040',
'patrick-beser': '#535353',
'standard': '#333333'
};
// initialize
this.set_event_handlers();
this.prepare_dom();
},
//
// set event handlers
//
set_event_handlers: function() {
this._top_item_elmts.each(function(a) {
if(a.hasClassName('top')) {
a.observe('click', function(e) {
e.stop();
this.slide_to_subnav(a);
}.bind(this));
} else {
a.observe('click', function(e) {
e.stop();
this.open_url_slide(a);
}.bind(this));
}
}.bind(this));
},
//
// prepare dom
//
prepare_dom: function() {
if(!$$('body')[0].hasClassName('page-home')) {
this._nav_elmt.setStyle('left: -'+this._offset+'px;');
new Insertion.Top('content', 'back
');
$('b-back').observe('click', function(e) {
e.stop();
if($('b-'+$('slide').className).next()) { this.open_subnav($('slide').className); }
else { this.open_nav(); }
}.bind(this));
this.slide_in_on_start();
}
},
//
// open nav
//
open_nav: function() {
this.move_slide(-1);
this.slide_back_to_nav();
},
//
// open subnav
//
open_subnav: function(section) {
this.move_slide(-1);
this.slide_to_subnav($('b-'+section), 'ltr');
},
//
// slide to subnav
//
slide_to_subnav: function(obj, dir) {
_subnav = obj.next();
this.morph_colors(this._colors[obj.id.replace(/b\-/, '')]);
this.build_subnav(_subnav);
if(dir == 'ltr') {
$('subnav').setStyle('left: -'+this._offset+'px;');
}
new Effect.Morph(this._nav_elmt, {
duration: this._effect_duration,
style: 'left: -'+this._offset+'px;'
});
new Effect.Morph('subnav', {
duration: this._effect_duration,
style: 'left: 0px;'
});
},
//
// build subnav
//
build_subnav: function(from) {
if(!$('subnav')) {
new Insertion.Top('container', '');
$$('ul#subnav li a').each(function(a) {
if(a.id == 'b-subnav-back') {
a.observe('click', function(e) {
e.stop();
this.slide_back_to_nav();
}.bind(this));
}
else {
a.observe('click', function(e) {
e.stop();
this.open_url_slide(a);
}.bind(this));
}
}.bind(this));
}
},
//
// slide back to nav
//
slide_back_to_nav: function() {
this.morph_colors(this._colors['standard']);
new Effect.Morph(this._nav_elmt, {
duration: this._effect_duration,
style: 'left: 0px;'
});
if($('subnav')) {
new Effect.Morph('subnav', {
duration: this._effect_duration,
style: 'left: '+this._offset+'px;',
afterFinish: function(e) {
e.element.remove();
}
});
}
},
//
// open url slide
//
open_url_slide: function(obj) {
if($('subnav')) {
new Effect.Morph('subnav', {
duration: this._effect_duration,
style: 'left: -'+this._offset+'px;',
afterFinish: function() {
window.location.href = obj.href;
}.bind(this)
});
}
else {
this.morph_colors(this._colors[obj.id.replace(/b\-/, '')]);
new Effect.Morph(this._nav_elmt, {
duration: this._effect_duration,
style: 'left: -'+this._offset+'px;',
afterFinish: function() {
window.location.href = obj.href;
}.bind(this)
});
}
},
//
// morph all colors
//
morph_colors: function(to) {
new Effect.Morph($$('body')[0], {
style: 'background-color: '+to+';',
duration: this._effect_duration
});
},
//
// move slide
//
move_slide: function(dir) {
pos = (dir == -1) ? this._offset : -this._offset;
if(dir == 0) pos = 0;
new Effect.Morph('content', {
style: 'left: '+pos+'px;',
duration: 0.6
});
},
//
// slide in on start
//
slide_in_on_start: function() {
$('content').setStyle('left: '+this._offset+'px;');
this.move_slide(0);
}
});
/**
*
* Lightbox manager
*
**/
c_lightbox_manager = Class.create({
//
// initialize
//
initialize: function() {
// settings
this._thumb_elmts = $$('div#thumbs div.thumb a');
this._thumb_img_elmts = $$('div#thumbs div.thumb a img');
// system variables
this._is_open = false;
this._current_img_index = 0;
this._current_padding = 0;
this._old_img_index = 0;
this._last_position = 0;
this._new_position = 0;
this._sliding_effect = false;
this._count_thumbs = this._thumb_elmts.length;
this._init_index = 0;
// initialize
this.set_event_handlers();
},
//
// set event handlers
//
set_event_handlers: function() {
this._thumb_elmts.each(function(a) {
a.observe('click', function(e) {
e.stop();
this.open_lightbox(a);
}.bind(this));
}.bind(this));
Event.observe(window, 'resize', function(e) {
if(this._is_open) this.recalculate();
}.bind(this));
},
//
// open lightbox
//
open_lightbox: function(obj) {
if(_image_manager._loading_finished) {
this._is_open = true;
_shiny_cursor.pause();
this._init_index = obj.up().previousSiblings().length;
this._current_img_index = this._init_index;
this._old_img_index = this._init_index;
_img = obj.select('img')[0];
_viewport = document.viewport.getDimensions();
new Insertion.Top('container', '
');
$('lightbox-inner').setOpacity(0.0001);
_imgs = '';
this._thumb_img_elmts.each(function(a, b) {
_dims = a.large_dims;
_width = ((_viewport.width-_dims.width)/2)+_dims.width;
_imgs += '';
if(b == 0) {
this._current_padding = ((_viewport.width-_dims.width)/4);
$('lightbox-inner').setStyle('padding-left: '+this._current_padding+'px;');
}
}.bind(this));
$('lightbox-inner').update(_imgs);
$('overlay').appear({
duration: 0.6
});
$('lightbox').appear({
duration: 0.6,
afterFinish: function() {
this.recalculate();
window.setTimeout(function() {
this.scroll_to_image(this._init_index, true);
this.enable_scrolling_by_key();
}.bind(this), 100);
}.bind(this)
});
this._draggable = new Draggable('lightbox-inner', {
constraint: 'horizontal',
starteffect: function() { },
endeffect: function() { },
onStart: function(e) {
if(this._sliding_effect) this._sliding_effect.cancel();
this._old_img_index = this._current_img_index;
this._last_position = $$('div#lightbox div.img img')[this._current_img_index].viewportOffset().left;
this.mouse_grabbing();
}.bind(this),
onEnd: function() {
this._new_position = $$('div#lightbox div.img img')[this._current_img_index].viewportOffset().left;
this.determine_current_image_index();
this.mouse_grab();
}.bind(this)
});
this.mouse_grab();
$('b-lightbox-close').observe('click', function(e) {
e.stop();
this.close_lightbox();
}.bind(this));
$('b-lightbox-prev').observe('click', function(e) {
e.stop();
this.scroll(-1);
}.bind(this));
$('b-lightbox-next').observe('click', function(e) {
e.stop();
this.scroll(1);
}.bind(this));
}
},
//
// recalculate
//
recalculate: function() {
_viewport = document.viewport.getDimensions();
_width_array = [];
$$('div#lightbox div.img').each(function(a, b) {
_dims = a.select('img')[0].getDimensions();
_width = _viewport.width;
_width_array[b] = (_width_array[b-1]) ? (_width_array[b-1]+_width) : _width;
a.setStyle('width: '+_width+'px;');
if(b == 0) {
this._current_padding = 0
$('lightbox-inner').setStyle('padding-left: '+this._current_padding+'px;');
}
}.bind(this));
_new_left = (this._current_img_index == 0) ? 0 : _width_array[this._current_img_index-1];
if(this._sliding_effect) this._sliding_effect.cancel();
$('lightbox-inner').setStyle('left: -'+(_new_left)+'px;');
},
//
// scroll to image
//
scroll_to_image: function(index, directly) {
_img = $$('div#lightbox div.img')[index];
_duration = (directly) ? 0 : 0.5;
if(this._sliding_effect) this._sliding_effect.cancel();
this.manage_prev_next_buttons(index);
this._sliding_effect = new Effect.Morph('lightbox-inner', {
style: 'left: '+(-(_img.offsetLeft-this._current_padding))+'px;',
duration: _duration,
afterFinish: function() {
$('lightbox-inner').setOpacity(1);
}
});
},
//
// scroll
//
scroll: function(dir) {
if(!this._slide_effect) {
_new_index = this._current_img_index+dir;
// validate index
if(_new_index < 0 || _new_index >= this._count_thumbs) {
_new_index = this._old_img_index;
}
this._current_img_index = _new_index;
this._old_img_index = _new_index;
this.scroll_to_image(this._current_img_index);
}
},
//
// manage prev/next buttons
//
manage_prev_next_buttons: function(index) {
if(index == this._count_thumbs-1) { $('b-lightbox-next').hide(); } else { $('b-lightbox-next').show(); }
if(index == 0) { $('b-lightbox-prev').hide(); } else { $('b-lightbox-prev').show(); }
},
//
// determine current image index
//
determine_current_image_index: function() {
_new_index = this._old_img_index;
// slide left (slide to next image)
if(this._new_position <= 0) {
_new_index += 1;
}
// slide right (slide to previous image)
if(this._new_position+parseInt($$('div#lightbox div.img img')[this._current_img_index].getWidth()) >= parseInt(document.viewport.getWidth())) {
_new_index = _new_index-1;
}
// validate index
if(_new_index < 0 || _new_index >= this._count_thumbs) {
_new_index = this._old_img_index;
}
this._current_img_index = _new_index;
this.scroll_to_image(this._current_img_index);
},
//
// mouse grab cursor
//
mouse_grab: function() {
$$('*').invoke('setStyle', 'cursor: auto;');
$$('a, a *').invoke('setStyle', 'cursor: pointer;');
$$('#lightbox img').invoke('setStyle', 'cursor: -moz-grab;');
},
//
// mouse grabbing cursor
//
mouse_grabbing: function() {
$$('*').invoke('setStyle', 'cursor: -moz-grabbing;');
},
//
// scroll by key
//
scroll_by_key: function(e) {
k = e.keyCode;
if(k == Event.KEY_LEFT || k == Event.KEY_RIGHT) {
_dir = (k == Event.KEY_LEFT) ? -1 : 1;
this.scroll(_dir);
}
},
//
// enable scrolling by key
//
enable_scrolling_by_key: function() {
document.observe('keydown', function(e) {
this.scroll_by_key(e);
}.bind(this));
},
//
// disable scrolling by key
//
disable_scrolling_by_key: function() {
document.stopObserving('keydown');
},
//
// close lightbox
//
close_lightbox: function() {
$('lightbox').fade({
duration: 0.3,
afterFinish: function() {
this._is_open = false;
this.disable_scrolling_by_key();
$('lightbox').remove();
_shiny_cursor.resume();
}.bind(this)
});
$('overlay').fade({
duration: 0.3,
afterFinish: function() {
$('overlay').remove();
}
});
}
});
document.observe('dom:loaded', function() {
_shiny_cursor = new c_shiny_cursor();
if($('thumbs')) {
_image_manager = new c_image_manager();
_lightbox_manager = new c_lightbox_manager();
}
_navigation_manager = new c_navigation_manager();
});