document.write('<link rel="stylesheet" href="/javascript/homeslideshow/homeslideshow.css" type="text/css"></link>');

var homeSlideShow = function() {

    return {
        init: function(data, delay, height, width) {

            var wrapper = _get('homeSlideShow');
            if (!wrapper) {
                alert('Developer Error: Please define a div with an id of "homeSlideShow" on the page.');
                return;
            }

            this.container = wrapper.appendChild(document.createElement('div'));

            //TODO: need some kind of pausing mechanism to allow the user to look longer, but below is buggy
            //if(data.length>1){
            //    _amli_add_event(this.container,'mouseover',this.pause);
            //    _amli_add_event(this.container,'mouseout',this.unPause);
            //}

            this.imageTransitions = !(AMLI.Browser.Version() < 7); //Detect IE versions below 7 for compatibility issues.
            this.data = data;
            this.delay = delay;
            this.height = height;
            this.width = width;
            this.elements = new Array();

            for (i = 0; i < data.length; i++) {

                this.elements[i] = document.createElement('div');
                this.elements[i].className = "slideElement";
                this.elements[i].style.backgroundImage = "url('" + data[i][0] + "')";
                this.elements[i].style.visibility = 'hidden';

                if (this.imageTransitions) {
                    this.elements[i].transition = new AMLI.Effects.Transition(
                            { element: this.elements[i], type: 'opacity', duration: 500, tween: Math.linearTween }
                        );
                }
                this.container.appendChild(this.elements[i]);
            }

            imgPreloader = new Image();
            imgPreloader.onload = function() { homeSlideShow.showNextSlide(); };
            imgPreloader.src = this.data[0][0];
        }
        , showNextSlide: function() {

            var isFirstTime = false;

            if (this.iterCurrent == undefined) {
                this.iterCurrent = 0;
                this.iterPrevious = this.data.length - 1;
                isFirstTime = true;
            } else {
                this.iterPrevious = this.iterCurrent;
                this.iterCurrent++;
                if (this.iterCurrent >= this.data.length) {
                    this.iterCurrent = 0;
                }
            }

            this.elementCurrent = this.elements[this.iterCurrent];
            this.elementPrevious = this.elements[this.iterPrevious];

            if (this.imageTransitions) {
                if (!isFirstTime) {
                    this.elementPrevious.transition.run(1, 0, this.iterCurrent == 0 ? 0 : this.delay);
                }

                this.elementCurrent.transition.run(0, 1, 0);
            } else {
                this.elementPrevious.style.visibility = 'hidden';
                this.elementCurrent.style.visibility = 'visible';
            }
            //sliding animation testing, but not really needed here
            //if(!isFirst) 
            //    this.elementPrevious.animation.run([1,0,0],[0,-1*this.height,0]);
            //this.elementCurrent.animation.run([0,1,0],[this.height,0,0]);

            this.showInfo();

            if (this.data.length > 1) {
                this.timeout = setTimeout("homeSlideShow.showNextSlide()", this.delay);
            }
        }
        , showInfo: function() {

            var infoElement = this.infoElementCurrent;

            //fade and remove the current description slideInfo if there is one
            if (infoElement) {
                infoElement.animation.run([0.9, 0], [infoElement.normalHeight, 0]);
            }

            //get the slideInfo, but create it only once per slide - we reuse it on each round
            var infoElement = this.data[this.iterCurrent].infoElement;

            if (!infoElement) {

                //create it
                infoElement = document.createElement('div');
                infoElement.style.visibility = 'hidden';
                infoElement.style.display = 'block';

                //description
                var slideInfoZoneDescription = document.createElement('div');
                slideInfoZoneDescription.className = 'slideInfoZoneDescription';
                slideInfoZoneDescription.innerHTML = '<a href="' + this.data[this.iterCurrent][1] + '">'
                                                + this.data[this.iterCurrent][3]
                                                + '</a>';
                infoElement.appendChild(slideInfoZoneDescription);

                //description shadow
                var slideInfoZoneDescriptionShadow = document.createElement('div');
                slideInfoZoneDescriptionShadow.className = 'slideInfoZoneDescriptionShadow';
                slideInfoZoneDescriptionShadow.innerHTML = this.data[this.iterCurrent][3];
                infoElement.appendChild(slideInfoZoneDescriptionShadow);

                //append, set css class, and determine "normalHeight"
                this.container.appendChild(infoElement);
                infoElement.className = 'slideInfoZone';
                infoElement.normalHeight = parseInt(_get_style_value(infoElement, 'height'));

                //determine right align placement after appending and adding css class and other styles
                slideInfoZoneDescription.style.left = (this.width - 30 - slideInfoZoneDescription.offsetWidth) + 'px';
                slideInfoZoneDescriptionShadow.style.left = (this.width - 28 - slideInfoZoneDescription.offsetWidth) + 'px';

                infoElement.animation = new AMLI.Effects.Animation([
                        { element: infoElement, type: 'opacity', duration: 500 }
                        , { element: infoElement, type: 'height', duration: 500 }
                    ]);

                this.data[this.iterCurrent].infoElement = infoElement;

            }

            infoElement.animation.run([0, 0.9], [0, infoElement.normalHeight]);

            //set this member var to keep track of which description element is currently showing
            this.infoElementCurrent = infoElement;
        }
        , pause: function() {
            clearTimeout(homeSlideShow.timeout);
        }
        , unPause: function() {
            homeSlideShow.timeout = setTimeout("homeSlideShow.showNextSlide()", 500);
        }
    }
} ();