// global vars var square_dim = 160, square_margin = 10, scroll_pos = 0, active_elem = null, active_link = null, nav_elements = null, image_elements = null, window_scroll = null, window_area_scroll = null, image_to_load = null; // some functions function dim_others ( _factor, _except ) { image_elements.each ( function ( _elem ) { if ( _elem != _except ) _elem.set ( "opacity", _factor ); } ); if ( _except != null ) _except.set ( "opacity", 1 ); } // positions navigation function position_images () { var margin_left = $("images").getPosition().x - 360; if (margin_left >= -50 ) { $("images").setStyle ( 'width', 860 ); // console.log ( window.getSize().x ); $("navigation").setStyle ( 'margin-left', margin_left ); } else { //$("images").setStyle ( 'width', 600 ); $("navigation").setStyle ( 'margin-left', '-50px' ); } } // toggle loader function toggle_loader_icon ( action, elem ) { var loader_elem = new Element ( 'div', { 'id': 'loader' } ); if ( action == "show" ) elem.adopt ( loader_elem ); else $( 'loader' ).destroy (); } // scrolls window function scroll_element ( _elem, _pos ) { ( function () { _elem.start ( 0, _pos ); } ).delay ( 200 ); } // nav preparing function set_up_nav () { $("navigation").setStyle ("opacity", 0.8); // store navigation elements nav_elements = $$("#navigation ul li a"); // style 1st element on start active_link = nav_elements [ 0 ]; active_link.setStyle ( 'background', '#fff url(images/_assets/dot.gif) no-repeat center center'); // set mouse events on each element nav_elements.each ( function ( _elem ) { // get label from href-attribute var label = _elem.get('href').substr (1, _elem.get('text').length ); _elem.addEvents( { 'mouseover': function () { if ( active_link != this ) this.setStyle ( 'background', '#fff url(images/_assets/dot.gif) no-repeat center'); this.getParent().setStyle ( 'background', '#fff url(images/_assets/' + label +'.gif) no-repeat right center' ); }, 'mouseout': function () { if ( active_link != this ) this.setStyle ( 'background', 'none'); this.getParent().setStyle ( 'background', '' ); }, 'click': function () { if ( active_link != this ) { // restore old element if ( active_link != null ) { active_link.setStyle ( 'background', 'none'); active_link.getParent().setStyle ( 'background', 'none' ); } active_link = this; } } }) ; } ); } // prepare images function prepare_images () { // get all image elems from markup image_elements = $$(".image-container div"); image_elements.each ( function ( _elem ) { // store some data for every elem _elem.store ( "init_y", _elem.getPosition().y ); _elem.store ( "thumb_src", _elem.getFirst().getFirst().get("src") ); _elem.store ( "highres_src", _elem.getFirst().get("href") ); // place img-tag next to a-tag and delete a-tag _elem.getFirst().getFirst().inject ( _elem, "top" ); _elem.getLast().destroy(); // replace space images var transform = _elem.get ( "class" ).split ( "_" ); if ( transform [ 1 ].toInt() == 1 && transform [ 2 ].toInt() == 1 ) { _elem.set ( 'class', 'space' ); _elem.empty(); } }); } function restore_image ( _elem, _dim ) { var image_alpha = new Fx.Morph ( _elem, { duration: 400, transition: Fx.Transitions.Sine.easeOut } ); image_alpha.start ( { 'opacity': 0, 'width': square_dim, 'height': square_dim } ), new_opacity = ( _dim ) ? 0.6 : 1 ; ( function () { _elem.getFirst().setProperties({ width: square_dim, height: square_dim, src: _elem.retrieve ( "thumb_src" ), alt: '' }); // _elem.setStyle ( "width", square_dim ); // _elem.setStyle ( "height", square_dim ); _elem.morph ( { opacity: new_opacity, duration: 250 } ); } ).delay ( 420 ); active_elem = null; } // image actions function set_image_actions () { image_elements = $$( ".image-container div[class~='imageelem']" ); image_elements.addEvent ( "click", function ( event ) { // some settings for Element.morph() this.set ( 'morph', { duration: 450 } ); // change navigation highlight according to image clicked in different area var section_id = this.getParent().getFirst().get ( "id" ), current_section = ( section_id != null ) ? section_id : "zeichnungen", label = active_link.get ( 'href' ).substr ( 1, active_link.get('text').length ); if ( label != current_section ) { active_link.setStyle ( 'background', 'none'); active_link.getParent().setStyle ( 'background', 'none' ); active_link = $$("a[rel='" + current_section + "']") [ 0 ]; active_link.setStyle ( 'background', '#fff url(images/_assets/dot.gif) no-repeat center'); } // actions when image has been resized (change src, etc) var image_resizer = new Fx.Morph ( this, { duration: 500, transition: Fx.Transitions.Quad.easeInOut } ); image_resizer.addEvents ( { 'complete': function () { // scroll to top of selected image scroll_element ( window_scroll, active_elem.getPosition().y - square_margin / 2 ); // change src image_to_load.replaces ( active_elem.getFirst() ); active_elem.morph ( { duration: 300, opacity: 1 } ); image_to_load = null; } }); // if the same image is clicked twice if ( this.getStyle ( "width" ).toInt() > square_dim || this.getStyle ( "height" ).toInt() > square_dim ) { // set other images to normal opacity dim_others ( 1, null ); restore_image ( this, false ); // scroll to top of image sequence scroll_element ( window_scroll, this.retrieve ( "init_y" ) - square_margin / 2 ); // if a non-active image is clicked } else { // dim ohter images dim_others ( 0.6, this ); // reset currently active image // if ( active_elem != null ) // restore_image ( active_elem, true ); var active_elem_tmp = this; // scroll to top of selected image // scroll_pos = this.getPosition().y - square_margin / 2; // window_scroll.start ( 0, scroll_pos ); // resize image and set high-res src var transform = active_elem_tmp.get ( "class" ).split ( "_" ), n_width = transform [ 1 ] * square_dim + ( ( transform [ 1 ] - 1 ) * square_margin ), n_height = transform [ 2 ] * square_dim + ( ( transform [ 2 ] - 1 ) * square_margin ); // load image, on complete transition to high-res image toggle_loader_icon ( "show", active_elem_tmp ); image_to_load = new Asset.image ( active_elem_tmp.retrieve ( "highres_src" ), { width: n_width, height: n_height, onload: function () { // reset currently active image if ( active_elem != null ) restore_image ( active_elem, false ); active_elem = active_elem_tmp; toggle_loader_icon ( "hide", active_elem ); image_resizer.start ( { 'height': n_height, 'width': n_width, 'opacity': 0 } ); } } ); } }); } window.addEvent ( "resize", position_images ); // this is where the magic happens, sort of window.addEvent( "domready", function () { position_images (); // scroll to image category window_scroll = new Fx.Scroll ( window, { duration: 500, transition: Fx.Transitions.Quad.easeOut } ), window_area_scroll = new Fx.SmoothScroll ( { links: '.image-area', wheelStops: true, duration: 'normal', duration: 600, transition: Fx.Transitions.Quad.easeInOut } ); // navigation set_up_nav (); // store some data and get rid of a-tags prepare_images (); // apply image actions/behaviour set_image_actions (); });