<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Wireframe</title>
	<script src="js/less.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/lodash.js"></script>
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<script type="text/javascript" src="js/backbone-min.js"></script>
<style>
body, html {
	margin:0;
	padding:0;
	height:100%;
}

* {
	padding:0;
	margin:0;
}

#charter-net-header {
	width:100%;
	height:85px;
	background-color: #00a4e4;
	overflow:hidden;
	z-index: 0;
	position:absolute;
	top:0;
	left:0;
}

#application {
	position:absolute;
	width:100%;
	overflow:hidden;
	top:85px;
	bottom:0px;
	left:0px;
	background-color: green;
	z-index: 0;
}

#application-tabs {
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:39px;
	background-color: #13749b;
	overflow: hidden;
	z-index: 1;
}

#application-tabs > li {
	display:inline-block;
	padding:11px 15px 0 15px;
	height:28px;
	overflow:hidden;
	list-style: none;
	float:left;
	position:relative;
	top:0;
	border-bottom-width:0;
}

.pane {
	position:absolute;
	bottom:0;
	left:0;
	top:0;
	width:100%;
}

#email-pane {
	background-color: brown;
}

#contacts-pane {
	background-color: burlywood;
}

#settings-pane {
	background-color: chocolate;
}

.button-bar {
	position:absolute;
	top:39px;
	left:0;
	right:0;
	height:78px;
	overflow:hidden;
}

.vertical-bar {
	position:absolute;
	bottom:0;
	left:0;
	top:117px;
	width:230px;
	background-color: darkgoldenrod;
	overflow: hidden;
	overflow-y:auto;
}

.primary-content-pane {
	position:absolute;
	left:230px;
	top:117px;
	right:0;
	bottom:0;
	background-color: green;
	display:inline;
	overflow:hidden;
}

#message-list {
	position:relative;
	left:0;
	top:0;
	height:100%;
	background-color: darkslateblue;
	overflow: hidden;
	overflow-y:auto;
}

#message-pane {
	display:none;
	position:absolute;
	top:0;
	right:0;
	left:236px;
	height:100%;
	background-color: pink;
	overflow:hidden;
	overflow-y:auto;
}

.button {
	color:white;
	width:28px;
	height:28px;
	position:absolute;
	z-index:3;
	background-color: #333;
	cursor:pointer;
	display:inline;
}

#slider:before {
	content:'<';
	margin-left: 10px;
}

#slider {
	top:0;
	left:0;
	float:left;
}

#closerb:before {
	content:'X';
	margin-left: 10px;
}
#closerb {
	top:0;
	right:0;
	float:right;
}

#compose-pane {
	display:hidden;
}
</style>

</head>
</body>
<div id="charter-net-header"></div>
<div id="application">
	<ul id="application-tabs">
		<li><a href="#email-pane">Email</a></li>
		<li><a href="#contacts-pane">Contacts</a></li>
		<li><a href="#settings-pane">Settings</a></li>
	</ul>
	<div id="email-pane" class="pane">
		<div class="button-bar"></div>
		<div class="vertical-bar"></div>
		<div class="primary-content-pane" id="email-content-pane">
			<div id="message-list"><table class="tabular-list"></table></div>
			<div id="message-pane"><div class="button" id="slider"></div><div class="button" id="closerb"></div><div class="message-display top-to-bottom-fade" id="message-display-pane"></div></div>
			<div id="compose-pane"></div>
		</div>
	</div>
	<div id="contacts-pane" class="pane">
		<div class="button-bar"></div>
		<div class="vertical-bar"></div>
		<div class="primary-content-pane">Contacts</div>
	</div>
	<div id="settings-pane" class="pane">
		<div class="button-bar"></div>
		<div class="vertical-bar"></div>
		<div class="primary-content-pane">Settings</div>
	</div>
</div>
<script type="text/javascript">


$('#message-list').click(function(e){
	$(this).css('width',236);
	$('#message-pane').css('left',236).show();
});

$('#slider').click(function(e){

	var marginLeft = $('#message-list').css('margin-left'),
		expandMargin = '0',
		contractLeft = '236px',
		contractMargin = '-200px',
		expandLeft = '36px';


	if( marginLeft === contractMargin ){
		$('#message-list').css('margin-left',expandMargin);
		$('#message-pane').css('left',contractLeft);
	} else {
		$('#message-list').css('margin-left',contractMargin);
		$('#message-pane').css('left',expandLeft);
	}
});

$('#closerb').click(function(e){
	$('#message-pane').hide();
	$('#message-list')
		.css('margin-left','0')
		.css('width','100%');
});

$(function(){

	$('#application').tabs();

	App.email = new App.Collections.Email();

	App.email.add({
		id:'12345',
		to:'bryonbean@gmail.com',
		from: 'bryon.bean@charter.com',
		body: 'Finish your homework fool',
		subject:'Finish your homework',
		date: new Date().toDateString()
	});

	App.emailChrome = new App.EmailChrome({ 
		el: $('#email-pane')
	});

	App.emailChrome.render();

});

var App = {
	Views:{},
	Models:{},
	Collections: {},

};

</script>
<script type='text/javascript' src="js/backbone/models/email.js"></script>
<script type='text/javascript' src="js/backbone/collections/email.js"></script>
<script type='text/javascript' src="js/backbone/views/emailchrome.js"></script>
<script type='text/javascript' src="js/backbone/views/emailbuttonbar.js"></script>
<script type='text/javascript' src="js/backbone/views/emailverticalbar.js"></script>
<script type='text/javascript' src="js/backbone/views/messagelist.js"></script>
<script type='text/javascript' src="js/backbone/views/messagepane.js"></script>
<script type='text/javascript' src="js/backbone/views/composemessage.js"></script>
</body>
</html>
