var clickTab = function (index, tabbedBox) {
  //alert(index);
  $('li.active',tabbedBox).removeClass('active');
  $('li',tabbedBox).eq(index).addClass('active');
  
  $('div.tab div.content', tabbedBox).hide();
  $('div.tab div.content', tabbedBox).eq(index).show();
}

// timing class allowing play/pause behavior
function Timer(callback, delay) {
    var timerId;

    this.pause = function() {
        window.clearInterval(timerId);
    };

    this.resume = function() {
        timerId = window.setInterval(callback, delay);
    };

    this.resume();
}

$(document).ready(function () { 

	// init boxes
	
	$.each($('div.tabbed-box'), function (index, value) {
	
		var tabbedBox = value;
		//$(tabbedBox).hide();
		
		var tabs = $('div.tab div.title', tabbedBox);	
		$(tabs).hide();
		
		var contents = $('div.tab div.content', tabbedBox);
		$(contents).hide();
		$(contents).eq(0).show();
		
		// create tabs
		var ul = $('<ul class="tabs"></ul>');
		for (var i = 0; i < $(tabs).length; i++)
		{
			var li = $('<li><span class="l"></span>'+$(tabs[i]).html()+'<span class="r"></span></li>');
			li.click(function () {
			  var index = $(this).index();
		    clickTab(index, tabbedBox);
			});
			ul.append(li);
		}
		
		$(tabbedBox).prepend(ul);
		$('li:first', ul).addClass('active');
		
		if ($(tabbedBox).hasClass('rotate')) {
			// start rolling
			var timer = new Timer(function () {
				var currentIndex = $('li.active', tabbedBox).index();
				var len = $('div.tab div.title', tabbedBox).length;
				
				var index = (currentIndex + 1) % len;
				
				clickTab(index, tabbedBox);
			}, 5000);
			// stop rolling within mouseover state
			$(tabbedBox).mouseover(function() {timer.pause()});
			$(tabbedBox).mouseout(function() {timer.resume()});      
      
    }
	});

	// init sliders

	$.each($('ul.slider'), function (index, value) {
	   	
	   	var slider = value;
	   	
	   	var leftBtn = $('span.l', slider);
	   	var rightBtn = $('span.r', slider);
	   	
	   	var solid = $('div.solid', slider);
	   	
	   	var initLeft = solid.position().left;
	   	
		function onLeftBtnClick() {
	   		var left = solid.position().left;
	   		
	   		var zbyva = -left+initLeft;
	   		
			leftBtn.unbind("click");
	   		
			solid.animate({ 
			    "left": "+="+Math.min(zbyva, 200)+"px"
			}, 500, function () {
			   	leftBtn.click(function () {
					onLeftBtnClick();
				});
			} );
		};   
		
		function onRightBtnClick() {
	   		var left = solid.position().left;   
	   		
	   		var zbyva = $('li:last', slider).position().left + solid.position().left + $('li:last', slider).width() - $(slider).width(); 
	   		
			rightBtn.unbind("click");
			
			solid.animate({ 
			    "left": "-="+Math.min(zbyva, 200)+"px"
			}, 500, function () {  
			   	rightBtn.click(function () {
				   onRightBtnClick();
				});
			});
		}
		   	   	
	   	leftBtn.click(function () {
			onLeftBtnClick();
		});
	   	rightBtn.click(function () {
		   onRightBtnClick();
		});
	   	
	});
	
	
	$.each($('p.k4-box'), function (index, value) {
	    $('span.desc span', this).linkify();
	    $('span.desc span a', this).each(function () {
        var c = $(this).text();
        if (c.length > 30) {
          var b = c.substring(0, 16);
          var e = c.substr(c.length - 10, 10);
          $(this).text(b+'...'+e);
        }
      });
	    $(this).mouseover(function (){
	       if ($('span.desc span', this).text().length > 0)
	       {
            $(this).addClass('over');   
         }                       
      });
	    $(this).mouseout(function (){
        $(this).removeClass('over');                          
      });
      $(this).click(function () {
        location.href='http://suuk.cz/k4';
      });
	});
	
	$.each($('div.entry a img.alignleft, div.entry a img.alignright'), function (index, value) {
	   var title = $('<div style="position: absolute; display: block; background-color: #444444"><p>'+$(this).attr('title')+'</p></div>');
	   var p = $(this).parent();
     p.css('position','relative');
     //p.css('display', 'block');
     p.width($(this).width());
     
     var h = ($(this).height() + 28);
     p.height(h);
	   p.append(title);
	   
	   p.css('margin', '10px');
	   //p.css('clear', 'both');
	   
	   $(this).css('margin', 0);
	   
     title.css('top', '-10px');
     title.css('width', $(this).width());
     title.css('height', '28px');
     title.css('left', 0); 
        
     $('p', title).css('padding', '5px');
     $('p', title).css('margin', '0px');
     $('p', title).css('color', '#ffffff');
     
	   if ($(this).attr('align') == 'left') { 
          p.css('float', 'left');   
          p.css('clear', 'both');        
          title.css('top', $(this).height());
     }
	   if ($(this).attr('align') == 'right') { 
          p.css('float', 'right'); 
          p.css('clear', 'both');     
          title.css('top', $(this).height());
      }
	   
  });  
});