/**
 * Note that we have to use window.onload because $(document).ready() fires before images are loaded
 * and ul.innerWidth() - container.outerWidth(); doesn't give the correct width because the width
 * of the UL hasn't expanded out until the images have finished rendering.
 */

jQuery.noConflict();
var $j = jQuery;
var gStep = 724;

/* for JQuery 1.3.2 - problem with handle not staying in box
window.onload = function () {	

	var container = $j('div.portfolio-nav');
    var ul = $j('ul', container);
    
    var itemsWidth = ul.innerWidth() - container.outerWidth();

    $j('.slider').slider({
        min: 0,
        max: itemsWidth + 20,        
        //handle: '.handle',        
    	// Taken out to avoid flashes when clicking on a portfolio item    	
        slide: function (event, ui) {
    		ul.css('left', ui.value * -1);    	
        },
    	stop: function (event, ui) {
            ul.animate({'left' : ui.value * -1}, 500);
        }
    });
    
	var container2 = $j('div.portfolio');
    var ul2 = $j('ul', container2);
    
    var itemsWidth2 = ul2.innerWidth() - container2.outerWidth();
    
    $j('.portfolioSlider').slider({
        min: 0,
        max: itemsWidth2,
        step: gStep,
        slide: function (event2, ui2) {            
            ul2.animate({'left' : ui2.value * -1}, 500);
        },
        change: function (event2, ui2) {            
            ul2.animate({'left' : ui2.value * -1}, 500);
        } 
    });

};*/

/* for JQuery 1.26 */
window.onload = function () {	

  $j('div.portfolio-nav').each(function () {
    var ul = $j('ul', this);
    var productWidth = ul.innerWidth() - $j(this).outerWidth();
    
    var slider = $j('.ui-slider', this).slider({ 
      handle: '.ui-slider-handle',
      min: 0, 
      max: productWidth + 20,      
      slide: function (ev, ui) {
        ul.css('left', '-' + ui.value + 'px');
      }, 
      stop: function (ev, ui) {
        //ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
    	ul.animate({'left' : ui.value * -1}, 500);
      }
    });
  });
  
  $j('div.portfolio').each(function () {
    var ul2 = $j('ul', this);
    var productWidth = ul2.innerWidth() - $j(this).outerWidth();
    
    var slider = $j('.portfolioSlider', this).slider({ 
      handle: '.portfolioSlider-handle',
      min: 0, 
      max: productWidth,      
       
      stop: function (ev, ui) {
        //ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
    	ul2.animate({'left' : ui.value * -1}, 500, 'linear');
      }
    });
  });
}
	


/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 */

/*
this.imagePreview = function(){	
	// CONFIG 		
	
	//yOffset = $("#preview").width() + 15;
	
	// these 2 variable determine popup's distance from the cursor
	// you might want to adjust to get the right result
		
	// END CONFIG 
	$("a.preview").hover(function(e){
		var img = new Image();
		img.src = this.rel;
		
		this.t = this.title;
		this.title = "";	
		//var c = (this.t != "") ? "<br/>" + this.t : "";
		
		$("body").append("<p id='preview'></p>");
				
		$("#preview")
			.css("top",(e.pageY - (img.height + 20)) + "px")
			.css("left",(e.pageX + 5) + "px");
						
		$("#preview").append("<img src='/img/"+ this.rel +"' alt='Image preview' />").fadeIn("fast");
	    },
		function(){
			this.title = this.t;	
			$("#preview").remove();
	    }
    );	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - ($("#preview img").height() + 20)) + "px")
			.css("left",(e.pageX + 5) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	imagePreview();
});
*/