$(document).ready(function(){

	var Tabs = {
		'<img border="0" src="pages/1/1.png"/>'	: 'pages/1/1.html',
		'<img border="0" src="pages/1/2.png"/>'	: 'pages/1/2.html',
		'<img border="0" src="pages/1/3.png"/>'	: 'pages/1/3.html',
		'<img border="0" src="pages/1/4.png"/>'	: 'pages/1/4.html'
	}
	
	var Tabs2 = {
		'<img border="0" src="pages/2/1.png"/>'	: 'pages/2/1.html',
		'<img border="0" src="pages/2/2.png"/>'	: 'pages/2/2.html',
		'<img border="0" src="pages/2/3.png"/>'	: 'pages/2/3.html',
		'<img border="0" src="pages/2/4.png"/>'	: 'pages/2/4.html'
	}

	var Tabs3 = {
		'<img border="0" src="pages/3/1.png"/>'	: 'pages/3/1.html',
		'<img border="0" src="pages/3/2.png"/>'	: 'pages/3/2.html',
		'<img border="0" src="pages/3/3.png"/>'	: 'pages/3/3.html',
		'<img border="0" src="pages/3/4.png"/>'	: 'pages/3/4.html'
	}
	
	var Tabs4 = {
		'<img border="0" src="pages/4/1.png"/>'	: 'pages/4/1.html',
		'<img border="0" src="pages/4/2.png"/>'	: 'pages/4/2.html',
		'<img border="0" src="pages/4/3.png"/>'	: 'pages/4/3.html',
		'<img border="0" src="pages/4/4.png"/>'	: 'pages/4/4.html'
	}
	

	var colors = ['blue','green','red','orange'];
	
	
	var topLineColor = {
		blue:'lightblue',
		green:'lightgreen',
		red:'red',
		orange:'orange'
	}
	
	/*1-------------------------------------------------------------------------------------------------*/
	
	
	var z=0;
	$.each(Tabs,function(i,j){
	
		var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
		
		
		tmp.find('a').data('page',j);
		
		
		$('ul.tabContainer').append(tmp);
	})


	var the_tabs = $('.tab');
	
	the_tabs.click(function(e){
	
		var element = $(this);
		
		
		if( element.find('#overLine').length) return false;
		

		var bg = element.attr('class').replace('tab ','');
		$('#overLine').remove();
		
		$('<div>',{
			id:'overLine',
			css:{
				display:'none',
				width:element.outerWidth()-2,
				background:topLineColor[bg] || 'white'
			}}).appendTo(element).fadeIn('slow');
		
		
		if(!element.data('cache'))
		{	
			$('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

			$.get(element.data('page'),function(msg){
				$('#contentHolder').html(msg);
				
				element.data('cache',msg);
			});
		}
		else $('#contentHolder').html(element.data('cache'));
		
		e.preventDefault();
	})
	
//the_tabs.eq(0).click();	
	
	/*2-------------------------------------------------------------------------------------------------*/
		
	var z=3;
	$.each(Tabs2,function(i,j){
		var tmp = $('<li><a href="#" class="tab '+colors[(z--%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
		tmp.find('a').data('page',j);
		$('ul.tabContainer2').append(tmp);
	})
	
	var the_tabs2 = $('.tab');
	
	the_tabs2.click(function(e){
		var element = $(this);
		
		if(element.find('#overLine2').length || element.find('#overLine').length ) return false;
		
		var bg = element.attr('class').replace('tab ','');

		$('#overLine2').remove();
		
		$('<div>',{
			id:'overLine2',
			css:{
				display:'none',
				width:element.outerWidth()-2,
				background:topLineColor[bg] || 'white'
			}}).appendTo(element).fadeIn('slow');
		
		if(!element.data('cache'))
		{	
			$('#contentHolder2').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

			$.get(element.data('page'),function(msg){
				$('#contentHolder2').html(msg);
				
				element.data('cache',msg);
			});
		}
		else $('#contentHolder2').html(element.data('cache'));
		
		e.preventDefault();
	})	

	
	/*3-------------------------------------------------------------------------------------------------*/
	
	var z=0;
	$.each(Tabs3,function(i,j){
		var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
		
		tmp.find('a').data('page',j);
		
		$('ul.tabContainer3').append(tmp);
	})
	
	var the_tabs = $('.tab');
	
	the_tabs.click(function(e){
		var element = $(this);
		
		if(element.find('#overLine3').length || element.find('#overLine2').length || element.find('#overLine').length ) return false;
		
		var bg = element.attr('class').replace('tab ','');

		$('#overLine3').remove();
		
		$('<div>',{
			id:'overLine3',
			css:{
				display:'none',
				width:element.outerWidth()-2,
				background:topLineColor[bg] || 'white'
			}}).appendTo(element).fadeIn('slow');
		
		
		if(!element.data('cache'))
		{	
			$('#contentHolder3').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

			$.get(element.data('page'),function(msg){
				$('#contentHolder3').html(msg);
				
				element.data('cache',msg);
			});
		}
		else $('#contentHolder3').html(element.data('cache'));
		
		e.preventDefault();
	})	

		
	/*4-------------------------------------------------------------------------------------------------*/
	
	var z=3;
	$.each(Tabs4,function(i,j){
		var tmp = $('<li><a href="#" class="tab '+colors[(z--%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
		
		tmp.find('a').data('page',j);
		
		$('ul.tabContainer4').append(tmp);
	})
	
	var the_tabs4 = $('.tab');
	
	the_tabs4.click(function(e){
		var element = $(this);
		
		if(element.find('#overLine4').length || element.find('#overLine3').length || element.find('#overLine2').length || element.find('#overLine').length ) return false;
		
		var bg = element.attr('class').replace('tab ','');

		$('#overLine4').remove();
		
		$('<div>',{
			id:'overLine4',
			css:{
				display:'none',
				width:element.outerWidth()-2,
				background:topLineColor[bg] || 'white'
			}}).appendTo(element).fadeIn('slow');
		
		
		if(!element.data('cache'))
		{	
			$('#contentHolder4').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

			$.get(element.data('page'),function(msg){
				$('#contentHolder4').html(msg);
				
				element.data('cache',msg);
			});
		}
		else $('#contentHolder4').html(element.data('cache'));
		
		e.preventDefault();
	})	


	
	
	
});