frameSlide = function(__mainContainer, __frameWidth) {
    /* UPDATED FRAME SLIDE FUNCTIONALITY. V2.0 */
    /*
     * The frame slides introduces functionality where the user can scroll through
     * the entire frame list in one direction. QC#12801 - Vlimjap
     * 
     */
  
    me = this;
    
    var mainContainer = __mainContainer;
    var frameWidth = __frameWidth;
    var transitionDelay, action, widthPos, rotationTimeout;
    var slideLock = false;
    var frameContainer = document.getElementById(mainContainer).getElementsByTagName('ul')[0].id;
     
    this.next = function(rotateFlag) {
        if (!slideLock) {
			slideLock = true;
			if (!rotateFlag) {
                clearInterval(rotationTimeout);
            }
            me.currentSlide++;
            action = 'next';
            animateSlide(action);
        }
    }
    
    this.prev = function(rotateFlag) {
        if (!slideLock) {
			slideLock = true;
            if (!rotateFlag) {
                clearTimeout(rotationTimeout);
            }
            me.currentSlide--;
            action = 'prev';
            animateSlide(action);
        }
    }
    
    this.setTransitionDelay = function(delay) {
        transitionDelay = delay > 0 ? delay*1000 : 0;
        return this;
    }
    
    this.initialize = function(__oSlidContents) {
        me.oSlidContents = __oSlidContents;
        me.currentSlide = 0; //Starting Slide
        initializeImages();
        setFrameContainer();
        
        if (document.getElementById(mainContainer).style.display != 'block') {
            if (document.getElementById('slideLoader')) {
                document.getElementById('slideLoader').style.display = 'none'; 
            }
            document.getElementById(mainContainer).style.display = 'block'; 
        }
        autoScroll();
        return this;
    }

    this.reset = function() {
        resetSlidePosition();
    } 

    /* private Functions */    
    function resetSlidePosition() {
        jQuery('#' + frameContainer).css({marginLeft: -frameWidth});
    }
    
    function cleanUpSlides() {
        if (action == 'prev') {
            //remove last
            el = jQuery('#' + frameContainer + ' li:last');
            el.remove();            
        } else if (action == 'next') {
            //remove first
            el = jQuery('#' + frameContainer + ' li:first');
            el.remove();
        }
    }

    function autoScroll() {
        if (transitionDelay>0) {
            rotationTimeout = setInterval(function() {
                me.next('auto');
            }, transitionDelay);            
        }
    }
    
    function initializeImages() {
        x = me.oSlidContents.length-1;
        jQuery('#' + frameContainer + ' li').each(function() {
            jQuery(this).html(getSlideHTML(me.oSlidContents[x]));
            if (x == me.oSlidContents.length-1) {
                x = 0;
            } else {
                x++;
            }
        });
    }
    
    function getNextSlideIndex() {
        // retrieves next slide on deck;
        if (action == 'prev') {
            slideOnDeck = me.currentSlide-1;
            if (me.currentSlide < 0) {
                me.currentSlide = me.oSlidContents.length-1;
                slideOnDeck = me.currentSlide-1;
            } else if (me.currentSlide == 0) {
                slideOnDeck = me.oSlidContents.length-1;
            }
        }
        
        if (action == 'next') {
            slideOnDeck = me.currentSlide+1;
            if (me.currentSlide == me.oSlidContents.length) {
                me.currentSlide = 0;
                slideOnDeck = 1;
            } else if (slideOnDeck == me.oSlidContents.length) {
                slideOnDeck = 0;
            }
        }
        
        return slideOnDeck;
    }
    
    function drawSlides() {
        slidContents = getSlideHTML(me.oSlidContents[getNextSlideIndex()]); //The Function getSlideHTML is an external Function

        if (slidContents != undefined) {
            slidContents = '<li class="clearFix" style="width:'+ frameWidth +'px">'+ slidContents +'</li>';
    
            if(action == 'prev') {
                //add new item at beginning
                el = jQuery('#' + frameContainer + ' li:first');
                el.before(slidContents); 
            } else if (action == 'next') {
                //add new item at end
                el = jQuery('#' + frameContainer + ' li:last');
                el.after(slidContents);
            }
        } else {
            
        }
    }
    
    function animateSlide(direction) {
        if (direction == 'prev') {
            widthPos = 0;            
        } else if (action == 'next') {
            widthPos = -2*frameWidth;
        }
        
        jQuery('#' + frameContainer).animate({
            marginLeft: Math.floor(widthPos) + 'px'
        }, 
        "fast", 
        "", 
        function() {
            drawSlides();
            cleanUpSlides();
            resetSlidePosition();
			slideLock = false;
        }
        );
    }
    
    function setFrameContainer() {
        jQuery('#' + mainContainer).width(frameWidth);
        frameContainerWidth = document.getElementById(frameContainer).getElementsByTagName('li').length * frameWidth; 
        jQuery('#' + frameContainer).width(frameContainerWidth);
        widthPos = 0; 
        jQuery('#' + frameContainer ).css({marginLeft: '-'+frameWidth+'px'});
        
        jQuery('#' + frameContainer + ' > li').each(function() {
            this.style.width = frameWidth + 'px';
        });
    }

}
