$(document).ready(function() {
    
	// Show Y-Scrollbar
	if(!$.browser.msie || ($.browser.msie && jQuery.browser.version.substr(0,1) >= 8)) { $('body').css('overflow-y', 'scroll');	}
    $('a.external').attr('target', '_blank');

	///////////////////////////////// WELCOME ACC /////////////////////////////////
    var opts = {
        duration: 400,
        fadeDuration: 200,
        minWidth: 200,
        maxWidth: 459,
        tout: null
    }
    
    _over = function(e) {
            window.clearTimeout(opts.tout);
            opts.tout = null;

            if ($(this).hasClass('active'))
                return false;
            
            $(this).siblings(':animated, .active').each(function() {
                $(this).stop().animate({
                    width: opts.minWidth
                }, {
                    duration: opts.duration
                });
                $(this).find('a.fade').stop().animate({ opacity: 0 }, {
                    duration: opts.fadeDuration,
                    complete: function(){
                        $(this).parent('li').removeClass('active');
                        $(this).animate({ opacity: 1 }, opts.fadeDuration);
                    }
                });
            });
            
            $(this).stop().animate({
                width: opts.maxWidth
            }, {
                duration: opts.duration
            });
            $(this).find('a.fade').stop().animate({ opacity: 0 }, {
                    duration: opts.fadeDuration,
                    complete: function(){
                        $(this).parent('li').addClass('active');
                        $(this).animate({ opacity: 1 }, opts.fadeDuration);
                    }
                });
        }
    
    $('.welcomeCon ul li').hover(
        _over,
        function() {
            opts.tout = window.setTimeout(function() {
                $('.welcomeCon ul li:first').trigger('mouseover');
            }, 250)
        }
    );
	
	// detailpic AJAX loader
	function ajxLoadDetailImage(ajxDetailId,dir,cat)
	{
		$.ajax({
		  url: "wp-content/themes/xenon5_default/x5_portfolio_dyn_ajax_details.inc.php?q="+ajxDetailId+"&dir="+dir+"&cat="+cat,
		  cache: false,
		  dataType: 'json',
		  success: function(data){
			if(!data.exist) {   
				$('#product-01-'+data . id+' .detailsHeader').css('background-image', 'url('+data . titlepic+')');
				$('#product-01-'+data . id+' .detailImage img').attr('src',data . detailpic);
			}
		  }
		});			
	}  
	// detailpic AJAX loader     
	 
	// replace scrollbar
		if($('div#scroller').length) {
			jspTrackHovered = false;
			$('div#scroller').show().jScrollPane({showArrows: false});
			$('div.jspTrack').hover(function() {
				jspTrackHovered = true;
			},function(){
				jspTrackHovered = false;
			});
		}

	// Size of Details-Wrapper
		$('ul#wrapProducts').children('li').each(function() {
			var countProducts = $(this).children('ul').children('li').length;
			$(this).children('ul').css('width', countProducts*555 + 'px');
		});

	//Portfolio
	setMediaType();	
	
	function setMediaType() {
		i = 1;
		countLi = $('#scroller li').length;
		liProScroll = 5;
		liSize = 100;
		position = 5;
		move = 5 * liSize * (-1);
		var currentImage = $('#scroller div.jspPane ul li.selected').index()+1;
	}

	// Next
	$('ul.navDetails li.next a').click(function(){									   
		var countImages = $('#scroller li').length;
		currentImage = $('#scroller div.jspPane ul li.selected').index()+1;

		currentImageRel = $('#scroller div.jspPane ul li.selected a').attr('rel');
		currentCatRel = $('#scroller div.jspPane ul li.selected a img').attr('rel');		
		ajxLoadDetailImage(currentImageRel.replace("#product-01-", ""),'next',currentCatRel);
		
		if( currentImage < countImages ){
			if((currentImage % 5) == 0 && currentImage != 0){
				if(position < countImages ){
					$('#scroller div.jspPane').animate({
						top: '+='+move
					}, 800);
					
					$('#scroller div.jspDrag').animate({
//						top: '-='+(move/2)
						top: '+='+((liProScroll*liSize)/((countLi*liSize)/(liProScroll*liSize)))
					}, 800);			
					position = position + liProScroll;
					i++;
				}
			}
			$('#scroller ul li').eq(currentImage-1).removeClass('selected');
			$('#scroller ul li').eq(currentImage).addClass('selected');
		}
		return false;
	});
	
	// Prev
	$('ul.navDetails li.prev a').click(function(){									   
		var countImages = $('#scroller li').length-1;
		currentImage = $('#scroller div.jspPane ul li.selected').index();
		currentImageRel = $('#scroller div.jspPane ul li.selected a').attr('rel');
		currentCatRel = $('#scroller div.jspPane ul li.selected a img').attr('rel');		
		ajxLoadDetailImage(currentImageRel.replace("#product-01-", ""),'back',currentCatRel);
		
		if( currentImage > 0 ){
			if((currentImage % 5) == 0 && currentImage != 0){
				if(position != liProScroll ){
					$('#scroller div.jspPane').animate({	 
						top: '-='+move
					}, 800, function() {
						// END 
					});

					$('#scroller div.jspDrag').animate({	 
//						top: '-='+(-(move/2))
						top: '-='+((liProScroll*liSize)/((countLi*liSize)/(liProScroll*liSize)))
						}, 800, function() {
						// END 
					});					
					position = position - liProScroll;
					i--;
				}
			}
			$('#scroller ul li').eq(currentImage).removeClass('selected');
			$('#scroller ul li').eq(currentImage - 1).addClass('selected');
		}
		return false;
	});
		
		// Details-Sites-Navigation
		$('ul.navDetails li a').click(function() {
			var target = $(this).attr('rel');
			var positionDet = $('li' + target).position();
			var container = $('li' + target).parent('ul');

			$(container).stop().animate({
				left: '-'+positionDet.left+'px'
			}, 300, 'swing');
			return false;
		});	
		
		// Scroller-Click-Update
		$('#scroller div.jspPane a').bind("click",(function() {



			$('#scroller div.jspPane li').removeClass('selected');
			$(this).parent().parent('li').addClass('selected');
			currentImage = $('#scroller div.jspPane ul li.selected').index()+1;

/**/			
if((currentImage % 5) != 0)
{
	position = currentImage + (5-(currentImage % 5));
}
else
{
	position = currentImage;
}

tmppos = $('#scroller div.jspPane ul li.selected').position();
selectedPos = $('#scroller div.jspPane ul li.selected').offset();
selectedTop = tmppos.top;
scrollerPos = $('#scroller').offset();
jspPaneUl = $('#scroller div.jspPane ul').offset();
moveOffset = selectedPos.top - scrollerPos.top;


move = (liProScroll*liSize)*(position/5)*(-1)
move = move+moveOffset;

//move = selectedTop+moveOffset;

console.log("selectedTop.top: "+selectedTop+" | selectedPos.top: "+selectedPos.top+" | scrollerPos.top: "+scrollerPos.top+" | move: "+move+" position: "+position+" jspPaneUl: "+jspPaneUl);
console.log(selectedPos.top);


//alert(position);
//alert('moveoff: '+moveOffset+',move: '+move);
//alert(position);
	
	
/**/			
			var targetSC = $(this).attr('rel');
			var positionDet = $('#details li' + targetSC).position();
			var container = $('#details li' + targetSC).parent('ul');

			$(container).stop().animate({
				left: '-'+positionDet.left+'px'
			}, 300, 'swing');
		
			currentCatRel = $('#scroller div.jspPane ul li.selected a img').attr('rel');		
			ajxLoadDetailImage(targetSC.replace("#product-01-", ""),'',currentCatRel);
			
/*			return false;*/
			
			return pageTracker._trackEvent("scrollerclicktest567586");
		}));
		
		// galerie
		if($('.detailImage a').length > 0) {
			$('.detailImage a').attr('rel', 'colorbox[galerie]');
		}
		if($('a[rel="colorbox[galerie]"]').length > 0) {
			$('a[rel="colorbox[galerie]"]').each(function() {
				if(!$(this).hasClass('swf')) {
					$(this).colorbox({
						maxWidth: '90%'
					});
				} else {
					var size = $(this).attr('rev').split(',');
					
					$(this).colorbox({
						iframe:true, 
						innerWidth:size[0], 
						innerHeight:size[1]
					});
				}
			});
		}
		
		$('#scroller ul li').hover(function() {
			$(this).addClass('hover');	//IE6	
		}, function() { 		
			$(this).removeClass('hover'); //IE6
		});	
    
})