squareTabs = {

	init: function(){
		squareTabs.tabs = $('.square-tabs > a');
		if(squareTabs.tabs.length > 0){squareTabs.initTabs();}
	},

	initTabs: function(){
		var o = this;
		this.tabs.each(function(){
			var id = $(this).attr('id').replace('tab-', '');
			this.tabId = id;
			var d = $('#dropdown-' + id);
			if(d.length > 0){
				this.hasDropdown = true;
				this.dropdown = d;
				this.dropdown.css({'display': 'none', 'minWidth': $(this).width() + 'px'});
				this.dropdown.find('.square-dropdown-box3').css({'minWidth': $(this).width() + 'px'});
				$('body').append(this.dropdown);
				this.dropdown.get(0).tab = $(this);
				this.dropdown.hover(function(){}, o.unhoverDropdown);
				this.dropdownBox = d.find('.square-dropdown-box3');
			}else{
				this.hasDropdown = false;
			}
		});
		this.tabs.hover(this.hoverTab, this.unhoverTab);
		this.tabsBox = $('.square-tabs');
	},

	hoverTab: function(e){
		if(!this.hasDropdown){return;}
		var el = $(this);
		var o = el.offset();
		var h = el.height();

		var box = squareTabs.tabsBox;
		var boxpos = box.offset();

		if(this.dropdown.css('display') == 'none'){
			this.dropdown.css({opacity: 0, display: 'block'});
			ddBoxWidth = this.dropdownBox.outerWidth();
			this.dropdown.css({opacity: 1, display: 'none'})
		}else{
			ddBoxWidth = this.dropdownBox.outerWidth();
		}

		var maxLeft = box.outerWidth() + boxpos.left - ddBoxWidth;

		var leftPos = Math.min(maxLeft, o.left);

		this.dropdown.css({top: (o.top + h) + 'px', left: leftPos + 'px'});
		this.dropdown.fadeIn(150);
		el.addClass('square-tab-active');
	},

	unhoverTab: function(e){
		if(!this.hasDropdown){return;}
		if(squareTabs.overElement(e, this.dropdown)){return;}
		squareTabs.hideDropdown(this.dropdown);
	},

	unhoverDropdown: function(e){
		if(squareTabs.overElement(e, this.tab)){return;}
		squareTabs.hideDropdown($(this));
	},

	hideDropdown: function(el){
		el.css('display', 'none');
		el.get(0).tab.removeClass('square-tab-active');
	},

	overElement: function(e, d){

		var mouseX = e.pageX;
		var mouseY = e.pageY;

		var offset = d.offset();
		var h = d.height();
		var w = d.width();

		if( mouseY >= offset.top && mouseY <= (offset.top + h) 
		 && mouseX >= offset.left && mouseX <= (offset.left + w) ){
			return true;
		}

		false;
	},

	tabs: null
}

$(document).ready(squareTabs.init);