/*
Based off SlideItMoo v1.1 - Image slider
(c) 2007-2008 Constantin Boiangiu <http://www.php-help.ro>
MIT-style license.
Modifications made by Resource Interactive.
*/
var LeanProductCarousel = new Class({
    Implements: [Options],
    options: {
		centerContainer: null,
        overallContainer: null,
        innerContainer: null,
        itemsContainer: null,
        itemsVisible: 5,
        itemsSelector: null,
        itemWidth: null,
        transition: Fx.Transitions.linear,
        duration: 300,
        fps: 50,
        direction: 1
    },

    initialize: function(options) {
        this.setOptions(options);
        /* all elements are identified on CSS selector (itemsSelector) */
        this.elements = $(this.options.itemsContainer).getElements(this.options.itemsSelector);
        this.active = 1;
        this.elements.each(function(el, counter) {
            if (counter != 1) {
                el.getElement('div.box-data').setStyle('opacity', 0);
                el.getElement('img.product-image').setStyles({
                    'height': '205px',
                    'width': '118px',
                    'margin-top': '40px',
                    'opacity': '0.5',
                    'filter': 'alpha(opacity=50)'
                });
            } else {
                el.getElement('div.box-data').setStyles({
                	'opacity': 1,
                	'visibility':'visible'
               	});
                el.setStyle('border','1px solid #000');
                el.addClass('active');
            }
        })

        this.totalElements = this.elements.length;
        if (this.totalElements < this.options.itemsVisible) return;
        // width of itemsContainer children
        this.elementWidth = this.options.itemWidth || this.elements[0].getSize().x;
        this.currentElement = 0;
        this.direction = this.options.direction;
        this.controls = $(this.options.overallContainer).getElements('.slide-controls');
        this.controls.setStyles({
        	'visibility':'hidden',
        	'opacity':0
        });
        this.begin();
        
    },

    begin: function() {
        // resizes the container div's according to the number of itemsVisible thumbnails
        this.setContainersSize();

        this.myFx = new Fx.Morph(this.options.itemsContainer, {
            wait: true,
            transition: this.options.transition,
            fps: this.options.fps,
            duration: this.options.duration
        });

        this.addControls();
        this.setToggleClicks();
    },
	setToggleClicks: function(){
		var productContainers = $(this.options.itemsContainer).getElements('.product-holder');
		productContainers.each(function(el){
			
			var newBox = el.getElement('.old');
			var oldBox = el.getElement('.new')
   			var currentClickSrc = el.getElement('.toggle-box img');
			el.getElement('.toggle-box').addEvent('click', function(){
				if ( this.hasClass('old') ) {
					currentClickSrc.set({
						'src': currentClickSrc.get('src').replace('new_box.jpg', 'old_box.jpg'),
						'alt': currentClickSrc.get('alt').replace('new', 'old')
					});
					oldBox.setStyle('display','block');
					newBox.setStyle('display','none');
					this.removeClass('old').addClass('new');
				} else {
					currentClickSrc.set({
						'src': currentClickSrc.get('src').replace('old_box.jpg', 'new_box.jpg'),
						'alt': currentClickSrc.get('alt').replace('old', 'new')
					});
					oldBox.setStyle('display','none');
					newBox.setStyle('display','block');
					this.removeClass('new').addClass('old');
				}

				return false;
			});
		
		});
	},
    setContainersSize: function() {
        var centerBigOuter = this.options.overallContainer;
        $(centerBigOuter).set({
            styles: {
                'width': (this.options.itemsVisible * this.elementWidth) + 2,
                'overflow-x': 'hidden',
                'height': 'auto'
            }
        });
        $(this.options.itemsContainer).set({
            styles: {
                'width': this.totalElements * (this.elementWidth + 80)
            }
        });

    },

    addControls: function() {
        this.controls.fade('in');
        this.fwd = this.controls.getElement('a.left-control');
        this.bkwd = this.controls.getElement('a.right-control');
        this.fwd.addEvent('click', this.slide.bind(this).pass(-1));
        this.bkwd.addEvent('click', this.slide.bind(this).pass(1));

        this.controls.getElement('a.left-click-control').addEvent('click', this.slide.bind(this).pass(-1));
        this.controls.getElement('a.right-click-control').addEvent('click', this.slide.bind(this).pass(1));

    },

    slide: function(direction) {
        if (this.started) return;
        this.controls.setStyle('opacity', 0);
        this.fadeOut(this.active);
        this.direction = direction;
        var currentIndex = this.currentIndex();
        this.fadeIn(this.active);
        if (this.direction == -1) {
            this.rearange();
            $(this.options.itemsContainer).setStyle('margin-left', -this.elementWidth);
        }
        this.started = true;
        this.myFx.start({
            'margin-left': this.direction == 1 ? -this.elementWidth : 0
        }).chain(this.rearange.bind(this).pass(true));
        return false;
    },
    fadeIn: function(id) {
        if (id == this.totalElements) { id = 0; }
        var fadeInBox = this.elements[id];
        fadeInBox.addClass('active');
        var activeImage = this.elements[id].getElement('img.product-image');
        var myEffect = new Fx.Morph(activeImage, {
            duration: 'short',
            transition: Fx.Transitions.Sine.easeOut,
            onComplete: function() {
				fadeInBox.setStyle('border','1px solid #000');
                this.controls.fade('in');
            }.bind(this)
        });

        myEffect.start({
            'height': [205, 237],
            'width': [118, 129],
            'margin-top': [40, 0],
            'opacity': [0.5, 1]
        });

        fadeInBox.getElement('div.box-data').fade('in');
        fadeInBox.getElement('div.box-data-links').fade('in');
    },
    fadeOut: function(id) {
        if (id == this.totalElements) { id = 0; }
        var fadeOutBox = this.elements[id];
        fadeOutBox.removeClass('active');
        var activeImage = this.elements[id].getElement('img.product-image');
        var myEffect2 = new Fx.Morph(activeImage, {
        	duration: 'short',
        	transition: Fx.Transitions.Sine.easeOut,
        	onStart: function(){
        		fadeOutBox.getElement('div.box-data-links').setStyles({
        			'visibility':'hidden',
        			'opacity':0
        		});
        		fadeOutBox.setStyle('border','none');
        	}
        });

        myEffect2.start({
            'height': [237, 205],
            'width': [129, 118],
            'margin-top': [0, 40],
            'opacity': [1, 0.5]
        });
        fadeOutBox.getElement('div.box-data').fade('out');
    },
    rearange: function(rerun) {
        if (rerun) this.started = false;
        if (rerun && this.direction == -1) {
            return;
        }
        this.currentElement = this.currentIndex(this.direction);



        $(this.options.itemsContainer).setStyle('margin-left', 0);

        if (this.currentElement == 1 && this.direction == 1) {
            this.elements[0].injectAfter(this.elements[this.totalElements - 1]);
            return;
        }
        if ((this.currentElement == 0 && this.direction == 1) || (this.direction == -1 && this.currentElement == this.totalElements - 1)) {
            this.rearrangeElement(this.elements.getLast(), this.direction == 1 ? this.elements[this.totalElements - 2] : this.elements[0]);
            return;
        }

        if (this.direction == 1) {
            this.rearrangeElement(this.elements[this.currentElement - 1], this.elements[this.currentElement - 2]);
        }
        else {
            this.rearrangeElement(this.elements[this.currentElement], this.elements[this.currentElement + 1]);
        }

    },

    rearrangeElement: function(element, indicator) {
        this.direction == 1 ? element.injectAfter(indicator) : element.injectBefore(indicator);
    },

    currentIndex: function() {
        var elemIndex = null;
        switch (this.direction) {
            /* forward */ 
            case 1:
                if (this.currentElement >= this.totalElements - 1) {
                    elemIndex = 0;
                    this.active = 1;
                } else {
                    elemIndex = this.currentElement + this.direction;
                    this.active = elemIndex + 1;
                }

                break;
            /* backwards */ 
            case -1:
                if (this.currentElement == 0) {
                    elemIndex = this.totalElements - 1;
                    this.active = 0;
                } else {
                    elemIndex = this.currentElement + this.direction;
                    this.active = elemIndex + 1;
                }
                break;
        }

        return elemIndex;
    }
})

window.addEvents({
    'domready': function() {
	
        new LeanProductCarousel({
        	centerContainer: 'slide_container',
            overallContainer: 'slide_outer',
            innerContainer: 'slide_inner',
            itemsContainer: 'slide_products',
            itemsVisible: 3,
            itemsSelector: '.product-holder',
            itemWidth: 196,
            transition: Fx.Transitions.Linear,
            duration: 300,
            fps: 60
        });
		new LeanProductCarousel({
			centerContainer: 'slide_container2',
            overallContainer: 'slide_outer2',
            innerContainer: 'slide_inner2',
            itemsContainer: 'slide_products2',
            itemsVisible: 3,
            itemsSelector: '.product-holder',
            itemWidth: 196,
            transition: Fx.Transitions.Linear,
            duration: 300,
            fps: 60
        });
		new LeanProductCarousel({
			centerContainer: 'slide_container3',
            overallContainer: 'slide_outer3',
            innerContainer: 'slide_inner3',
            itemsContainer: 'slide_products3',
            itemsVisible: 3,
            itemsSelector: '.product-holder',
            itemWidth: 196,
            transition: Fx.Transitions.Linear,
            duration: 300,
            fps: 60
        });
		new LeanProductCarousel({
			centerContainer: 'slide_container4',
            overallContainer: 'slide_outer4',
            innerContainer: 'slide_inner4',
            itemsContainer: 'slide_products4',
            itemsVisible: 3,
            itemsSelector: '.product-holder',
            itemWidth: 196,
            transition: Fx.Transitions.Linear,
            duration: 300,
            fps: 60
        });
    
    	var shadeTabs = $$('#tabs .tab');
    	var shadePanels = $$('#panel .shade-container');
    	shadeTabs.each(function(el, counter) {
    		el.addEvent('click', function(evt){
    			evt.stop();
    			shadeTabs.removeClass('on');
				el.addClass('on');
				shadePanels.removeClass('active');
				shadePanels[counter].addClass('active');
			});
    	});
   
   		var printLinks = $$('.product-print');
   		printLinks.each(function(el){
   			el.addEvent('click', function(evt){
   				evt.stop();
   				window.print();
   			});
   		});
   
    }
});


function showBuyNow(el) {
	$$('div#cii-store').removeClass('hide');
	var zip = document.getElementById('zip');
	if(zip.value == "" || zip.value == undefined || zip.value == " ") {
		zip.value = "Enter Zip Code";
	}
	//urchinTracker(this.href);
	return true;
}