window.addEvent('domready', function(){
    
    var container = $('lucky-dot');
    var dotLink = container.getElement('.dot-stricktly-speaking');
    var dotImage = dotLink.getFirst();
    var dotTextImage = dotLink.getLast();
    
    var dotsReady = true;
    
    var rightBrowser = (function() {
        if (Browser.Engine.gecko || Browser.Engine.webkit || Browser.Engine.presto)
            return true;
        return false;
    })();
    
    
    // основная движуха
    var block1 = $$('.num1')[0];
    var block2 = $$('.num2')[0];
    var block3 = $$('.num3')[0];
    var block4 = $$('.num4')[0];
    var block5 = $$('.num5')[0];
    var block6 = $$('.num6')[0];
    var block7 = $$('.num7')[0];
    
    var blocks = [block1, block2, block3, block4, block5, block6, block7];
    
    var sequence = [{
        img: block1.getElement('span.imgs').getFirst(),
        text: block1.getElement('span.texts').getFirst(),
        block: 0,
        link: '/portfolio/eds/'
    }, {
        img: block2.getElement('span.imgs').getFirst(),
        text: block2.getElement('span.texts').getFirst(),
        block: 1,
        link: '/portfolio/rmes/'
    }, {
        img: block3.getElement('span.imgs').getFirst(),
        text: block3.getElement('span.texts').getFirst(),
        block: 2,
        link: '/portfolio/shinashina/'
    }, {
        img: block4.getElement('span.imgs').getFirst(),
        text: block4.getElement('span.texts').getFirst(),
        block: 3,
        link: '/portfolio/uniservice/'
    }, {
        img: block5.getElement('span.imgs').getFirst(),
        text: block5.getElement('span.texts').getFirst(),
        block: 4,
        link: '/portfolio/ekoart/'
    }, {
        img: block6.getElement('span.imgs').getFirst(),
        text: block6.getElement('span.texts').getFirst(),
        block: 5,
        link: '/portfolio/advance-star/'
    }, {
        img: block7.getElement('span.imgs').getFirst(),
        text: block7.getElement('span.texts').getFirst(),
        block: 6,
        link: '/portfolio/artiler/'
    }, {
        img: block1.getElement('span.imgs').getLast(),
        text: block1.getElement('span.texts').getLast(),
        block: 0,
        hide: 0,
        link: '/portfolio/mskdata_fs/'
    }, {
        img: block2.getElement('span.imgs').getLast(),
        text: block2.getElement('span.texts').getLast(),
        block: 1,
        hide: 1,
        link: '/portfolio/redkasko/'
    }, {
        img: block3.getElement('span.imgs').getLast(),
        text: block3.getElement('span.texts').getLast(),
        block: 2,
        hide: 2,
        link: '/portfolio/sport-reforma/'
    }, {
        img: block4.getElement('span.imgs').getLast(),
        text: block4.getElement('span.texts').getLast(),
        block: 3,
        hide: 3,
        link: '/portfolio/fruktovoz/'
    }, {
        img: block5.getElement('span.imgs').getLast(),
        text: block5.getElement('span.texts').getLast(),
        block: 4,
        hide: 4,
        link: '/portfolio/mskdata/'
    }/*, {
        img: block7.getElement('span.imgs').getLast(),
        text: block7.getElement('span.texts').getLast(),
        block: 6,
        hide: 6,
        link: '/portfolio/forfind/'
    }*/];
    
    var count = sequence.length;
    var current = -1;
    
    var getDotCoords = function() {
        return {
            left: (container.getCoordinates().width * .5).toInt(),
            top: 197
        };
    };
    
    var getBlockCoords = function(num) {
        num = num.toInt();
        switch (num) {
            case 0:
                return {
                    left: (container.getCoordinates().width * .46).toInt(),
                    top: 279,
                    width: 253,
                    height: 112
                };
            case 1:
                return {
                    left: (container.getCoordinates().width * .85).toInt(),
                    top: 0,
                    width: 124,
                    height: 132
                };
            case 2:
                return {
                    left: (container.getCoordinates().width * .23).toInt(),
                    top: 49,
                    width: 178,
                    height: 278
                };
            case 3:
                return {
                    left: (container.getCoordinates().width * .78).toInt(),
                    top: 198,
                    width: 176,
                    height: 184
                };
            case 4:
                return {
                    left: 0,
                    top: 34,
                    width: 98,
                    height: 154
                };
            case 5:
                return {
                    left: (container.getCoordinates().width * .52).toInt(),
                    top: 28,
                    width: 79,
                    height: 260
                };
            case 6:
                return {
                    left: 0,
                    top: 236,
                    width: 143,
                    height: 163
                };
        };
    };
    
    var getOffsets = function(num) {
        var dotCoords = getDotCoords();
        var blockCoords = getBlockCoords(num);
        
        return {
            left : dotCoords.left - blockCoords.left - (blockCoords.width / 2),
            top  : dotCoords.top  - blockCoords.top - (blockCoords.height / 2)
        };
    };
    
    var fx = new Timeline({
        onStart: function() {
            fxing = true;
        },
        onComplete: function() {
            sequence[current].img.getParent('a').set('href', sequence[current].link);
            fxing = false;
        }
    });
    var blowFx = new Timeline({
        onStart: function() {
            fxing = true;
        },
        onComplete: function() {
            for (var i=0; i < sequence.length; i++) {
                sequence[i].img.set('style', '').setStyle('opacity', 0);;
                sequence[i].text.set('style', '').setStyle('opacity', 0);;
            };
            for (i = blocks.length; i--;) {
                blocks[i].set('style', '').addClass('hide');
            };
            fxing = false;
            makeFx();
        }
    })
    var fxing = false;
    
    var makeFx = function() {
        if (!dotTextImage.hasClass('hide')) {
            new Fx.Tween(dotTextImage, {
                duration: 200,
                property: 'opacity',
                onComplete: function() {
                    dotTextImage.addClass('hide');
                }
            }).start(0);
        };
        
        if (!dotsReady || fxing) return;
        
        current++;
        
        if (current == count) {
            // очистка
            var bc1 = block1.getCoordinates(container);
            var bc2 = block2.getCoordinates(container);
            var bc3 = block3.getCoordinates(container);
            var bc4 = block4.getCoordinates(container);
            var bc5 = block5.getCoordinates(container);
            var bc6 = block6.getCoordinates(container);
            var bc7 = block7.getCoordinates(container);
            var dotCoords = getDotCoords();
            
            var blowDuration = 400;
            
            blowFx.setTimeline({
                element: block1,
                tick: tickFunctions.css,
                times: {
                    0: {
                        opacity: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        },
                        top: {
                            values: [bc1.top, dotCoords.top],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        left: {
                            values: [bc1.left, dotCoords.left],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        scale: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        }
                    }
                }
            }, {
                element: block2,
                tick: tickFunctions.css,
                times: {
                    0: {
                        opacity: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        },
                        top: {
                            values: [bc2.top, dotCoords.top],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        left: {
                            values: [bc2.left, dotCoords.left],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        scale: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        }
                    }
                }
            }, {
                element: block3,
                tick: tickFunctions.css,
                times: {
                    0: {
                        opacity: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        },
                        top: {
                            values: [bc3.top, dotCoords.top],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        scale: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        }
                    }
                }
            }, {
                element: block4,
                tick: tickFunctions.css,
                times: {
                    0: {
                        opacity: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        },
                        left: {
                            values: [bc4.left, dotCoords.left],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        scale: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        }
                    }
                }
            }, {
                element: block5,
                tick: tickFunctions.css,
                times: {
                    0: {
                        opacity: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        },
                        top: {
                            values: [bc5.top, dotCoords.top],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        left: {
                            values: [bc5.left, dotCoords.left],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        scale: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        }
                    }
                }
            }, {
                element: block6,
                tick: tickFunctions.css,
                times: {
                    0: {
                        opacity: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        },
                        top: {
                            values: [bc6.top, dotCoords.top],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        left: {
                            values: [bc6.left, dotCoords.left],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        scale: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        }
                    }
                }
            }, {
                element: block7,
                tick: tickFunctions.css,
                times: {
                    0: {
                        opacity: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        },
                        top: {
                            values: [bc7.top, dotCoords.top],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        left: {
                            values: [bc7.left, dotCoords.left],
                            transition: Transitions.back,
    						duration: blowDuration
                        },
                        scale: {
                            values: [1, 0],
                            transition: Transitions.linear,
    						duration: blowDuration
                        }
                    }
                }
            });
            blowFx.start();
            current = -1;
        } else {
            // не очистка
            sequence[current].img.setStyle('opacity', 0).show();
            sequence[current].text.setStyle('opacity', 0).show();
            
            if (rightBrowser) {
                var offsets = getOffsets(sequence[current].block);
                blocks[sequence[current].block].removeClass('hide');
                if (typeof sequence[current]['hide'] == 'undefined') {
                    fx.setTimeline({
            			element: dotImage,
            			tick: tickFunctions.css,
            			times: {
            				0: {
            					scale: {
            						values: [1.0, 0.8],
            						transition: Transitions.linear,
            						duration: 200
            					}
            				},
            				200: {
            					scale: {
            						values: [0.8, 1.1],
            						transition: Transitions.linear,
            						duration: 100
            					}
            				},
            				300: {
            					scale: {
            						values: [1.1, 1.0],
            						transition: Transitions.linear,
            						duration: 100
            					}
            				}
            			}
            		}, {
                        element: sequence[current].img,
                        tick: tickFunctions.css,
                        times: {
                            250: {
                                opacity: {
            						values: [0, 1],
            						transition: Transitions.linear,
            						duration: 300
            					},
            					left: {
            					    values: [offsets.left, 0],
            					    transition: Transitions.linear,
            					    duration: 300
            					},
            					top: {
            					    values: [offsets.top, 0],
            					    transition: Transitions.linear,
            					    duration: 300
            					},
            					scale: {
            					    values: [0, 1],
            					    transition: Transitions.linear,
            					    duration: 300
            					},
            					rotate: {
            						values: [90, 360],
            						transition: Transitions.linear,
            						duration: 300
            					}
                            }
                        }
                    }, {
                        element: sequence[current].text,
                        tick: tickFunctions.css,
                        times: {
                            550: {
                                opacity: {
            						values: [0, 1],
            						transition: Transitions.linear,
            						duration: 200
            					}
                            }
                        }
                    });
                } else {
                    fx.setTimeline({
            			element: dotImage,
            			tick: tickFunctions.css,
            			times: {
            				200: {
            					scale: {
            						values: [1.0, 0.8],
            						transition: Transitions.linear,
            						duration: 200
            					}
            				},
            				400: {
            					scale: {
            						values: [0.8, 1.1],
            						transition: Transitions.linear,
            						duration: 100
            					}
            				},
            				500: {
            					scale: {
            						values: [1.1, 1.0],
            						transition: Transitions.linear,
            						duration: 100
            					}
            				}
            			}
            		}, {
                        element: sequence[sequence[current].hide].img,
                        tick: tickFunctions.css,
                        times: {
                            0: {
                                opacity: {
            						values: [1, 0],
            						transition: Transitions.linear,
            						duration: 200
            					}
                            }
                        }
                    }, {
                        element: sequence[sequence[current].hide].text,
                        tick: tickFunctions.css,
                        times: {
                            0: {
                                opacity: {
            						values: [1, 0],
            						transition: Transitions.linear,
            						duration: 200
            					}
                            }
                        }
                    }, {
                        element: sequence[current].img,
                        tick: tickFunctions.css,
                        times: {
                            400: {
                                opacity: {
            						values: [0, 1],
            						transition: Transitions.linear,
            						duration: 300
            					},
            					left: {
            					    values: [offsets.left, 0],
            					    transition: Transitions.linear,
            					    duration: 300
            					},
            					top: {
            					    values: [offsets.top, 0],
            					    transition: Transitions.linear,
            					    duration: 300
            					},
            					scale: {
            					    values: [0, 1],
            					    transition: Transitions.linear,
            					    duration: 300
            					},
            					rotate: {
            						values: [90, 360],
            						transition: Transitions.linear,
            						duration: 300
            					}
                            }
                        }
                    }, {
                        element: sequence[current].text,
                        tick: tickFunctions.css,
                        times: {
                            700: {
                                opacity: {
            						values: [0, 1],
            						transition: Transitions.linear,
            						duration: 200
            					}
                            }
                        }
                    });
                };
            } else {
                if (typeof sequence[current]['hide'] == 'undefined') {
                    // не нужно скрывать старый
                    blocks[sequence[current].block].removeClass('hide');
                    fx.setTimeline({
                        element: sequence[current].img,
                        tick: tickFunctions.css,
                        times: {
                            0: {
                                opacity: {
            						values: [0, 1],
            						transition: Transitions.linear,
            						duration: 200
            					}
                            }
                        }
                    }, {
                        element: sequence[current].text,
                        tick: tickFunctions.css,
                        times: {
                            0: {
                                opacity: {
            						values: [0, 1],
            						transition: Transitions.linear,
            						duration: 200
            					}
                            }
                        }
                    });
                } else {
                    // нужно скрыть, чтобы освободить место
                    fx.setTimeline({
                        element: sequence[sequence[current].hide].img,
                        tick: tickFunctions.css,
                        times: {
                            0: {
                                opacity: {
            						values: [1, 0],
            						transition: Transitions.linear,
            						duration: 200
            					}
                            }
                        }
                    }, {
                        element: sequence[sequence[current].hide].text,
                        tick: tickFunctions.css,
                        times: {
                            0: {
                                opacity: {
            						values: [1, 0],
            						transition: Transitions.linear,
            						duration: 200
            					}
                            }
                        }
                    }, {
                        element: sequence[current].img,
                        tick: tickFunctions.css,
                        times: {
                            200: {
                                opacity: {
            						values: [0, 1],
            						transition: Transitions.linear,
            						duration: 200
            					}
                            }
                        }
                    }, {
                        element: sequence[current].text,
                        tick: tickFunctions.css,
                        times: {
                            200: {
                                opacity: {
            						values: [0, 1],
            						transition: Transitions.linear,
            						duration: 200
            					}
                            }
                        }
                    });
                };
            };
            
            fx.start();
        };
    };
    
    dotLink.addEvent('click', function(e){
        var event = new Event(e);
        event.stop();
        
        makeFx();
    });
    
    
    // показываем точку и надпись
    /*(function() {
        dotImage.setStyles({
            opacity: 0,
            top: -40
        }).show();
        dotTextImage.setStyle('opacity', 0).show();
        
        var dotRevealFx = new Fx.Morph(dotImage, {
            duration: 200,
            onComplete: function() {
                dotTextRevealFx.start();
            }
        });
        
        var dotTextRevealFx = new Timeline({
            onComplete: function() {
                dotImage.set('style', '');
                dotTextImage.set('style', '');
                dotsReady = true;
            }
        });
        dotTextRevealFx.setTimeline({
            element: dotTextImage,
            tick: tickFunctions.css,
            times: {
                0: {
                    opacity: {
                        values: [0, .1],
                        transition: Transitions.linear,
                        duration: 50
                    }
                },
                50: {
                    opacity: {
                        values: [.1, 0],
                        transition: Transitions.linear,
                        duration: 50
                    }
                },
                100: {
                    opacity: {
                        values: [0, .1],
                        transition: Transitions.linear,
                        duration: 50
                    }
                },
                150: {
                    opacity: {
                        values: [.1, 0],
                        transition: Transitions.linear,
                        duration: 50
                    }
                },
                200: {
                    opacity: {
                        values: [0, 1],
                        transition: Transitions.linear,
                        duration: 200
                    }
                }
            }
        });
        
        (function() {
            dotRevealFx.start({
                opacity: 1,
                top: [-40, 0]
            });
        }).delay(2000);
    })();*/
    
});