$(document).ready(function () {
    
    $("#tabs").tabs({
		ajaxOptions: {
			error: function(xhr, status, index, anchor) {
				$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
			}
		}
	});
	$("#tabs").bind("tabsshow", function(event, ui) {
        var b = ''+ui.tab+'';
        var temp = new Array();
        temp = b.split('#');
        startJS(temp[1]);
    });
    
    var countWalls = $('.wallpaper').length;
    number = 1;
    
    $('#prev').click(function() {
        if(number > 1){number = number - 1;}
        nextNumber = number + 1;
        $('.n'+nextNumber).fadeTo('slow', 0, function(){
            $(this).hide();
            $(this).fadeTo('slow', 1);
            $('.n'+number).fadeIn(500);
        });
        if(number == 1){
            $(this).html('<img src="./img/left-inactive.png" alt="" />');
        }else{
            $('#next').html('<img src="./img/right.png" alt="" />');
        }   
    });

    $('#next').click(function() { 
        if(number < countWalls){number = number + 1;}
        prevNumber = number - 1;
        $('.n'+prevNumber).fadeTo('slow', 0, function(){
            $(this).hide();
            $(this).fadeTo('slow', 1);
            $('.n'+number).fadeIn(500);
        });
        if(number == countWalls){
            $(this).html('<img src="./img/right-inactive.png" alt="" />');
        }else{
            $('#prev').html('<img src="./img/left.png" alt="" />');
        }    
    });
    
    

});  

	function startJS (year){
        
    	ulWidth = $('#'+year+' .sliderGallery ul li').length * 220 + 'px';
    	
        $('#'+year+' .sliderGallery ul').css('width', ulWidth);
        container = $('#'+year+' div.sliderGallery');
        ul = $('ul', container);
        itemsWidth = ul.innerWidth() - container.outerWidth();
        container.css('overflow', 'hidden');  // move auto to noscript style to avoid flicker
        $('.slider', container).slider({
            min: 0,
            max: itemsWidth,
            handle: '.ui-slider-handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });
        $('.btn-left').click(function(){
            var elValue = $('.slider', container).slider('option', 'value');
            if(elValue > 0) {
                elValue = elValue - 220;
                if(elValue < 0) {elValue = 0;}
                $('#'+year+' .sliderGallery .slider').slider('value', elValue);
                $('#'+year+' .sliderGallery ul').animate({'left' : elValue * -1}, 500);
            }
        });
        $('.btn-right').click(function(){
            var elValue = $('.slider', container).slider('option', 'value');
            if(elValue < itemsWidth) {
                elValue = elValue + 220; 
                if(elValue > itemsWidth) {elValue = itemsWidth;}
                $('#'+year+' .sliderGallery .slider').slider('value', elValue); 
                $('#'+year+' .sliderGallery ul').animate({'left' : elValue * -1}, 500);
            }
        });
        $('span.end').click(function(){
            var elValue = $('.slider', container).slider('option', 'value');
            elValue = itemsWidth;
            $('#'+year+' .sliderGallery .slider').slider('value', elValue); 
            $('#'+year+' .sliderGallery ul').animate({'left' : elValue * -1}, 500);
        });
        $("span.start").click(function(){
            var elValue = $('.slider', container).slider('option', 'value');
            elValue = 0;
            $('#'+year+' .sliderGallery .slider').slider('value', elValue); 
            $('#'+year+' .sliderGallery ul').animate({'left' : elValue * -1}, 500);
        });    
             
        
        $('#'+year+' .sliderGallery a.show').colorbox(
            {
            html: function(){
            
            var c = $(this).attr('href');
            var d = new Array();
            d = c.split('/2');
            url = '2' + d[1];
            if(url == '2undefined'){url = $(this).attr('href');}
            return '<div class="coffee"><h2><img src="./img/titles/'+url+'.png" alt="./img/titles/'+url+'.png" /></h2><img src="./img/serie/'+url+'.jpg" /></div>'
            },
            rel:'group2-'+year,
            width: '614px',
            height: '400px'
        });
        
        $('#'+year+' .sliderGallery a.zoom').colorbox(
            {
            html: function(){
            var c = $(this).attr('href');
            var d = new Array();
            d = c.split('/2');
            var url = '2' + d[1];
            if(url == '2undefined'){url = $(this).attr('href');}
            return '<div class="coffee"><h2><img src="./img/titles/'+url+'.png" alt="./img/titles/'+url+'.png" /></h2><img src="./img/serie/'+url+'.jpg" /></div>'
            },
            rel:'group3-'+year,
            width: '614px',
            height: '400px'
        }); 
        
        $('#'+year+' .gallery a').colorbox(
            {
            inline: true,
            rel:'group4-'+year,
            width: '614px',
            height: '454px'
        });
        
	
     }