﻿
var Ticker = new Class({
    id: null,
    stories: null,
    current: 0,
    Stage: 0,
    initialize: function(id) {
        var t = this;
        t.id = $(id);
        t.stories = t.id.getElements('span');
        t.stories.setStyle('top', '20px');
        t.stories.set('tween', { onComplete: t.NextStep.bind(t) });
        t.MoveUp.delay(1000, t);
    },
    MoveUp: function() {
        var t = this;
        t.stories[t.current].tween('top', '0');
        t.Stage = 1;
        t.FadeOut.delay(5000, t);

    },
    FadeOut: function() {
        var t = this;
        t.Stage = 2;
        t.stories[t.current].fade(0);

    },
    NextStep: function() {
        var t = this;
        if (t.Stage == 2) {
            t.stories[t.current].setStyles( { 'top': '20px', 'opacity':'1'});
            t.current++;
            if (t.current >= t.stories.length)
                t.current = 0;
            t.MoveUp.delay(500, t);
            t.Stage = 0;
        }
    }
});

var Dropdown = new Class({
    initialize: function() {
        this.Dropdowns = $$('.dropdown a');
        var y = this.OpenMenu.bind(this);
        var x = this.StartClose.bind(this);
        this.Dropdowns.each(function(e) {
            e.addEvent('mouseover', y.pass(e));
            e.addEvent('mouseout', x.pass(e));
        });
        var z = this.HoldOpen.bind(this);
        $$('.dropdown div').each(function(e) {
            e.addEvent('mouseover', z.pass(e));
            e.addEvent('mouseout', x.pass(e));
        });
    },
    HoldOpen: function(e) {
        $clear(this.timeout);
    },
    OpenMenu: function(e) {
        $clear(this.timeout);

        var parent = e.getParent().getParent();

        parent.getElements('a').each(function(k) {

            if (k.hasClass('open') && k != e) {
                k.removeClass('open');
                k.getParent().getElements('div.menu').each(function(i) {
                    i.setStyle('display', 'none');
                });
            }
        });

        if (!e.hasClass('open')) {
            e.addClass('open');

            if (e.getParent().getChildren().length > 1) {

                var div = e.getParent().getElements('div.menu')[0];

                var width = 0;
                if (div != null) {
                    div.setStyles({ 'display': 'block' });
                    var d2 = div.getElement('div');
                    d2.getElements('li').each(function(i) {
                        if (i.getParent().getParent() == d2)
                            width += i.getSize().x;
                    });

                    div.setStyle('width', width + 'px');
                    d2.setStyle('width', width + 'px');

                    div.setOpacity(0);

                    div.fade(1);

                    var left = e.getPosition().x;
                    var top = e.getPosition().y + e.getSize().y;

                    div.setStyle('top', top + 'px');
                    div.setStyle('left', left + 'px');
                }
            }
        }
    },
    StartClose: function(e) {
        $clear(this.timeout);
        this.timeout = this.CloseMenu.delay(500);
    },
    CloseMenu: function() {
        $clear(this.timeout);

        $$('.dropdown div.menu').each(function(i) {
            i.fade(0);
            i.getParent().getElements('a').removeClass('open');
        });

    }
});

var Gallery = new Class({
    ShowNav: false,
    initialize: function(targ) {
        this.targ = targ;
        this.Images = targ.getElements('img');
        this.Images.setOpacity(0);
        this.Images.removeClass('hidden');
        this.CurrentImage = 0;
        this.Images.set('tween', { duration: 3000 });

    },
    Start: function() {
        if (this.ShowNav) {
            this.SetupNavigation();
        }
        this.Images[0].fade(1);
        if (this.Images.length > 1)
            this.Rotate = this.NextImage.periodical(6000, this);
    },
    SetupNavigation: function() {
        var div = new Element('div', { 'class': 'gal_nav' });
        div.inject(this.targ, 'bottom');

        var pn = new Element('div', { 'class': 'gal_pages' });
        pn.inject(div);

        var s = new Element('span');
        s.inject(pn);
        s.set('html', '1');
        this.CurrentPageCaption = s;

        s = new Element('span');
        s.inject(pn);
        s.set('html', ' of ' + this.Images.length);

        var pNav = new Element('div', { 'class': 'gal_pnav' });
        pNav.inject(div);

        var a = new Element('a', { 'href': '#' });
        a.set('html', '&lt; Previous');
        a.inject(pNav);
        a.addEvent('click', this.PrevImageClick.bind(this));

        a = new Element('a', { 'href': '#' });
        a.set('html', 'Next &gt;');
        a.inject(pNav);
        a.addEvent('click', this.NextImageClick.bind(this));



        var clear = new Element('div', { 'class': 'clear' });
        clear.inject(div);
    },
    PrevImageClick: function(e) {
        e.stop; $clear(this.Rotate); this.PrevImage();
    },
    NextImageClick: function(e) {
        e.stop(); $clear(this.Rotate); this.NextImage();
    },
    NextImage: function() {
        this.Images[this.CurrentImage].fade(0);
        this.CurrentImage++;
        if (this.CurrentImage >= this.Images.length)
            this.CurrentImage = 0;

        this.Images[this.CurrentImage].fade(1);
        if (this.CurrentPageCaption != null)
            this.CurrentPageCaption.set('html', this.CurrentImage + 1);
    },
    PrevImage: function() {
        this.Images[this.CurrentImage].fade(0);
        this.CurrentImage--;
        if (this.CurrentImage < 0)
            this.CurrentImage = this.Images.length-1;

        this.Images[this.CurrentImage].fade(1);
        if (this.CurrentPageCaption != null)
            this.CurrentPageCaption.set('html', this.CurrentImage + 1);
    }
});