/**************************************************************

    Script          : work_feature
    Version         : 1.5
    Authors         : Umut Ahmet
    Licence         : Attribution-Noncommercial-No Derivative Works 3.0 Unported (http://creativecommons.org/licenses/by-nc-nd/3.0/)
    Usage           : window.addEvent('domready', function(){
                            // new toolbox
                            var feature = new work_feature({
                                parent: $('work_container'), // work container
                                child: '.work_elm', // class used for each work elm
                                btn_previous: $('btn_previous'),  // reference to the previous button
                                btn_next: $('btn_next') // reference to the previous button
                            });
                        });

**************************************************************/
var work_feature = new Class({
    
    Implements: [Options,Chain],
    
    initialize: function(options) {
        //set options
        this.setOptions(options);
        //set variables
        this.feature_content = this.options.parent.getChildren(this.options.child);
         
        this.slide_height = this.feature_content[0].getHeight(); // get height of first div. others will also be the same.
        this.slide_count = (this.feature_content.length)-1;      // get a count of the number of divs
        this.end_pos = this.slide_count;                         // declare end position
        this.cur_pos = 0;                                        // declare start position
        
        this.feature_fx = new Fx.Morph(this.options.parent, { 
            duration: 1250, 
            transition: 'back:in:out', 
            link: 'cancel' 
        });                                                      // prepare work_feature slide effect
        
        this.load();                                             // load work_feature   
    },
    
    load: function (){
        
        // force the first transition. 
        // if animation is skipped for the first transition requested
        var new_top = (this.cur_pos*this.slide_height).toInt();
        this.feature_fx.start({ top: -new_top });
        
        // thumbnail fade and image selection
        this.feature_content.each(function(work, index) { 
            var thumbnail_container = work.getChildren('.work_elm-thumbnails');
            var full_image = work.getChildren('.work_elm-lrg_img_container').getElement('img');
            var thumbnail_links = thumbnail_container.getChildren('a');
            var thumbnail_count = (thumbnail_links.length)-1;
            var end_pos = thumbnail_count;
            var cur_pos = 0;
            
            thumbnail_links.each(function(tns, index) {
                tns.each(function(tn, index) {
                    tn.set('morph', { duration: 'normal', transition: 'back:in:out' });
                    if (index > 0) tn.morph({ opacity: 0.4 });
                    
                    // fade effect when mouseover/mouseout on thumbnails
                    // change image and fade out previous thumbnail 
                    tn.addEvents({
                        'mouseover': function(e){
                            if(cur_pos != index) tn.morph({ opacity: 1 }); 
                        },
                        'mouseout': function(e){
                            if(cur_pos != index) tn.morph({ opacity: 0.4 }); 
                        },
                        'click': function(e){
                            e.stop();
                            tns[cur_pos].morph({ opacity: 0.4 });
                            full_image.set('src', tn.get('href'));                             
                            cur_pos = index;
                        }
                    }, this);
                }, this);
            }, this);
        });
        
        // onclick function for previous button
        this.options.btn_previous.addEvent('click', function (e) { 
            e.stop();
            this.toggle_next_previous('previous');
        }.bind(this));
        
        // onclick function for next button
        this.options.btn_next.addEvent('click', function (e) { 
            e.stop();
            this.toggle_next_previous('next');
        }.bind(this));
        
    },
    
    // function for both previous/next requests
    toggle_next_previous: function(dir){
        if (dir == 'previous') {
            (this.cur_pos == 0) ? this.cur_pos = this.end_pos : this.cur_pos--; 
        } else {
            (this.cur_pos == this.end_pos) ? this.cur_pos = 0 : this.cur_pos++; 
        };
        // calculate new 'top' distance and animate
        var new_top = (this.cur_pos*this.slide_height).toInt();
        this.feature_fx.start({ top: -new_top });
    }
});

// *** DOM READY EVENTS HERE ***
window.addEvent('domready', function() {
    // init new work_feature
    var feature = new work_feature ({
        parent: $('work_container'), 
        child: '.work_elm', 
        btn_previous: $('btn_previous'), 
        btn_next: $('btn_next')
    }); 
     
    // trick to avoid target blank on strict doctype
    $$('a.window_new').addEvent('click', function(e) { 
        e.stop();
        window.open(this.getProperty('href'));
    });  
    
// *** END DOM READY ***
});