<!-- Start Sub nav -->
<div class="subnavigation">
<div class="sw">
	<p class="sptitle">Item Mall</p>
</div>
</div>
<!-- End Sub nav -->

<!-- Start Content -->
<div class="content">
<div class="sw content">


<!-- Start Item shop catalog -->
<div class="c_container">

<!-- ERRORS -->
<!--<span class="notification success"><strong>&radic;</strong> You have successfully bought: Witch Hat (30 DAYS)</span>-->
<!--<span class="notification fail"><strong>&Chi;</strong> Purchase failed. You do not have the required funds. Buy more, damn it.</span> -->

<!--<div class="c_cat">
	<span>
    	<input name="Search" type="text" value="Search" onfocus="javascript:this.value='';" onblur="if(this.value=='') this.value='Search';"/>
    </span>
	<p>COSTUME</p>	
</div>-->

<ul style="margin:0 0; padding-top:0px;" id="mall_items">
	
</ul>

</div>
<!-- End Item shop catalog -->

<!-- Cat -->
<ul class="is_cat">
	<span>CATEGORIES</span>
	<li class="active" name="mall_list_item" id="li_Apparel"><a href="#" onclick="loadMallSection( 'Apparel' ); return false;">APPAREL</a>
    	<ul id="Apparel_Sub" name="cat_subs">
        	<li name="mall_list_item_sub" id="li_1">&raquo;<a href="#" onclick="loadMallSection( 1 ); return false;">Head</a></li>
            <li name="mall_list_item_sub" id="li_2">&raquo;<a href="#" onclick="loadMallSection( 2 ); return false;">Back</a></li>
            <li name="mall_list_item_sub" id="li_8">&raquo;<a href="#" onclick="loadMallSection( 8 ); return false;">Costume</a></li>
            <li name="mall_list_item_sub" id="li_3">&raquo;<a href="#" onclick="loadMallSection( 3 ); return false;">Tail</a></li>
        </ul>
    </li>
    <li name="mall_list_item" id="li_Consumables"><a href="#" onclick="loadMallSection( 'Consumables' ); return false;">CONSUMABLES</a>
    	<ul id="Consumables_Sub" name="cat_subs">
        	<li name="mall_list_item_sub" id="li_10">&raquo;<a href="#" onclick="loadMallSection( 10 ); return false;">Charms</a></li>
            <li name="mall_list_item_sub" id="li_11">&raquo;<a href="#" onclick="loadMallSection( 11 ); return false;">Extenders</a></li>
            <li name="mall_list_item_sub" id="li_12">&raquo;<a href="#" onclick="loadMallSection( 12 ); return false;">Potions</a></li>
            <li name="mall_list_item_sub" id="li_13">&raquo;<a href="#" onclick="loadMallSection( 13 ); return false;">Special</a></li>
        </ul>	
	</li>
    <li name="mall_list_item" id="li_Essentials"><a href="#" onclick="loadMallSection( 'Essentials' ); return false;">ESSENTIALS</a>
    	<ul id="Essentials_Sub" name="cat_subs">
        	<li name="mall_list_item_sub" id="li_14">&raquo;<a href="#" onclick="loadMallSection( 14 ); return false;">Binding Reset</a></li>
            <li name="mall_list_item_sub" id="li_15">&raquo;<a href="#" onclick="loadMallSection( 15 ); return false;">Boosters</a></li>
            <li name="mall_list_item_sub" id="li_16">&raquo;<a href="#" onclick="loadMallSection( 16 ); return false;">Community</a></li>
            <li name="mall_list_item_sub" id="li_17">&raquo;<a href="#" onclick="loadMallSection( 17 ); return false;">EXP Boost</a></li>
            <li name="mall_list_item_sub" id="li_18">&raquo;<a href="#" onclick="loadMallSection( 18 ); return false;">Guild</a></li>
            <li name="mall_list_item_sub" id="li_19">&raquo;<a href="#" onclick="loadMallSection( 19 ); return false;">Revival</a></li>
            <li name="mall_list_item_sub" id="li_20">&raquo;<a href="#" onclick="loadMallSection( 20 ); return false;">Storage</a></li>
        </ul>	
	</li>
    <li name="mall_list_item" id="li_Enhancement"><a href="#" onclick="loadMallSection( 'Enhancement' ); return false;">ENHANCEMENT</a>
    	<ul id="Enhancement_Sub" name="cat_subs">
        	<li name="mall_list_item_sub" id="li_24">&raquo;<a href="#" onclick="loadMallSection( 24 ); return false;">Red Eyes</a></li>
            <li name="mall_list_item_sub" id="li_25">&raquo;<a href="#" onclick="loadMallSection( 25 ); return false;">Blue Eyes</a></li>
            <li name="mall_list_item_sub" id="li_26">&raquo;<a href="#" onclick="loadMallSection( 26 ); return false;">Gold Nine</a></li>
          </ul>
	</li>
    <li name="mall_list_item" id="li_WeaponSkins"><a href="#" onclick="loadMallSection( 'WeaponSkins' ); return false;">WEAPON SKINS</a>
    	<ul id="WeaponSkins_Sub" name="cat_subs">
        	<li name="mall_list_item_sub" id="li_27">&raquo;<a href="#" onclick="loadMallSection( 27 ); return false;">Fighter</a></li>
            <li name="mall_list_item_sub" id="li_28">&raquo;<a href="#" onclick="loadMallSection( 28); return false;">Cleric</a></li>
            <li name="mall_list_item_sub" id="li_29">&raquo;<a href="#" onclick="loadMallSection( 29 ); return false;">Archer</a></li>
            <li name="mall_list_item_sub" id="li_30">&raquo;<a href="#" onclick="loadMallSection( 30 ); return false;">Mage</a></li>
            <li name="mall_list_item_sub" id="li_31">&raquo;<a href="#" onclick="loadMallSection( 31 ); return false;">Rogue</a></li>
            <li name="mall_list_item_sub" id="li_32">&raquo;<a href="#" onclick="loadMallSection( 32 ); return false;">Repiar Kits</a></li>
          </ul>
	</li>
    <li name="mall_list_item" id="li_PetsMounts"><a href="#" onclick="loadMallSection( 'PetsMounts' ); return false;">PETS & MOUNTS</a>
    	<ul id="PetsMounts_Sub" name="cat_subs">
        	<li name="mall_list_item_sub" id="li_22">&raquo;<a href="#" onclick="loadMallSection( 22 ); return false;">Mini Pets</a></li>
            <li name="mall_list_item_sub" id="li_23">&raquo;<a href="#" onclick="loadMallSection( 23); return false;">Mounts</a></li>
		</ul>
	</li>
    <li name="mall_list_item" id="li_Houses"><a href="#" onclick="loadMallSection( 'Houses' ); return false;">HOUSES</a>
    	<ul id="Houses_Sub" name="cat_subs">
        	<li name="mall_list_item_sub" id="li_21">&raquo;<a href="#" onclick="loadMallSection( 21 ); return false;">All</a></li>
		</ul>
	</li>
	<li name="mall_list_item" id="li_PacksBundles"><a href="#" onclick="loadMallSection( 'PacksBundles' ); return false;">BUNDLES</a>
    	<ul id="PacksBundles_Sub" name="cat_subs">
        	<li name="mall_list_item_sub" id="li_33">&raquo;<a href="#" onclick="loadMallSection( 33 ); return false;">Fashion</a></li>
        	<li name="mall_list_item_sub" id="li_34">&raquo;<a href="#" onclick="loadMallSection( 34 ); return false;">Consumables</a></li>
        	<li name="mall_list_item_sub" id="li_35">&raquo;<a href="#" onclick="loadMallSection( 35 ); return false;">Essentials</a></li>
        	<li name="mall_list_item_sub" id="li_36">&raquo;<a href="#" onclick="loadMallSection( 36 ); return false;">Mini Houses</a></li>
        	<li name="mall_list_item_sub" id="li_37">&raquo;<a href="#" onclick="loadMallSection( 37 ); return false;">Pets & Mounts</a></li>
        	<li name="mall_list_item_sub" id="li_38">&raquo;<a href="#" onclick="loadMallSection( 38 ); return false;">Enhancement</a></li>
        	<li name="mall_list_item_sub" id="li_39">&raquo;<a href="#" onclick="loadMallSection( 39 ); return false;">Weapon Skins</a></li>
        	<li name="mall_list_item_sub" id="li_40">&raquo;<a href="#" onclick="loadMallSection( 40 ); return false;">Misc/Other</a></li>
        	<li name="mall_list_item_sub" id="li_41">&raquo;<a href="#" onclick="loadMallSection( 41 ); return false;">Seasonal</a></li>
		</ul>
	</li>
	<li id="user_coins"></li>
</ul>
<!-- End Cat -->
<div class="clear"></div>
</div>
</div>
<!-- End Content -->
<script type="text/javascript">
	loadUserCoins();

	$('#mall_items').load('index.php?view=mall&section=Apparel' );
	
	var melements = document.getElementsByName('cat_subs');

	for (var i = 0; i < melements.length; i++) 
	{
		$('ul[name=cat_subs]').css("display", "none");
	}
	
	$('#Apparel_Sub').css("display", "block");
			
	function loadMallSection( section )
	{
		if( typeof( section ) == "number" )
		{
			var elements = document.getElementsByName('mall_list_item_sub');

			for (var i = 0; i < elements.length; i++) 
			{
				$('li[name=mall_list_item_sub]').removeClass("active");
			}
			
			$('#li_' + section ).addClass("active");
			
			$('#mall_items').load('index.php?view=mall&section=' + section );
		
			return false;
		}

		var elements = document.getElementsByName('mall_list_item_sub');

		for (var i = 0; i < elements.length; i++) 
		{
			$('li[name=mall_list_item_sub]').removeClass("active");
		}
	
		var melementss = document.getElementsByName('cat_subs');

		for (var i = 0; i < melementss.length; i++) 
		{
			$('ul[name=cat_subs]').css("display", "none");
		}
	
		var meelements = document.getElementsByName('cat_subs');

		for (var i = 0; i < meelements.length; i++) 
		{
			$('#'+section+'_Sub').css("display", "block");
		}
		
		var elementss = document.getElementsByName('mall_list_item');

		for (var i = 0; i < elementss.length; i++) 
		{
			$('li[name=mall_list_item]').removeClass("active");
		}
		
		$('#cat_subs').css("display", "none");
	
		$('#mall_items').load('index.php?view=mall&section=' + section );
		
		$('#li_' + section ).addClass("active");
	}
	
	function buyMallItem( Game , Itemid )
	{
		var url = "index.php?view=buy";
		
		var k = confirm("Are you sure you want to buy this?");
		
		if( k == false )
		{
			return false;
		}
		
		$.post(url, { game: Game, itemid: Itemid } ).done(function(data)
		{
			if( data == '' )
			{
				alert("Internal Error");
			}
			else
			{
				var obj = jQuery.parseJSON(data);
				
				if( typeof( obj.error ) != 'undefined' )
				{
					alert(obj.error);
				}
				else if( typeof( obj.success ) != 'undefined' )
				{
					alert(obj.success);
					
					loadUserCoins();
				}
				else
				{
					alert("Internal Error");
				}
			}
		});
	}
	
	function loadUserCoins()
	{
		var url = "index.php?view=buy";
	
		$.post(url, { getcoins: "f" } ).done(function(data)
		{		
			$("#user_coins").html("Coins - " + data);
		});
	}
</script>
  