////////////////////////
/// element.InnerXML ///
////////////////////////
Element.implement({
    innerXML: function(options) {
        var str = new String();
        if (this.childNodes.length) {
            str += '<' + this.tagName.toLowerCase() + this.attributs(options) + '>';
            // If the tag is a child node, we get it's content as XML, otherwise we get the text content
            for (var t = 0; t < this.childNodes.length; t++) {
                if (this.childNodes[t].tagName && this.childNodes[t].tagName != "!") {
                    var myElement = $(this.childNodes[t]);
                    if (myElement) {
                        str += myElement.innerXML(options);
                    }
                }
                else {
                    str += this.childNodes[t].nodeValue;
                }
            }
            // We close the element
            str += '</' + this.tagName.toLowerCase() + '>';
        }
        else {
            str += '<' + this.tagName.toLowerCase() + this.attributs(options) + ' />';
        }
        return str;
    },
    attributs: function(options) {
        var str = new String();
        if (options) {
            for (i = 0; i < options.attributes.length; i++) {
                str += ' ' + options.attributes[i] + '="' + this.getProperty(options.attributes[i]) + '"';
            }
        }
        else {
            for (var t = 0; t < this.attributes.length; t++) {
                // Specific IE test to remove empty attributes (like most of events and attributes specific to IE)
                if (
				this.attributes[t].nodeValue
				&& this.attributes[t].nodeValue != 'inherit'
				&& this.attributes[t].nodeName != 'match'
				&& this.attributes[t].nodeName != 'uid'
				&& this.attributes[t].nodeName.indexOf('$') == -1
				&& !this.attributes[t].nodeValue.prototype
				&& (typeof this.attributes[t].nodeValue == "string" && this.attributes[t].nodeValue.indexOf('function') == -1)
				) {
                    str += ' ' + this.attributes[t].nodeName.toLowerCase() + '="' + this.attributes[t].nodeValue + '"';
                }
            }
        }
        return str;
    }

});

////////////////////////
/// Generic Carousel ///
////////////////////////
var jsIocRiaGenericCarousel = new Class({
    Implements: Events,
    Extends: MooScroller,
    morphFx1: null,
    morphFx2: null,
    morphFx3: null,
    initialize: function(content, knob, options) {
        this.setOptions(options);
        this.horz = (this.options.mode == "horizontal");

        this.content = $(content).setStyle('overflow', 'hidden');
        this.ulContent = this.content.getFirst();
        this.liItems = this.ulContent.getChildren('li');

        this.knob = $(knob);
        this.track = this.knob.getParent();
        this.setPositions();

        if (this.horz && this.options.width) {
            this.wrapper = new Element('div');
            this.content.getChildren().each(function(child) {
                this.wrapper.adopt(child);
            });
            this.wrapper.injectInside(this.content).setStyle('width', this.options.width);
        }


        this.bound = {
            'start': this.start.bind(this),
            'end': this.end.bind(this),
            'drag': this.drag.bind(this),
            'wheel': this.wheel.bind(this),
            'page': this.page.bind(this)
        };

        this.position = {};
        this.mouse = {};
        this.update();
        this.attach();

        var clearScroll = function() {
            $clear(this.scrolling);
        } .bind(this);

        ['forward', 'back'].each(function(direction) {
            var lnk = $(this.options.scrollLinks[direction]);
            if (lnk) {
                lnk.addEvents({
                    mouseover: function() {
                        lnk.getElement('img').setProperty('src', '/Resources/Images/RIA/GenericCarousel/generic-carousel-' + direction + '-arrow-roll.gif');
                    } .bind(this),
                    mouseout: function() {
                        lnk.getElement('img').setProperty('src', '/Resources/Images/RIA/GenericCarousel/generic-carousel-' + direction + '-arrow.gif');
                    } .bind(this),
                    click: this[direction].bind(this, this.options.scrollSteps)
                });
            }
        }, this);
        this.knob.addEvent('click', clearScroll.bind(this));
        window.addEvent('load', function() {
            try {
                $(document.body).addEvent('mouseup', clearScroll.bind(this));
            } catch (e) { }
        } .bind(this));

        window.fireEvent('jsIocRiaGenericCarouselInitialized', this);
    },
    makeThumbBack: function() {
        if (this.morphFx1) this.morphFx1.cancel();
        if (this.morphFx2) this.morphFx2.cancel();
        if (this.morphFx3) this.morphFx3.cancel();

        var len = this.liItems.length;
        for (index = 0; index < len; index++) {
            var item = this.liItems[index];
            var display = item.style.display;
            item.removeProperty('style');
            item.style.display = display;

            var img = item.getElement('img');
            if ($chk(img)) {
                img.erase('style');
                img.setStyles({
                    'width': '86px',
                    'height': this.options.imageThumbnailHeight
                });
            }

            var link = item.getElement('a');
            if ($chk(link)) {
                link.erase('style');
                link.setStyles({
                    'width': '86px',
                    'height': this.options.imageThumbnailHeight
                });
            }
        }

        this.ulContent.setStyle('margin-left', '219px');
    },
    makeThumbUp: function() {
        ['forward', 'back'].each(function(direction) {
            var lnk = $(this.options.scrollLinks[direction]);
            if (lnk) {
                lnk.removeEvents('click');
            }
        } .bind(this));

        var visibleCounter = 0;

        var len = this.liItems.length;
        for (index = 0; index < len; index++) {
            var item = this.liItems[index];
            var display = item.style.display;
            item.removeProperty('style');
            item.style.display = display;

            if (display != 'none') {
                itemX = (visibleCounter * 92) - this.content['scrollLeft'] + 219;
                if (itemX < 290 && (itemX + 92) > 290) {
                    this.content['scrollLeft'] += itemX - 247;
                    item.setStyles({
                        'z-index': '1'
                    });

                    var link = item.getElement('a');
                    if ($chk(link)) {
                        this.morphFx1 = new Fx.Morph(link, {
                            duration: 700,
                            transition: Fx.Transitions.Sine.easeInOut
                        });
                        this.morphFx1.start({
                            'width': '140px',
                            'height': this.options.imageHeight,
                            'padding': '0 2px 0 2px',
                            'margin-top': '-27px'
                        });
                    }

                    var img = item.getElement('img');
                    if ($chk(img)) {
                        this.morphFx2 = new Fx.Morph(img, {
                            duration: 700,
                            transition: Fx.Transitions.Sine.easeInOut,
                            onComplete: function() {
                                ['forward', 'back'].each(function(direction) {
                                    var lnk = $(this.options.scrollLinks[direction]);
                                    if (lnk) {
                                        lnk.addEvent('click', this[direction].bind(this, this.options.scrollSteps));
                                    }
                                } .bind(this));
                            } .bind(this)
                        });
                        this.morphFx2.start({
                            'width': '140px',
                            'height': this.options.imageHeight
                        });
                    }

                    if ($(item.getPrevious())) {
                        this.morphFx3 = new Fx.Morph(this.ulContent, {
                            duration: 700,
                            transition: Fx.Transitions.Sine.easeInOut
                        });
                        this.morphFx3.start({
                            'margin-left': (this.ulContent.getStyle('margin-left').toInt() - 33) + 'px'
                        });
                    }
                }

                visibleCounter++;
            }
        }

        this.initializeMouseEvents();
    },
    makeThumbBackAndUp: function() {
        this.makeThumbBack();
        this.makeThumbUp();
    },
    start: function(event) {
        event = new Event(event);
        var axis = this.horz ? 'x' : 'y';
        this.mouse.start = event.page[axis];
        this.position.start = this.knob.getStyle(this.horz ? 'left' : 'top').toInt();
        document.addEvent('mousemove', this.bound.drag);
        document.addEvent('mouseup', this.bound.end);
        this.knob.addEvent('mouseup', this.bound.end);
        this.makeThumbBack();
        this.content.getElements('li').each(function(item, index) {
            item.removeEvents();
        });
        event.stop();
    },
    end: function(event) {
        event = new Event(event);
        document.removeEvent('mousemove', this.bound.drag);
        document.removeEvent('mouseup', this.bound.end);
        this.knob.removeEvent('mouseup', this.bound.end);
        this.makeThumbUp();
        event.stop();
    },
    initializeMouseEvents: function() {
        var len = this.liItems.length;
        var imageHeight = this.options.imageHeight;
        for (index = 0; index < len; index++) {
            var item = this.liItems[index];
            item.removeEvents();
            itemX = (index * 92) - this.content['scrollLeft'] + 219;
            if (!(itemX < 290 && (itemX + 92) > 290)) {
                var link = item.getElement('img');
                if ($chk(link)) {
                    link.addEvent('mouseover', function() {
                        if (this.getStyle('height') != imageHeight) {
                            this.setStyle('margin-top', '-5px');
                        }
                    });
                }
            }
            var link = item.getElement('img');
            if ($chk(link)) {
                link.addEvent('mouseout', function() {
                    if (this.getStyle('height') != imageHeight) {
                        this.setStyle('margin-top', '0');
                    }
                });
            }
        }
    },
    forward: function(steps) {
        this.makeThumbBack();
        steps = steps || this.options.scrollSteps;
        this.scroll(steps);
        this.makeThumbUp();
    },
    back: function(steps) {
        this.makeThumbBack();
        steps = steps || this.options.scrollSteps;
        this.scroll(-steps);
        this.makeThumbUp();
    }
});

function InitCarousel(carouselId, showArrows, leftText, rightText, imageHeight, imageThumbnailHeight, startPos) {
    if (!carouselId) { return; }
    var item = $(carouselId);
    if (!item) { return; }
    item.className = "iocRiaGenericCarousel horzscroller";
    var scrollarea = new Element('div', { 'class': 'scrollarea' });

    if ($chk(leftText)) {
        var leftTextElement = new Element('div', { 'class': 'scrollLeftText' });
        leftTextElement.innerHTML = leftText;
        leftTextElement.inject(scrollarea);
    }

    if ($chk(showArrows)) {
        var scrollBackElement = new Element('div', { 'class': 'scrollBack' });
        scrollBackElement.innerHTML = '<img src="/Resources/Images/RIA/GenericCarousel/generic-carousel-back-arrow.gif" alt="">';
        scrollBackElement.inject(scrollarea);
    }

    var scrollBarContainerElement = new Element('div', { 'class': 'scrollBarContainer' });
    scrollBarContainerElement.inject(scrollarea);
    var scrollBarBackgroundElement = new Element('div', { 'class': 'scrollBarBackground' });
    scrollBarBackgroundElement.inject(scrollBarContainerElement);
    var scrollKnobElement = new Element('div', { 'class': 'scrollKnob' });
    scrollKnobElement.innerHTML = '<img src="/Resources/Images/RIA/GenericCarousel//generic-carousel-knobcenter.gif"/>';
    scrollKnobElement.inject(scrollBarBackgroundElement);

    if ($chk(showArrows)) {
        var scrollForwardElement = new Element('div', { 'class': 'scrollForward' });
        scrollForwardElement.innerHTML = '<img src="/Resources/Images/RIA/GenericCarousel/generic-carousel-forward-arrow.gif" alt="">';
        scrollForwardElement.inject(scrollarea);
    }

    if ($chk(rightText)) {
        var rightTextElement = new Element('div', { 'class': 'scrollRightText' });
        rightTextElement.innerHTML = rightText;
        rightTextElement.inject(scrollarea);
    }

    item.appendChild(scrollarea);
    var content_width = item.getElements('div.iocRiaContent ul li').length * 92 + 275;
    item.getElements('ul').setStyle('margin-left', "219px");

    item.getElements('div.iocRiaContent ul')[0].setStyle('width', content_width + "px");

    var myCarousel = new jsIocRiaGenericCarousel(item.getElements('div.iocRiaContent')[0], item.getElements('div.scrollKnob')[0], {
        mode: 'horizontal',
        wheel: false,
        scrollSteps: 50,
        scrollLinks: {
            forward: item.getElements('div.scrollForward')[0],
            back: item.getElements('div.scrollBack')[0]
        },
        imageHeight: imageHeight,
        imageThumbnailHeight: imageThumbnailHeight,
        onPage: function() {
            this.makeThumbBackAndUp();
        }
    });


    myCarousel.position.now = myCarousel.trackSize - (myCarousel.knobSize + 2);

    if (!$chk(startPos) || startPos == 'right') {
        myCarousel.content['scrollLeft'] = myCarousel.position.now * myCarousel.scrollRatio;
        myCarousel.knob.setStyle('left', myCarousel.position.now + 'px');
    }
    else if (startPos == 'center') {
        myCarousel.content['scrollLeft'] = myCarousel.position.now * myCarousel.scrollRatio / 2;
        myCarousel.knob.setStyle('left', myCarousel.position.now / 2 + 'px');
    }

    myCarousel.makeThumbUp();
}