﻿window.addEvent('domready', function () {

    if ($('sliderContainer')) {


        var ImgBoxBilder = $$('.imageBox').get('html');
        var way, position;

        var createImgBox1 = new Element('div', {
            'class': 'imageBox',
            'html': ImgBoxBilder,
            'events': {
                'click': function () {
                    // nothing yet
                }
            }
        });

        var createImgBox2 = new Element('div', {
            'class': 'imageBox',
            'html': ImgBoxBilder
        });

        var action = 0;
        var slideShowTime = 4500; // 0 = Avstängd
        var animationTime = 1300;
        var slideShowPeriodical;
        var ForceSlideShowPeriodical;


        var slideShow = function () {
            if (slideShowTime !== 0) {
                slideWay('next');

            }
        };
        var ForceSlideShow = function () {
            if (slideShowTime != 0) {
                slideWay(way);

            }
        };


        var popupUpdate = function (id, element) {

            var myPopupRequest = new Request({
                method: 'get',
                url: 'http://www.almequity.plakat.se/ps_custom/aps.aspx',
                onSuccess: function (status) {
                    element.set('html', status);
                    Cufon.replace(element, { fontFamily: "AkzidenzGroteskBE" });
                }
            }).send('projectid=' + id);

        }

        var setup = function () {
            $('sliderContainer').adopt(createImgBox1);
            $('sliderContainer').adopt(createImgBox2);

            slideShowPeriodical = slideShow.periodical(slideShowTime);

            //(function () { slideShow(); }).delay(3500);

            var popups = $$('.redPopup');
            popups.each(function (element) {
                //alert(element.get('html').substring(0,11));
                if (element.get('html').substring(0, 11) == 'updatePopup') {

                    var id = element.get('html').substring(12, 13)
                    popupUpdate(id, element);

                }
            });

            Cufon.replace('h1', { fontFamily: "AkzidenzGroteskBE" });
            Cufon.replace('.info', { fontFamily: "AkzidenzGroteskBE" });
            Cufon.replace('.redPopup', { fontFamily: "AkzidenzGroteskBE" });

        }

        setup();








        var move = new Fx.Tween('sliderContainer', {
            duration: animationTime,
            transition: Fx.Transitions.Sine.easeOut,
            fps: 100,
            onStart: function () {
                action = 1;
            },
            onComplete: function () {
                if (position <= '-3464') {
                    $('sliderContainer').setStyle('left', '-2100px'); position = "-2100px"; action = 0;
                }
                else if (position >= '-189') {
                    $('sliderContainer').setStyle('left', '-2100px'); position = "-2100px"; action = 0;
                }
                else { action = 0; }
            }
        });


        var slideWay = function (way) {

            position = $('sliderContainer').getStyle('left').toInt();
            if (action === 0) {
                if (way == "next") {

                    position = (position - 273);
                    move.start('left', position + 'px');
                }
                else if (way == "back") {
                    position = (position + 273);
                    move.start('left', position + 'px');
                }
                else { alert('error') };
            }
        }

        $('sliderContainer').addEvents({
            'mouseover': function () {
                slideShowPeriodical = $clear(slideShowPeriodical);
            },
            'mouseout': function () {
                slideShowPeriodical = slideShow.periodical(slideShowTime);
            }
        });


        var showRed = function (target) {

        }

        $$('.img').addEvents({
            'click': function () {
                //var url = this.get('url');
                //window.location=url;
            },
            'mouseenter': function () {

                //var parent = this.getParent('.img');
                var parent = this;
                var target = parent.getElement('.redPopup');

                // alert(target.get('html'));

                var show = new Fx.Morph(target, {
                    duration: 200
                    //transition: 'quint:out'
                    //onComplete: function () {
                    //}
                }).start({
                    'bottom': 75,
                    'opacity': 1
                });



            },
            'mouseleave': function () {

                //var parent = this.getParent('.img');
                var parent = this;
                var target = parent.getElement('.redPopup');

                // alert(target.get('html'));

                var show = new Fx.Morph(target, {
                    duration: 200
                    //transition: 'quint:out'
                    //onComplete: function () {
                    //}
                });

                show.start({
                    'bottom': 25,
                    'opacity': 0
                });
            }
        });


        $$('.button').addEvents({
            'click': function () {
                //var way = this.get('id');
                //slideWay(way)
            },
            'mouseenter': function () {
                way = this.get('id');
                slideWay(way);
                slideShowPeriodical = $clear(slideShowPeriodical);

                ForceSlideShowPeriodical = ForceSlideShow.periodical(animationTime + 500);


            },
            'mouseleave': function () {
                slideShowPeriodical = slideShow.periodical(slideShowTime);
                ForceSlideShowPeriodical = $clear(ForceSlideShowPeriodical);
            }
        });

        document.addEvent('keydown', function (event) {
            if (event.key == 'right') { slideWay('next'); }
            if (event.key == 'left') { slideWay('back'); }
        });

    }

});
