/**
 * @author: OK Internet <Grizvold>
 * 
 * How it works:
 * plugin takes all items with class .menu_btn (inside container .ok_tab_menu) 
 * and adds mouseover event on them. On this event appears relative element with class .menu_tab.
 * Relative elements are those, which have the same position in arrays of items .menu_btn and .menu_tab.
 * 
 */
function okTabMenu(menu_started)
{	

	this.menu_started = menu_started; // if FALSE, will be started after first click on menu_btn
	
	//finding active tab
	if ( this.menu_started == true )
	{
		this.activeBtn = $('.active_btn', $('.menu_buttons')).get(0);
	}
	this.activeTab = $('.menu_tab:visible').get(0);
	this.isChanging = false;
	
	this.initMenu();
}

okTabMenu.prototype.initMenu = function()
{
	var _this = this;

	var i = 0;
	/*вешаем на кнопки событие для смены таба*/
	for ( i=0; i<$('.ok_tab_menu .menu_btn').length; i++ )
	{		
		this.assignEventTo(i);
	}
	
	/*предзагружаем изображения меню*/
	for ( i=0; i<$('.active_btn', $('.menu_buttons')).length; i++ )
	{
		var imgPtr = $('img', $('.active_btn', $('.menu_buttons')).get(i));
		var preImg = new Image();
		preImg.name = imgPtr.attr('src');
		preImg.src = imgPtr.attr('src');
	}
	
	//увеличиваем размер активной кнопки в меню
	if ( this.menu_started == true )
	{
		var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 
		if ( is_chrome )
		{
			/*Fixing Google Chrome problem with loading images*/
			var activeImgPtr = $('img', this.activeBtn);
			var preImg = new Image();
			var _this = this;
			//preImg.name = activeImgPtr.attr('src');
			preImg.src = activeImgPtr.attr('src');
			preImg.onload = function(){
				activeImgPtr.width(this.width);
				activeImgPtr.height(this.height);
				_this.increaseSize(activeImgPtr);
			}
		}
		else
		{
			this.increaseSize($('img', this.activeBtn));
		}
	}
}

okTabMenu.prototype.assignEventTo = function(i)
{
	var _this = this;
	
	$('.ok_tab_menu .menu_btn').get(i).onclick = function()
	{
		if (_this.isChanging == false && $('.ok_tab_menu .menu_tab').get(i) != _this.activeTab )
		{
			_this.isChanging = true;
			
			/*restoring old active button*/
			if ( _this.menu_started == true )
			{
				_this.restoreSize($('img', _this.activeBtn));
			}
			else
			{
				_this.menu_started = true;
			}
						
			/*animating menu image*/
			_this.increaseSize($('img', this));
			_this.activeBtn = this;
			
			/*fading*/
			$(_this.activeTab).fadeOut(350);
			$($('.ok_tab_menu .menu_tab').get(i)).fadeIn(350, function() { _this.isChanging = false; });
			
			/*rolling*/
			//$(_this.activeTab).slideUp(350);
			//$($('.ok_tab_menu .menu_tab').get(i)).slideDown(350, function() { _this.isChanging = false; });
			
			_this.activeTab = $('.ok_tab_menu .menu_tab').get(i);
		}
	}
}

okTabMenu.prototype.increaseSize = function(imgPtr)
{
	imgPtr.addClass('active_btn');
	imgPtr.attr('originalWidth', imgPtr.width());
	imgPtr.attr('originalHeight', imgPtr.height());
	imgPtr.attr('originalImage', imgPtr.attr('src'));
	imgPtr.animate({ width: "+=" + imgPtr.attr('originalWidth') * 0.5, height: "+=" + imgPtr.attr('originalHeight') * 0.5 }, 100);
	imgPtr.attr('src', imgPtr.attr('rel'));
}

okTabMenu.prototype.restoreSize = function(imgPtr)
{
	imgPtr.removeClass('active_btn');
	imgPtr.attr('src', imgPtr.attr('originalImage'));
	imgPtr.animate({ width: imgPtr.attr('originalWidth'), height: imgPtr.attr('originalHeight') }, 100);
	imgPtr.attr('src', imgPtr.attr('originalImage'));
}