/*
Customised Navigation Pane based on jQuery-UI's 'slider' plugin.

Initial size of 'totalwidth' = fix to account for spacing etc so the total width 
is correct and the slider is all on one line

start_adjust = distance before slider inital position changes 
(ie. so it starts at the beginning when the 1st product is selected, where it 
wouldn't due to the 'category' place holder being present)

end_adjust = distance before end of slider where selected products case slider 
to go to 100% and content to go to the 'end' (to stop slider going further than it should)
*/

    	
$(function() {

var totalwidth = 7;
var start_adjust = 272;
var end_adjust = 786;


$.fn.resetwidth = function() {
        var totalwidth = 7;
    //    var totalwidth = 10;


        $('.scroll-content-item').each(
                    function(){ 
                      if($(this).css("display") == 'block'){
                        totalwidth = totalwidth + $(this).width();
                      } 
                    }
        );        

        $('.shop_nav_cat_sep').each(
                    function(){
                     if($(this).css("display") == 'block'){
                        totalwidth = totalwidth + $(this).width();
                     }
                    }
        );               
        $('.shop_nav_pro_sep').each(
                    function(){
                      if($(this).css("display") == 'block'){            
                        totalwidth = totalwidth + $(this).width();
                      }
                    }
        );  
     
              
        $('.scroll-content').width(totalwidth);
//alert(totalwidth);
        totalwidth = 0;
}

$.fn.resetwidthSpecial = function(excludeclass, minuswidth) {

        var totalwidth = 100 - minuswidth;

  


        $('.scroll-content-item').each(
                    function(){ 
                      if($(this).css("display") == 'block'){
                          if($(this).hasClass(excludeclass)){
                          
                            if($(this).hasClass('wowslides_expanded')){
                            
                               totalwidth = totalwidth + $(this).width();
                            
                            }
                          
                          }else{
                        totalwidth = totalwidth + $(this).width();
                        }
                      } 
                    }
        );        

        $('.shop_nav_cat_sep').each(
                    function(){
                     if($(this).css("display") == 'block'){
                        totalwidth = totalwidth + $(this).width();
                     }
                    }
        );               
        $('.shop_nav_pro_sep').each(
                    function(){
                      if($(this).css("display") == 'block'){            
                        totalwidth = totalwidth + $(this).width();
                      }
                    }
        );  
     
              
        $('.scroll-content').width(totalwidth);



return totalwidth;
}

$.fn.resetwidth();

var before_active_product_totalwidth = 0;
$('.before_active_product').each(function(){
	before_active_product_totalwidth =  before_active_product_totalwidth + $(this).width();
});





//scrollpane parts
var scrollPane = $('.scroll-pane');
var scrollContent = $('.scroll-content');

//build slider
var scrollbar = $(".scroll-bar").slider({
	//min: 0,
	//max: 100,
	
	slide:function(e, ui){
		if(
			scrollContent.width() > scrollPane.width() ){ scrollContent.css('left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); }
		else {
			scrollContent.css('left', 0);
		}
	}
});


$.fn.moveScrollPane = function(totwidth,widthbeforecat) {
	//Work out where position of slider should be
	var gotopx = widthbeforecat;

	var gotopercent = ( widthbeforecat / totwidth) * 100;

	scrollContent.css('left','-' + gotopx +'px');
  	scrollbar.slider("value", gotopercent);
}
  

  	
		//append icon to handle
		var handleHelper = scrollbar.find('.ui-slider-handle').mousedown(function(){
			scrollbar.width( handleHelper.width() );
		}).mouseup(function(){
			scrollbar.width( '100%' );
		}).append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>').wrap('<div class="ui-handle-helper-parent"></div>').parent();
		
		//change overflow to hidden now that slider handles the scrolling
		scrollPane.css('overflow','hidden');
		
		//size scrollbar and handle proportionally to scroll distance
		function sizeScrollbar(){
			var remainder = scrollContent.width() - scrollPane.width();
      var proportion = remainder / scrollContent.width();
			var handleSize = scrollPane.width() - (proportion * scrollPane.width());
			scrollbar.find('.ui-slider-handle').css({
				width: handleSize,
				'margin-left': -handleSize/2
			});
			handleHelper.width('').width( scrollbar.width() - handleSize);
		}
		
		//reset slider value based on scroll content position
		function resetValue(){
			var remainder = scrollPane.width() - scrollContent.width();
			var leftVal = scrollContent.css('left') == 'auto' ? 0 : parseInt(scrollContent.css('left'));
			var percentage = Math.round(leftVal / remainder * 100);
			scrollbar.slider("value", percentage);
		}
		
		//if the slider is 100% and window gets larger, reveal content
		function reflowContent(){
				var showing = scrollContent.width() + parseInt( scrollContent.css('left') );
				var gap = scrollPane.width() - showing;
				//alert(gap);
				if(gap > 0){
					scrollContent.css('left', parseInt( scrollContent.css('left') ) + gap);
				}
		}
		
		//change handle position on window resize
		$(window)
		.resize(function(){
				resetValue();
				sizeScrollbar();
				reflowContent();
		});
		
		//init scrollbar size
		setTimeout(sizeScrollbar,10);//safari wants a timeout
	
  
  

		$(".shop_nav_cat").click(function() {

			sliderWidth = $('.scroll-pane').width();
			
      //alert(sliderWidth);

        	$('.scroll-content').width('199999px');
        
			// Cat ID
			var currentId = $(this).attr('id');
			
			var previouslyexpandedwidth = 0;

			// Shrink all expanded Div which are not target
   /*     	$('.scroll-content-item').each(function(){  
				if($(this).hasClass("wowslides_" + currentId)){

				}else {
					if($(this).hasClass("wowslides_expanded")){	
						previouslyexpandedwidth = previouslyexpandedwidth + $(this).width();
						$(this).animate({ "width":"toggle", "opacity":"toggle" }, { duration: "slow" });
						$(this).removeClass('wowslides_expanded');
					}
				}
			});*/ 

			//$(".wowslides_expanded").animate({ 
			//"width": "toggle", "opacity": "toggle"
			//}, { duration: "slow" });		
			
			// Remove Class
			$(".wowslides_" + currentId).each(function(){
			    if($(this).hasClass("wowslides_expanded")){
			        
			      $(this).animate({ 
			      "width": "toggle", "opacity": "toggle"
			      }, { duration: "slow" });
			      
			      $(this).removeClass('wowslides_expanded');
			    }else{
			    
			      $(this).animate({ 
			      "width": "toggle", "opacity": "toggle"
			      }, { duration: "slow" });
			      
			      $(this).addClass('wowslides_expanded');
			    
			    }
			}); 


			resetValue();
			reflowContent();
			
			// work out distance before selected cat
			var contCounting = true;
			distancebefore = 0;
			
			$(".scroll-content-item").each(function(){
			    if(contCounting){
			        if($(this).hasClass("wowslides_" + currentId)){
			          contCounting = false;
			        }else{              
			          if($(this).css("display") == 'block'){             
			              if($(this).hasClass("wowslides_Icon_" + currentId)){
			                contCounting = false;
			              }else{                          
			                distancebefore = distancebefore + $(this).width();
			              }                  
			            }
			        }
			    }
			});


	
  			var resetWidth = 0;  			
      		resetWidth  =  $.fn.resetwidthSpecial("wowslides_" + currentId, previouslyexpandedwidth); 
            
			//resetValue();
			//reflowContent();
				
			//alert('resetWidth' + resetWidth);
			//alert('distancebefore' + distancebefore);				

      		$.fn.moveScrollPane(resetWidth,distancebefore);

      		resetWidth  =  $.fn.resetwidthSpecial("wowslides_" + currentId, previouslyexpandedwidth);
  			resetValue();
			reflowContent();    

		});	
 
              $(".productSelector").click(function(e) {
                  e.preventDefault();
                  
                  var productId = $(this).attr('id');
                  //alert(productId);
                  //if(productId.indexOf('_apps')==-1){
                    productId = productId.replace('productID_','');
                    //alert(productId);
                  //}else{//if it's application page, just resize the transparent popup window
                    //var shortproID = productId.substr(0,productId.length-5);
                    //productId = shortproID.replace('productID_','');
                    //alert(productId);
                    //$('#st_blanking').css('height','2000');
                  //}
                      
                
                $('.shop_active').removeClass('shop_active');
                $('#shop_active_' + productId).addClass('shop_active');
                
                //var position = $(this).position();
                  //left = position.left;
                  
                  //$('.scroll-content').animate({'left' : left * -1}, 900);
                  
                  //resetValue();
				          
                
 function reCufon(){
    Cufon.replace('.helveticaNeue', { fontFamily: 'HelveticaNeue' });
}               
                  
//$('#shop_productmain_container_inner').fadeOut("slow").load('/shop_repop.php?product_id=' + productId).fadeIn('slow');
$('#shop_productmain_container').fadeOut("slow").load('/shop_repop.php?product_id=' + productId).fadeIn('slow');                


 var toLoad = '/shop_repop.php?product_id=' + productId;
 $('#shop_productmain_container').fadeOut('fast',loadContent);
 $('#ajaxloader').fadeIn('normal');
Cufon.replace('.helveticaNeue', { fontFamily: 'HelveticaNeue' });

 
 if(gup('category')=='marketing_software_apps'){
        switch(navigator.userAgent){
           case 'MSIE 7.0': $('#ajaxloader').css('height','1600px');break;
           case 'MSIE 8.0': $('#ajaxloader').css('height','1400px');break;
           default:$('#ajaxloader').css('height','1380px');break;
        }       

 }


 function loadContent() {

        $('#shop_productmain_container').load(toLoad,'',showNewContent())
 } 
 
function hideLoader() {
        $('#ajaxloader').fadeOut('normal');
        // alert('hide');
        $.fn.initPopups();
 }
 function showNewContent() {
        $('#shop_productmain_container').fadeIn('fast');
        Cufon.replace('.helveticaNeue', { fontFamily: 'HelveticaNeue' });
        setTimeout(reCufon,550);
        setTimeout(hideLoader,600);
           
        
 }



//		setTimeout(reCufon,250);//timeouts!
//		setTimeout(reCufon,250);//timeouts!
 //   setTimeout(reCufon,250);//timeouts!
 //   setTimeout(reCufon,250);//timeouts!
 //   setTimeout(reCufon,250);//timeouts!
 //   setTimeout(reCufon,250);//timeouts!
//    setTimeout(reCufon,250);//timeouts!
//    setTimeout(reCufon,250);//timeouts!               			 
              Cufon.now()
              });
	});
	
	
function gup( name )//function to get current request variables in url
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}