/**
    @filename caoursel.js
    @author steve@perfectsensedigital.com
    @dependency jQuery

    TODO:
        - make carousel a constructor to make multiple instances easier
        - Pass a "data-source" to the constructor, either a JSONP source or an element ID (dymanic data source vs hard coded markup to convert)
*/

var carousel = {
    refs:[],
    init: function() {
		var cssLink = document.createElement('link');
		cssLink.type = 'text/css';
		cssLink.rel ='stylesheet';
		cssLink.href = '/modules/carousel/carousel.css';
		document.getElementsByTagName("head")[0].appendChild(cssLink);
        carousel.refs = $(".carousel");
        carousel.ui.createParts();
    },

    ui: {
        animate: {
            startPoint: 0,
            direction:null,
            object:null,
            /**
                Initializes the carousel animation
                @param { String } direction The direction to animate - right or left
                @param { Number } dur Duration in seconds that the animation should last
            */
            init: function(direction,dur,c) {
                var slider =  $(".carouselSlider", c)[0]; 
                carousel.ui.animate.startPoint = slider.offsetLeft;
                carousel.ui.animate.direction = direction;
                carousel.ui.animate.object = slider;
                carousel.ui.animate.width = c.offsetWidth;
				carousel.ui.animate.run();
   			},

            /**
                Runs the animation
            */
            run: function() {
                var obj = carousel.ui.animate.object;
                var endPoint = carousel.ui.animate.direction == "left" ? carousel.ui.animate.width : carousel.ui.animate.width * -1;
              	$(obj).animate({"left": "+="+endPoint}, "fast");
            }
        },

        createParts: function() {
            for(var i = 0; i < carousel.refs.length; i++) {
                var leftArrow = carousel.component.button("left");
                var rightArrow = carousel.component.button("right");
                var kids = $(".carouselItem", carousel.refs[i]);
                var wrapper = $(".carouselSlider", carousel.refs[i])[0];
                wrapper.style.width = kids.length * carousel.refs[i].offsetWidth + "px";
                leftArrow.ref = rightArrow.ref = {
                    "carousel":carousel.refs[i],
                    "leftArrow":leftArrow,
                    "rightArrow":rightArrow,
                    "kids":kids,
					"currentItem":0
                };
                carousel.refs[i].parentNode.appendChild(leftArrow);
                carousel.refs[i].parentNode.appendChild(rightArrow);
            }
        }
    },

    component: {
        /**
            Creates a carousel button
            @param { String } direction Right or left - the direction the button should point
        */
        button: function(direction) {
			var div = document.createElement("div"); 
			div.className = "carousel-arrow-" + direction;			
            if(direction == "left") div.className += " disabled";
            div.onclick = carousel.events.onArrowClick;
            div.direction = direction;
            return div;
        }
    },

    events: {
        onArrowClick: function() {
			this.ref.currentItem += this.direction == "left" ? -1 : 1;
            var r = this.ref.rightArrow; 
            var l = this.ref.leftArrow;
            (this.ref.currentItem <= 0) ? $(l).addClass("disabled") : $(l).removeClass("disabled");
            (this.ref.currentItem >= this.ref.kids.length - 1) ? $(r).addClass("disabled") : $(r).removeClass("disabled");
            if(this.ref.currentItem < 0) {
                this.ref.currentItem = 0;
                return;
            }
            if(this.ref.currentItem >= this.ref.kids.length) {
                this.ref.currentItem = this.ref.kids.length - 1;
                return;
            }
            carousel.ui.animate.init(this.direction,0.5,this.ref.carousel);
        }
    }
}

$(document).ready( function() { carousel.init() });