// execute your scripts when the DOM is ready. this is a good habit
$(window).bind('load',function(){

	initGallery();

    $('.next2').click(function() {
        var api = $('div.scrollable').scrollable();
        var thenextimg = api.getClickIndex() + 1;
        api.click(thenextimg);
        var currentItem = $('div.scrollable img:eq(' + thenextimg + ')');
        var url = currentItem.attr('src').replace('-tn','');
        var alt = currentItem.attr('alt');

        var wrap = $('#image_wrap');
        var img = new Image();
        img.onload = function() {
            //wrap.fadeTo('fast', 1);
            wrap.find('#zoomimg').attr('src',url);
            wrap.find('#zoomimg').attr('alt',alt);
        };

        img.src = url;

		img.onerror = function(){
			wrap.find('#zoomimg').attr('src','/images/gallery/coming-soon.gif');
		};
    })

    $('.prev2').click(function() {
        var api = $('div.scrollable').scrollable();
        var theprevimg = api.getClickIndex() - 1;
        api.click(theprevimg);
        var currentItem = $('div.scrollable').find('img:eq(' + theprevimg + ')');
        var url = currentItem.attr('src').replace('-tn','');
        var alt = currentItem.attr('alt');
        var wrap = $('#image_wrap');

        var img = new Image();
        img.onload = function() {
            wrap.find('#zoomimg').attr('src',url);
            wrap.find('#zoomimg').attr('alt',alt);
        };

        img.src = url;

		img.onerror = function(){
			wrap.find('#zoomimg').attr('src','/images/gallery/coming-soon.gif');
		};
    })

	$('.items img').click(function() {
	
		var url = $(this).attr('src').replace('-tn','');
		var alt = $(this).attr('alt');
	
		var wrap = $('#image_wrap');

        var img = new Image();
        img.onload = function() {
            wrap.find('#zoomimg').attr('src',url);
            wrap.find('#zoomimg').attr('alt',alt);
        };

		// begin loading the image
		img.src = url;

		img.onerror = function(){
			wrap.find('#zoomimg').attr('src','/images/gallery/coming-soon.gif');
		};

	// when page loads simulate a "click" on the first image
	}).filter(":first").click();

});

function initGallery(){

	var intAvailableWidth=778;
	var intTotalWidth=0;

	$('div .scrollable .items img').each(function(){
		intTotalWidth+=$(this).width()+20;//add 20 to take padding, margin and border of each image into account
	});

	if(intTotalWidth>intAvailableWidth){
		$('div.scrollable').before('<a class="prevPage browse left"><img src="/images/gallery/prev.gif" alt="Previous" /></a>').after('<a class="nextPage browse right"><img src="/images/gallery/next.gif" alt="Next" /></a>');
	}else{
		$('div.scrollable').before('<span class="spacer left"></span>').after('<span class="spacer right"></span>');
	}

	$('#galleryimgnav').after('<div id="image_wrap"><img src="/images/blank.gif" alt="" id="zoomimg" /></div>');

	if($('div.scrollable .items img').length>1){
		$('#image_wrap img').before('<a class="prev2"><img src="/images/gallery/prev.gif" alt="Previous" /></a>').after('<a class="next2"><img src="/images/gallery/next.gif" alt="Next" /></a>');
	}

	// initialize scrollable
	$('div.scrollable').scrollable();

}