jQuery.noConflict();
jQuery(document).ready(function() {
    // Save  the jQuery objects for later use.
    var outer		= jQuery("#preview_outer");
    var thumbs		= jQuery("#thumbs span");
    thumbs_count = thumbs.length;
    current_img = 1;
    var preview_pos;
    var preview_els	= jQuery("#preview_inner > div");
    var image_width	= preview_els.eq(0).width(); // Get width of images
    reset = 0;

    // Hook up the click event
    thumbs.click(function() {
        current_img = thumbs.index(this);
        reset = 1;
        // Get position of current image
        preview_pos = preview_els.eq( thumbs.index(this) ).position();

        // Animate them!
        outer.stop().animate( {'scrollLeft' : preview_pos.left},	500 );
        thumbs.css('background-position', "0 0");
        //jQuery(this).css('background', "url('slider_bar_active.png') no-repeat top center");
        jQuery(this).css('background-position', "23px 0");
    });

    // Reset positions on load

    outer.animate( {'scrollLeft' : 0}, 0 );

    // Set initial width
    jQuery("#preview_inner").css('width', preview_els.length * image_width);
    mycicle();
    setInterval("mycicle()", 8000);
    
    jQuery("#next").click(function (){
        if (current_img < thumbs_count - 1) {
            current_img++;
        } else {
            current_img = 0;
        }
        jQuery(jQuery("#thumbs span")[current_img]).click()
    });
    
    jQuery("#prev").click(function (){
    //alert(current_img);
        if (current_img > 0) {
            current_img--;
        } else {
            current_img = thumbs_count - 1;
        }
        jQuery(jQuery("#thumbs span")[current_img]).click()
    });
    
});

function mycicle() {
    if (reset == 0) {
    //alert(current_img);
        if (current_img < thumbs_count - 1) {
            current_img++;
        } else {
            current_img = 0;
        }
        jQuery(jQuery("#thumbs span")[current_img]).click();
    } else {
        reset = 0;
    }
}