<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<title>&nbsp;</title>
	<link href="./css/reset.css" rel="stylesheet" type="text/css">
    <link href="./css/css.css" rel="stylesheet" type="text/css">
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./css/app.css" rel="stylesheet" type="text/css">
    <link href="./css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
<body>

	<div id="content">

	</div>
	<div id="main">
	<p class="item-details ng-binding" data-toggle="tooltip" data-placement="bottom" title="Scroll for more details">
                                      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
									</p>
	
	<div class="tab-content">
                    
	
	
		</div>
		</body>
	
	<!--<div class="navbar navbar-fixed-bottom" style="width:1000px; margin:0 auto;">
		<div class="navbar-inner" style="text-align:center;">
				<p style="font-weight:bold; margin-top:10px;">Some copyright text&copy;</p>		
		</div>
	</div>-->
		
<script type="text/javascript" src="template/js/images.js"></script>
<script type="text/javascript">
<!--
var imageMaxWidth = 128;
var imageMaxHeight = 128;
//-->
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./Template/js/bootstrap.min.js"></script>
<script>
var title = "Vaiox Mall";

$(document).ready(function()
{
	loadReset();
	
	document.title = title;
});

function loadReset()
{
	$("#content").load('handler.php');
	
	$("#main").html('');
}

function buyItem( id )
{
	var conf = confirm("Are you sure you want to buy this item?" );
	
	if( conf == true )
	{
		$.post("handler.php", {buy: id}).done(function(data){
			alert(data);
			
			updateCoins();
		});
	}
	else
	{
		return false;
	}
}

function loadCat( id )
{
	$.get("handler.php?cat=" + id , function(data)
	{
		$("#main").html(data);
		
		$('li').removeClass('active')
		
		$("#lbl_" + id ).addClass("active");
		
		document.title = title + " - " + $("#lbl_" + id ).text();
	});
}

function Login()
{
    var user = document.getElementById("username");
    
    var pass = document.getElementById("password");
    
    $.post("handler.php", $("#form").serialize() ).done(function(data){
        if( data == 1 )
        {
            alert("Invalid login credentials");
        }
        else if( data == 2 )
        {
            alert("Enter a correct password");
        }
        else if( data == 3 )
        {
            alert("Enter a correct username");
        }		
        else if( data == 4 )
        {
           loadReset();
		   
		   $("#main").html('<div class="alert alert-info">Click on a category to get shopping!<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
        }	
		else
		{
			alert("server error");
		}
    });
}

function Logout()
{
	$.get('handler.php?logout').done(function(){
		loadReset();
		
		document.title = title;
	});
}

function displayDesc( id )
{
	$("#" + id ).toggle("swing");
}

function updateCoins()
{
	$.get('handler.php?coins').done(function(data){
		$("#coins_lbl").html("Coins:<b style=\"color:red;\">" + data + "</b>");
	});
}
</script>
</body>
</html>