/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

$(document).ready( function() {
    startSlideShow();
    initScrollBar();
});

var speed = 10;
var pic, numImgs, arrLeft, i, totalWidth, n, myInterval;

function startSlideShow() {

	pic = $("#viewport").children("img");
	numImgs = pic.length;
	arrLeft = new Array(numImgs);

	for (i=0;i<numImgs;i++){

		totalWidth=0;
		for(n=0;n<i;n++){
			totalWidth += $(pic[n]).width();
		}

		arrLeft[i] = totalWidth;
		$(pic[i]).css("left",totalWidth);
	}

	myInterval = setInterval("flexiScroll()",speed);
	$('#imageloader').hide();
	$(pic).show();
}


function flexiScroll(){

	for (i=0;i<numImgs;i++){
		arrLeft[i] -= 1;

		if (arrLeft[i] == -($(pic[i]).width())){
			totalWidth = 0;
			for (n=0;n<numImgs;n++){
				if (n!=i){
					totalWidth += $(pic[n]).width();
				}
			}
			arrLeft[i] =  totalWidth;
		}
		$(pic[i]).css("left",arrLeft[i]);
	}
}

function initScrollBar() {
    $('#scroll-pane').css('overflow','hidden');
    var difference = $('#scroll-content').height()-$('#scroll-pane').height();
    if(difference>0)
    {
        var proportion = difference / $('#scroll-content').height();
        var handleHeight = Math.round((1-proportion)*$('#scroll-pane').height());

        handleHeight -= handleHeight%2;


        $("#scroll-pane").after('<\div id="slider-wrap"><\div id="slider-vertical"><\/div><\/div>');
        $("#slider-wrap").height($("#scroll-pane").height());

        $('#slider-vertical').slider({
            orientation: 'vertical',
            range: 'max',
            min: 0,
            max: 100,
            value: 100,
            slide: function(event, ui) {
                var topValue = -((100-ui.value)*difference/100);
                $('#scroll-content').css({
                    top:topValue
                });
            }
        });

        $(".ui-slider-handle").css({
           // height:handleHeight,
           // 'margin-bottom':-0.5*handleHeight
            });

        //put in the

        var origSliderHeight = $("#slider-vertical").height();
        var sliderHeight = origSliderHeight - handleHeight ;
        var sliderMargin =  (origSliderHeight - sliderHeight)*0.5;
        $(".ui-slider").css({
           // height:sliderHeight,
            'margin-top': '46px'
        });
        $(".ui-slider-range").css({
            top:-sliderMargin
            });
        $("#slider-wrap").click(function(){
            $("#slider-vertical").slider("value", 0);
            $('#scroll-content').css({
                top:-difference
                });
        })

        $("#scroll-pane,#slider-wrap").mousewheel(function(event, delta){
            var speed = 5;
            var sliderVal = $("#slider-vertical").slider("value");
            sliderVal += (delta*speed);
            $("#slider-vertical").slider("value", sliderVal);
            var topValue = -((100-sliderVal)*difference/100);
            if (topValue>0) topValue = 0;
            if (Math.abs(topValue)>difference) topValue = (-1)*difference;
            $("#scroll-content").css({
                top:topValue
            });
            event.preventDefault();
        });

    }

}