var Carousel = {
    current:0,
    init: function() {
        //check to see if the W3C DOM is supported
        if(document.getElementById && document.createTextNode) {
            var list = document.getElementById('carousel');
            if(list) {
                Carousel.items = list.getElementsByTagName('li');
                Carousel.all = Carousel.items.length;
                if(Carousel.all > 1) {
                    Carousel.ul = Carousel.items[0].parentNode;
                    Carousel.addClass(Carousel.ul, 'carousel-image-list');

                    // create the carousel navigation
                    Carousel.createNav(list);

                    // apply the modalwindow className to appropriate links
                    var carousel_images = list.getElementsByTagName('a');
                    for (i = 0; i < carousel_images.length; i++) {
                        Carousel.addClass(carousel_images[i], 'modalwindow');
                    }
                }
            }

            // options( 1 - on , 0 - off)
            var auto_slide  = 1;
            var hover_pause = 1;

            // speed of carousel
            Carousel.auto_slide_seconds = 4000;

            /*  =Move the last list item before the first item.
                The purpose of this is if the user clicks to slide left they will be able to see the last item.
            ----------------------------------------------- */
            $('.carousel-image-list li:first').before($('.carousel-image-list li:last'));

            // check if auto sliding is enabled
            if(auto_slide == 1) {
                Carousel.play_carousel();

                /* and change the value of our hidden field that hold info about
                the interval, setting it to the number of milliseconds we declared previously*/
                $('#hidden-auto-slide-seconds').val(Carousel.auto_slide_seconds);
            }

            // check if hover_pause is enabled
            if(hover_pause == 1) {
                Carousel.addEvent(Carousel.ul, 'mouseover', Carousel.pause_carousel);
                Carousel.addEvent(Carousel.ul, 'mouseout', Carousel.play_carousel);

                Carousel.addEvent(Carousel.prev, 'mouseover', Carousel.pause_carousel);
                Carousel.addEvent(Carousel.prev, 'mouseout', Carousel.play_carousel);

                Carousel.addEvent(Carousel.next, 'mouseover', Carousel.pause_carousel);
                Carousel.addEvent(Carousel.next, 'mouseout', Carousel.play_carousel);
            }

        } //end if statement
    },

    createNav:function(o) {
        var p = document.createElement('p');
        Carousel.addClass(p, 'carousel-controls');

        Carousel.recent = document.createElement('a');
        Carousel.addClass(Carousel.recent, 'modalwindow newest-work');
        Carousel.recent.setAttribute('href', '/panel/aamas.html');
        var templabel = document.createTextNode('Newest Work');
        Carousel.recent.appendChild(templabel);
        Carousel.addEvent(Carousel.recent, 'click', Carousel.newest_work);
        p.appendChild(Carousel.recent);

        Carousel.prev = document.createElement('a');
        Carousel.addClass(Carousel.prev, 'previous');
        Carousel.prev.setAttribute('href', '#previous');
        var templabel = document.createTextNode('<< Previous');
        Carousel.prev.appendChild(templabel);
        Carousel.addEvent(Carousel.prev, 'click', Carousel.show);
        p.appendChild(Carousel.prev);

        Carousel.count = document.createElement('span');
        templabel = document.createTextNode( (Carousel.current+1) + ' / ' + Carousel.all);
        Carousel.count.appendChild(templabel);
        p.appendChild(Carousel.count);

        Carousel.next = document.createElement('a');
        Carousel.addClass(Carousel.next, 'next');
        Carousel.next.setAttribute('href', '#next');
        var templabel = document.createTextNode('Next >>');
        Carousel.next.appendChild(templabel);
        Carousel.addEvent(Carousel.next, 'click', Carousel.show);
        p.appendChild(Carousel.next);

        o.parentNode.insertBefore(p, o);
    },
    pause_carousel: function(e) {
        // stop the interval
        clearInterval(Carousel.timer);
    },
    play_carousel: function(e) {
        /* set the interval (loop) to call function show with option 'right'
           and set the interval time to the variable we declared previously (4000) */
        Carousel.timer = setInterval('Carousel.show(Carousel.next)', Carousel.auto_slide_seconds);
    },
    newest_work: function(e) {
        if (this === Carousel.recent) {
            Carousel.pause_carousel();
            Lightbox;
        }
        Carousel.cancelClick(e);
    },
    show: function(e) {
        // get the image width
        var item_width = $('.carousel-image-list li').outerWidth() + 0;

        if(this === Carousel.prev) {
            var addto = -1;
            Carousel.current += addto;
            if(Carousel.current < 0) {
                Carousel.current = (Carousel.all-1);
            }
            if(Carousel.current > Carousel.all-1) {
                Carousel.current = 0;
            }

            //...calculating the new left indent of the unordered list (ul) for left sliding
            var left_indent = parseInt($('.carousel-image-list').css('left')) + item_width;

            //make the sliding effect using jQuery's animate function
            $('.carousel-image-list:not(:animated)').animate({'left' : left_indent},500,function() {
                /*  =make an ilussion of infinity by changing place of last or first item
                   and if it slid to the left we put the last item before the first item
                ----------------------------------------------- */
                $('.carousel-image-list li:first').before($('.carousel-image-list li:last'));

                //...and then just get back the default left indent
                $('.carousel-image-list').css({'left' : '-485px'});
            });
        } else {
            var addto = 1;
            Carousel.current += addto;
            if(Carousel.current < 0) {
                Carousel.current = (Carousel.all-1);
            }
            if(Carousel.current > Carousel.all-1) {
                Carousel.current = 0;
            }

            //...calculating the left indent of the unordered list (ul) for right sliding
            var left_indent = parseInt($('.carousel-image-list').css('left')) - item_width;

            //make the sliding effect using jQuery's animate function
            $('.carousel-image-list:not(:animated)').animate({'left' : left_indent},500,function() {
                /*  =make an ilussion of infinity by changing place of last or first item
                    and if it slid to the right we put the first item after the last item
                ----------------------------------------------- */
                $('.carousel-image-list li:last').after($('.carousel-image-list li:first'));

                //...get back the default left indent
                $('.carousel-image-list').css({'left' : '-485px'});
            });
        }
        var templabel = document.createTextNode( (Carousel.current+1) + ' / ' + Carousel.all);
        Carousel.count.replaceChild(templabel, Carousel.count.firstChild);
        //Carousel.removeClass(Carousel.items[Carousel.current], 'current');
        //Carousel.addClass(Carousel.items[Carousel.current], 'current');
        Carousel.cancelClick(e);
    },



    /*  =Helper Methods
    ----------------------------------------------- */
    /*
     * @argument obj - the object to attach event to
     * @argument type - name of the event
     * @argument fn - function to call
     */
    addEvent:function( obj, type, fn ) {
        if ( obj.attachEvent ) {
         obj['e'+type+fn] = fn;
         obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
         obj.attachEvent( 'on'+type, obj[type+fn] );
        } else
         obj.addEventListener( type, fn, false );
    },
    removeEvent: function( obj, type, fn ) {
      if ( obj.detachEvent ) {
        obj.detachEvent( 'on'+type, obj[type+fn] );
        obj[type+fn] = null;
      } else
        obj.removeEventListener( type, fn, false );
    },
    removeClass:function(o,c) {
        var rep=o.className.match(' '+c)?' '+c:c;
        o.className=o.className.replace(rep,'');
    },
    addClass:function(o,c) {
        var test = new RegExp("(^|\\s)" + c + "(\\s|$)").test(o.className);
        if(!test){o.className+=o.className?' '+c:c;}
    },
    cancelClick:function(e) {
        if (window.event) {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (e && e.stopPropagation && e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
    },

    /*  =Examples of calling getElementsByClassName()
        To get all a elements in the document with a Òinfo-linksÓ class.
        getElementsByClassName(document, "a", "info-links");
        To get all div elements within the element named ÒcontainerÓ, with a ÒcolÓ and a ÒleftÓ class.
        getElementsByClassName(document.getElementById("container"), "div", ["col", "left"]);
        Note that you can still use a string when only looking for a single class name, but an array when looking for multiple class names.
    ----------------------------------------------- */
    getElementsByClassName: function(oElm, strTagName, oClassNames) {
        var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
        var arrReturnElements = new Array();
        var arrRegExpClassNames = new Array();
        if(typeof oClassNames == "object") {
            for(var i=0; i<oClassNames.length; i++) {
                arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames[i].replace(/\-/g, "\\-") + "(\\s|$)"));
            }
        } else {
            arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames.replace(/\-/g, "\\-") + "(\\s|$)"));
        }
        var oElement;
        var bMatchesAll;
        for(var j=0; j<arrElements.length; j++) {
            oElement = arrElements[j];
            bMatchesAll = true;
            for(var k=0; k<arrRegExpClassNames.length; k++) {
                if(!arrRegExpClassNames[k].test(oElement.className)) {
                    bMatchesAll = false;
                    break;
                }
            }
            if(bMatchesAll) {
                arrReturnElements.push(oElement);
            }
        }
        return (arrReturnElements)
    }

};
Carousel.init();