var width;

var position;
var view_wid;
var num_page;
var curr_page;
var scrollby;
var col;
var min_pos;
var max_pos;
var col_width;
col_width = 229; //product width

document.observe("dom:loaded", function() {    
    try
    {
        update();

        Event.observe(window, 'resize', update);
        Event.observe('plist_con', 'scroll', updatepage);
        Event.observe('plist_con', 'DOMMouseScroll', wheel); // mozilla
        Event.observe('plist_con', 'mousewheel', wheel); // IE/Opera
    }
    catch(error)
    {
        //ignore if slider does not exist
    }
});

function moveP()
{
    slider.setValue($('plist_con').scrollLeft - scrollby);
}

function moveN()
{
    slider.setValue($('plist_con').scrollLeft + scrollby);
}

function update()
{
    width = ($('plist_con').scrollWidth - $('plist_con').offsetWidth);
    position = ($('plist_con').scrollLeft);
    //view_wid = ($('plist_con').offsetWidth);
        
    //if no width set width to 1 to avoid JS error
    if(width == 0)
    {
        width = 1
    }
        
    if ($('plist_con').scrollWidth <= $('plist_con').offsetWidth) 
    {
        $('plist_mid').hide();
    }
    else
    {
        $('plist_mid').show();
    }
    
    try
    {
        slider.dispose();
    }
    catch(error)
    {
        //ignore if slider does not exist
    }
    
    try
    {
        slider = new Control.Slider('handle', 'track',
        {
            range: $R(0, width),
            sliderValue: position,
            onSlide: function(v)
            {
                scrollHorizontal(v, $('plist_con'), slider);
            },
            onChange: function(v)
            {
                scrollHorizontal(v, $('plist_con'), slider);
            }
        });
    }
    catch(error)
    {
        //no
    }
    updatepage();
}

function updatepage()
{
    width = ($('plist_con').scrollWidth-$('plist_con').offsetWidth);
    col = Math.floor($('plist_con').offsetWidth / col_width) //find number of columns, times by width of col to get scroll size
    scrollby = col * col_width
    view_wid = ($('plist_con').offsetWidth);
    position = ($('plist_con').scrollLeft);
    num_page = (Math.ceil(width / scrollby)+1);
    
    for (i=1; i<=num_page; i++)
    {
        min_pos = ((scrollby * i) - scrollby) - (scrollby - 1);
        max_pos = (scrollby * i) - (scrollby - 1);
        if (position > min_pos && position < max_pos)
        {
            curr_page = i;
            $('pageination').innerHTML = '' + curr_page + ' of ' + num_page
        }
    }
    
    if (position == 0) {
        $('page_prev').setStyle({
          opacity: '0.4',
          filter: 'alpha(opacity=40)'
        });
    }
    else
    {
        $('page_prev').setStyle({
          opacity: '1.0',
          filter: 'alpha(opacity=100)'
        });
    }
    
    if (position == (width)) {
        $('page_next').setStyle({
          opacity: '0.4',
          filter: 'alpha(opacity=40)'
        });
    }
    else
    {
        $('page_next').setStyle({
          opacity: '1.0',
          filter: 'alpha(opacity=100)'
        });
    }
}

//mouse scrolling
function handle(delta) {
	slider.setValueBy(-delta);
}

function wheel(event){
	var delta = 0;
	if (!event)
		event = window.event;
	if (event.wheelDelta) { // IE Opera
		delta = event.wheelDelta*1.9083333333333333333333333333333;
	} else if (event.detail) { // Mozilla
		delta = -event.detail*28.625;
	}
	if (delta)
		handle(delta);

	if (event.preventDefault)
		event.preventDefault();
	
	event.returnValue = false;
}