panels = Array();

function EasyScroller(panel,options)
{
    this.panel = '#' + panel;
    this.offscreen = '.'+panel + 'Offscreen';
    //this.options = options;
    this.okToMove = true;
    this.keepGoing = true;
    this.clipShift = options && options.clipSpeed? options.clipSpeed: 3;
    this.animationDelay = options && options.animationDelay ? options.animationDelay: 1000;
    this.memoryOptimized= options && options.memoryOptimized ? options.memoryOptimized : false;
    this.animate = true;


    panels[panel] = this;

    $(this.panel + ' .clip').css('display','inline').css('position','absolute');
    $(this.panel + ' .clip:last').addClass('footer');
    $( $(this.panel + ' .clip')[$(this.panel + ' .clip').length -1] ).addClass('nexttolast');
    $(this.panel + ' .clip').hover(function(){eval("panels['" + panel+ "'].stop();")},function(){eval("panels['" + panel+ "'].start();")}).css('cursor','pointer');
    $(this.panel + ' .clip img').css('border','0px');
    $(this.panel + ' .clip:first').addClass('head');
    $(this.panel + ' .clip').css('color','black').css('fontWeight','bold').css('text-align','center').css('fontSize','20px');


    this.pause = function()
    {
	this.animate= this.animate ? false : true;
	return this.animate;
    }


    this.stop = function()
    {
        this.okToMove = false;

    }

    this.start = function()
    {
        this.okToMove = true;
    }

    this.move = function()
    {
        if(this.animate && this.okToMove && $(this.panel + ' .clip').length > 1) {

            head = $(this.panel +' .head');
            left = parseInt($(head).position().left);
            head.css('left',left-this.clipShift);
            this.draw();
        }

    }

    this.draw = function()
    {
        list = $(this.panel + ' .clip');

        //setup
        for(i=0; i < list.length;i++)
        {
            clip = $(list[i]);

            if(!$(clip).hasClass('head'))
            {

                left = parseInt($(list[i-1]).position().left);
                width = parseInt($(list[i-1]).width());
                $(list[i]).css('left',left+width);

		//Optimized Add to End
		if(this.memoryOptimized)
		{
			if($(clip).hasClass('footer') && $(clip).position().left < $(this.panel).width())
			{
				$(clip).removeClass('footer');
				$(clip).show();
				$(this.offscreen +' .clip:first').remove().appendTo($(this.panel)).css('display','inline').css('position','absolute');;
                        	c = $(this.panel + ' .clip:last').addClass('footer');
			}
		}
           
            } else if($(clip).hasClass('head')) {

                cLeft = parseInt($(clip).position().left);
                cWidth = parseInt($(clip).width());
                edge = cLeft + cWidth;

                if(edge + $(clip).width() < 0)
                {
                    cpy = $(clip).clone();
                    $(cpy).removeClass('head');
                   
			//Optimized Hide off screen
                    if(this.memoryOptimized){
			$(clip).attr('style','').attr('class','clip');
			$(clip).unbind('mouseover').unbind('mouseout');
			$(clip).hide().appendTo(this.offscreen);
                    } else {
                    	$(this.panel + ' .clip:last').removeClass('footer');
                    	$(this.panel + ' .clip:first').removeClass('head');
                    	$(this.panel + ' .clip:first').remove();
			$(cpy).addClass('footer');
                        $(this.panel + ' .clip:last').parent().append($(cpy));
                    }

                    $(this.panel + ' .clip:first').addClass('head');
                    $(this.panel + ' .clip').hover(function(){eval("panels['" + panel+ "'].stop();");$(this).addClass('highlight');},function(){eval("panels['" + panel+ "'].start();");}).css('cursor','pointer');
                   
                } 

            } 
        }
	$(this.panel).css('visibility','visible');

    }

    if(this.memoryOptimized == true){

	$('<div class="'+this.offscreen.substring(1) + '">').appendTo('body').hide();

	this.draw();

        mylist = $(this.panel + ' .clip');
        rightEdge =$(this.panel).width();
        firstNoMove = -100;
	

        for(i=0;i <mylist.length;i++)
        {
           
            if($(mylist[i]).position().left >= rightEdge - $(mylist[i]).width() )
            {   
                if(firstNoMove == -100 )
                {
                    firstNoMove = (i);
                    $(this.panel + ' .clip').removeClass('footer');
                    $(mylist[firstNoMove]).addClass('footer');
                } else {
                    $(mylist[i]).remove().hide().appendTo(this.offscreen);
               
                }
               
            }
        }
	if(firstNoMove == mylist.length -1)
	{
		//No need to optimize, user wants to scroll the entire visible area. oh, well
		this.memoryOptimized = false;

	}
    }

    setInterval("panels['" + panel+ "'].move()",this.animationDelay);


    return this;

}