// JavaScript Document

var bodyHeight;
var images;
var numImages;
var targetY;
var galleryActive = false;
var trayHidden = false;
var trayActive = false;
var next;
var prev;

var leftTargetUp;
var leftTargetDown;
var rightTargetUp;
var rightTargetDown;
var scrollspeedLeft = 500;
var scrollspeedRight = 500;

$(document).ready(function(){
	detectImageLoads();	
    setPageScrollers();
    
    $('#downBtnLeft').bind('touchstart mousedown', function(){
      	scroll('.scrollerContentLeft', leftTargetUp, scrollspeedLeft);
    });
    $('#upBtnLeft').bind('touchstart mousedown', function(){
      	scroll('.scrollerContentLeft', leftTargetDown, scrollspeedLeft);
    });
    
    $('#downBtnWide').bind('touchstart mousedown', function(){
      	scroll('.scrollerContentLeft', leftTargetUp, scrollspeedLeft);
    });
    $('#upBtnWide').bind('touchstart mousedown', function(){
      	scroll('.scrollerContentLeft', leftTargetDown, scrollspeedLeft);
    });
    
    $('#downBtnRight').bind('touchstart mousedown', function(){
      	scroll('.scrollerContentRight', rightTargetUp, scrollspeedRight);
    });
    $('#upBtnRight').bind('touchstart mousedown', function(){
      	scroll('.scrollerContentRight', rightTargetDown, scrollspeedRight);
    });
    
    $('#upBtnLeft').bind('touchend touchmove touchcancel mouseup', function(){
      	$('.scrollerContentLeft').stop(true, false);
    });
    $('#downBtnLeft').bind('touchend touchmove touchcancel mouseup', function(){
      	$('.scrollerContentLeft').stop(true, false);
    });
    
    $('#upBtnWide').bind('touchend touchmove touchcancel mouseup', function(){
      	$('.scrollerContentLeft').stop(true, false);
    });
    $('#downBtnWide').bind('touchend touchmove touchcancel mouseup', function(){
      	$('.scrollerContentLeft').stop(true, false);
    });
    
    $('#upBtnRight').bind('touchend touchmove touchcancel mouseup', function(){
      	$('.scrollerContentRight').stop(true, false);
    });
    $('#downBtnRight').bind('touchend touchmove touchcancel mouseup', function(){
      	$('.scrollerContentRight').stop(true, false);
    });
});

function setPageScrollers(){

	var scrollerHeightLeft = $('.scrollerContentLeft').height();
    if(scrollerHeightLeft>470){
    	$('#upBtnLeft, #downBtnLeft, #upBtnWide, #downBtnWide').css({'display':'block'});
        leftTargetDown = $('.scrollerContentLeft').position().top;
		leftTargetUp = ($('.scrollerContentLeft').position().top)-(scrollerHeightLeft-470);
        scrollspeedLeft = scrollspeedLeft*(((scrollerHeightLeft-470)/200)+1);
    }
    
    var scrollerHeightRight = $('.scrollerContentRight').height();
    if(scrollerHeightRight>600){
    	//initialise scrollers
        $('#upBtnRight').css({'display':'block'});
    	$('#downBtnRight').css({'display':'block'});
        rightTargetDown = $('.scrollerContentRight').position().top;
		rightTargetUp = ($('.scrollerContentRight').position().top)-(scrollerHeightRight-470);
        scrollspeedRight = scrollspeedRight*(((scrollerHeightRight-470)/200)+1);
    }

}

function scroll(el, target, speed){

    $(el).animate({
        top: target
      }, speed, 'linear', function() {
        // Animation complete.
    });
}


function detectImageLoads(){
	var numImages = $('img').length;
    var loadedImages = 0;
    //alert(numImages);
    $('img').load(function(){
    	loadedImages++;
        //alert(loadedImages);
        if(loadedImages==numImages){
        	//alert('All images loaded');
            //setColumnHeights();
            setPageScrollers();
        }
    });
}

function setColumnHeights(){
	var sHeight = $('#sidebar section').height();
    var cHeight = $('#content section').height();
    
    //alert(sHeight);
    //alert(cHeight);
    
    if(sHeight>cHeight){
    	$('#content > section').height(sHeight-40);
    }
    if(cHeight>sHeight){
    	$('#sidebar > section').height(cHeight+40);
    }
}


function scaleImage(img){
	
   //reset image scale
   $(img).css({'width':'','height':''});
   
   var scale = '';
   
	if($(img).width()>$(img).height()){

        if($(img).width()>$(window).width()){
        	
        	scale = ($(window).width())/($(img).width());
            var newWidth = Math.round($(img).width()*scale);
            $(img).width(newWidth);
            
        }else if($(img).height()>$(window).height()){
        	scale = ($(window).height())/($(img).height());

            var newWidth = Math.round($(img).width()*scale);

            $(img).width(newWidth);
            
        }else{
        	//Image is neither tall nor wider than the screen so scale it naturally

            $(img).width($(img).width());
            $(img).height($(img).height());
        }
        
    }else{
    	
    	if($(img).height()>$(window).height()){
            scale = ($(window).height())/($(img).height());
            var newWidth = Math.round($(img).width()*scale);
            $(img).width(newWidth);

        }else if($(img).width()>$(window).width()){
            scale = ($(window).width())/($(img).width());
            var newWidth = Math.round($(img).width()*scale);
            $(img).width(newWidth);

        }else{
        	//Image is neither tall nor wider than the screen so scale it naturally
            $(img).width($(img).width());
            $(img).height($(img).height());
        }
    }
    
    //Position the image centrally
    if($(img).width() < $(window).width()){
    	diff = $(window).width()-$(img).width();
       //alert(diff);
        $(img).css({'left':diff/2+'px'});
    }
}
	
function gallery(title, text, imgs, id){
	var deviceAgent = navigator.userAgent.toLowerCase();


	var agentID = deviceAgent.match(/(iphone|ipod|ipad|android|bb10|blackberry|webos|iemobile|playbook|xoom|p160u|nexus|touch)/);
	if (agentID) {
 
        // redirect to gallery
        window.location = "iGallery.php?id="+id ;
        
	}else{
		$(document).scrollTop(0);
		galleryActive = true;
		images = imgs.split(",");
		numImages = images.length-2;

		var html = '<div class="galleryDiv" style="display:none;" ><div class="close"><img src="http://www.kingstonshaw.com/images/gallery_close.png" onclick="closeGallery(this)" /></div><div id="loader">Loading, please wait...</div><img id="btnPrev" src="http://www.kingstonshaw.com/images/btn_gallery_prev.png" /><img id="galleryMain" src="http://www.kingstonshaw.com/resizeCrop/resizeCrop.php?src=../photos/'+images[0]+'&w=1600&fltr[]=wmi|../images/watermark.jpg|BR|50|5" style="visibility:hidden;" onLoad="startGallery()" /><img src="http://www.kingstonshaw.com/images/btn_gallery_next.png" id="btnNext" /><div id="galleryTray"><div class="galleryCopy"><p><b>'+title+'</b><br /><strong>'+text+'</strong></p></div><div class="galleryThumbs"><div><b>Click a thumbnail for an enlargement</b></div>';

        for(var i in images){
            if(images[i]!="," && images[i]!=""){
                html += '<img src="http://www.kingstonshaw.com/resizeCrop/resizeCrop.php?src=../photos/'+images[i]+'&w=60&h=40&zc=1" width="60" onclick="$(function(){showImage('+i+');});" />';
            }
        }
        html += '</div></div></div>';

		$(html).appendTo(document.body);

		startButtons();
		targetY = $(window).height()-90;

		$('.galleryDiv').fadeIn(500, function (){hideTray();});

	}
}

$('#galleryTray').live('mouseleave',function(){
	hideTray();
});

$(document).mousemove(function(event) {
      if(event.pageY>targetY && trayActive==false){ 
        //show tray
        showTray();
      }
});

function hideTray(){
	if(galleryActive==true && trayHidden == false){		
		$('#galleryTray').animate({'margin-bottom':'-90px'}, 500, function(){
        	trayHidden = true; 
            trayActive = false;
           });
       }
}
function showTray(){
	trayActive = true;
	if(galleryActive==true && trayHidden == true){
        $('#galleryTray').animate({'margin-bottom':'0px'}, 500, function(){
        	trayHidden = false;
        });
    }
}

function startButtons(){
	var wHeight = $(window).height();
    wHeight = wHeight/2 - 40;
    $('#btnPrev, #btnNext').css({'margin-top':wHeight+'px'});
    setNav(0);
}
function closeGallery(gal){
	galleryActive = false;
	$(gal).parents('div').fadeOut(500, function(){
    	$(gal).parents('div').remove();
    });
    $('body').css({'overflow':'scroll'});
}


$("#btnPrev").live("click", function() {
    showImage(prev);
});

$("#btnNext").live("click", function() {
    showImage(next);
});

function showImage(i){
    setNav(i);
    newSRC = 'http://www.kingstonshaw.com/resizeCrop/resizeCrop.php?src=../photos/'+images[i]+'&w=1600&fltr[]=wmi|../images/watermark.jpg|BR|50|5';
    
    $('#galleryMain').fadeOut(200, function(){
    	$(this).css({'visibility':'hidden'});
        $('#loader').css({'display':''});
        $(this).attr('src', newSRC);
        $(this).load(function(){
        	$(this).css({'visibility':'visible'});
            $(this).fadeIn(200,function(){
                //do nothing
            });
        });
        
    });
		
}

function setNav(i){
		next = i+1;
        prev = i-1;
        
        if(prev<1){
        	prev = numImages;
        }
        if(next>numImages){
        	next = 0;
        }       
}

function startGallery(){
	$('#loader').css({'display':'none'});
	scaleImage('#galleryMain');
    $('#galleryMain').css({'display':'none','visibility':'visible'});
    $('#galleryMain').fadeIn(500, function (){});
    $('body').css({'overflow':'hidden'});
}