var $drops;

var Drops = {
    
    prefix: 'thumb_', 
    row_width: 5,
    total: 15,
    width: 83,
    
    
    init: function() {
     
       this.total = images_count; 
       // preload
       for (var i = images_count ; i >= 1; i--){
          $('<img src="' + images[i]['big'] + '" />').appendTo('#preloader');
       };
    } ,
    
    get: function(obj) {
        
        if (typeof(obj) === 'string' ) obj = {id: obj};
        else if (typeof(obj) === 'number') obj = {num: obj};
        
        if (!obj.id) {
            if (obj.num) {
                obj.id = this.prefix + obj.num;                
            } else {
                return null;
            } 
        }
        
        obj.num = obj.num || obj.id.substr(6);
        
        if (obj.num && obj.num > this.total) return null;
        if (obj.num && obj.num < 1) return null;
        
        return {
            id: obj.id,
            num: obj.num,
            src: images[obj.num].big,
            width: images[obj.num].width,
            height: images[obj.num].height
        };        
    }
    
};


var Wind = {
    direction: {top: 900, left: 0},
    speed: 1500,
    changeability: 50,
    delay: 500,
    shivering:  null,
    rotation: null,
    
    
    dropAll: function (element) {
        
        Roll.selectRow(Math.floor((+element.id.substr(Drops.prefix.length) - 1) / Drops.row_width) + 1);
        Roll.first_shown = Drops.get(element.id);
        
        $drops.each(function() { 
                
                if (this.id == element.id)
                    Wind.drop(this, Wind.delay);
                else
                    Wind.drop(this);
            });
    },
    
    drop: function (element, delay) {
        
        var drop = $(element),
            new_left = drop.offset().left + this.direction.left,
            new_top  = drop.offset().top + this.direction.top,
            speed = this.speed;     
            
        if (delay) {
            drop.delay(delay);
            speed = this.speed/1.5;
        }
        
        drop.animate({left: new_left, top: new_top}, speed, 'linear', function() { Roll.add(drop); });        
    },
    
    
};

var Roll = {
    
    container_id: 'roll',
    container: null,
    row: null,
    selected: null,
    selected_element: null,
    left_element: 1,
    _elements_ready: 0,
    width: 5,
    picture: null,
    processing: false,
    first_shown: 0,
    delayed_show: false,
    waiting_drop: false,
    waiting_flag: false,
    loaded: false,
    
    
    init: function() {
        this.container = $('#' + this.container_id); 
        $('#roll_container').css({width: (this.width * Drops.width) + 'px', marginLeft: (400 - this.width * Drops.width / 2) + 'px'}); 
        this.picture = $('#picture');  
        
        this.picture.load(function() {
            
            if (Roll.waiting_flag) {
                Roll.processing = false;
                return;
            }
            
            
            $(this).css('width', Roll.selected.width)
                    .css('height', Roll.selected.height)
                    .css('margin-top', Math.floor(-Roll.selected.height/2))
                    .css('margin-left', Math.floor(-Roll.selected.width/2))
                    .fadeIn('fast');
                    
            Roll.processing = false;
        });
        
    },

    add: function() {
        this._elements_ready++;
        if (this._elements_ready == Drops.total) 
            this.load();
    },
    
    load: function(argument) {
        
        this.loaded = true;        
        $drops.hide().css({ position: 'static', opacity: 0.7}).appendTo('#' + this.container_id);
        $drops.unbind('click').click(function() { Roll.select(Drops.get(this.id)); });
        this.select(this.first_shown);
        this.first_shown = 0;
        $drops.fadeIn('slow');
    },
    
    show: function(drop) {
        
        // Если картинка занята другим процессом
        if (this.processing) {
            
            this.waiting_flag = true;
            this.waiting_drop = drop;
            if (this.delayed_show) {
                clearTimeout(this.delayed_show);
            }
            
            this.delayed_show = setTimeout(function() {
                Roll.waiting_flag = false;
                Roll.show(Roll.waiting_drop);          
            }, 500);
            return;
        }
        
        this.processing = true;

        this.picture.fadeOut('fast', function() {
            
            Roll.picture[0].src = drop.src;
            
            /*Opera fix*/
            if (Roll.first_shown) {
                Roll.picture.load();
            }
        });        
    },
    
    select: function(drop) {

        if (this.selected) {
            if (this.selected.num == drop.num) return;
            $('#' + this.selected.id).css({opacity: 0.7});
        }
        
        this.selected = drop;
        $('#' + this.selected.id).css({opacity: 1});
        
        Arrows.left.toggle(this.selected.num != 1);
        Arrows.right.toggle(this.selected.num != Drops.total);
        
        this.show(this.selected);
    },
    
    shift: function(where) {
        
        this.left_element = this.left_element + where;

        if (this.left_element <= 0) {
            this.left_element = 1;
        }
        if (this.left_element >= (Drops.total - this.width + 2))  {
            this.left_element = Drops.total - this.width + 2;
        }
        
        this.container.animate({marginLeft: ((- this.left_element + 1) * Drops.width) + 'px' }, 'fast');
        
        $('#roll_right_arrow').toggle(this.left_element < Drops.total - this.width + 1);
        $('#roll_left_arrow').toggle(this.left_element > 1);
    },
    
    selectRow: function(row) {
        
        this.row = row;
        this.shift(parseInt(+row-1,10) * Drops.row_width);
        
    },
    
    move: function(where) {
        
        var drop = Drops.get(+this.selected.num + where);
        if (!drop) return;
        
        /* Если за пределами диапозона*/
        if ((drop.num < this.left_element) || (drop.num > this.left_element + this.width - 1)) {
            this.shift( this.width * Math.floor(drop.num/this.width)  - this.left_element + 1);
        } 
        /* Если стоим у левого или правого края */
        if ((drop.num == this.left_element) || (drop.num == this.left_element + this.width - 1) ) {
            this.shift(where);
        } 
        
        
        
        this.select(drop);
        
    }
};


var Arrows = {
    
    init: function() {
        
        this.left = $('#arrow_left');
        this.right = $('#arrow_right');
        this.left.click(function() { Roll.move(-1)});
        this.right.click(function() {Roll.move(1)});
    }    
    
}


var Contacts = {
    
    init: function() {
       this.letter = $('#letter');
       this.letter.click(function(){ Contacts.show(); });
       $('#contacts .close, #overlay').click(function() { Contacts.close(); });
    },
    
    show: function() {
        $('#overlay').css('opacity', 0.49).show();
        $('#contacts').show();
        $('#roll_right_arrow, #roll_left_arrow').hide();        
    },
    
    close: function() {
        $('#contacts').hide();
        $('#overlay').css('opacity', 0.001).hide();
        $('#roll_right_arrow, #roll_left_arrow').toggle(Roll.loaded);  
         
        if ($.browser.opera) {
            
            $('body').css('width',+$('body').css('width').replace('px','') - 1 + 'px');
            $('body').css('width',+$('body').css('width').replace('px','') + 1 + 'px');
            //alert ((+$('body').css('width').replace('px','') + 1 + 'px') + ' --> ' + (+$('body').css('width').replace('px','') - 1 + 'px')); //*/
        }      
    }
}


$(function(){
    
    if ($.browser.msie || $.browser.opera) {
        $('#decor_left').css('background-image',"url(/img/shadows/left.png)");
        $('#decor_right').css('background-image',"url(/img/shadows/right.png)");
    }
    
    Roll.init();
    Arrows.init();
    Contacts.init();
    Drops.init();
    
    $drops = $('img', $('#content'));        
   
    /* Onclick */
    $drops.click(function(){ 
        
        $drops.makeAbsolute(true);    
        $('#content').remove();
        Wind.dropAll(this);
    });
    
    /* Roll arrows */
    $('#roll_right_arrow').click(function() { Roll.shift(1) });
    $('#roll_left_arrow').click(function() {Roll.shift(-1)});  
    
    /* Sea waving */
    setInterval( function(){ 
                   var position = 25,
                        wait_time = 10,
                        wait = false,
                        top_range = 30,
                        bottom_range = 25, 
                        direction = true; // true down. false up.
                    
                    var wave = setInterval( function(){ 
                            // wave's top
                            if (direction && position >= top_range) {
                                wait = true;
                                
                                if (wait_time) { wait_time--; }
                                else {
                                    direction = !direction;
                                    wait = false;
                                }
                            }
                            if (!wait) {
                                if (direction) position++;
                                else position--;
                                $('#roll_wrapper').css("background-position", "0 " + position +"px");
                            }
                            if (!direction && position == bottom_range )
                            {
                                clearInterval(wave);
                            }
                        }, 150);
     			}, 10000 );

});