From 79c34273c85ce1eec39dd7c1ee34755a9cf3bb8a Mon Sep 17 00:00:00 2001
From: magnolia-fan <magnolia_fan@me.com>
Date: Wed, 22 Jun 2011 01:51:20 +0400
Subject: [PATCH] Settings form

---
 public/index.html                        |  1 +
 public/javascripts/beathaven/pages.js    |  1 +
 public/javascripts/beathaven/settings.js |  6 ++
 public/settings.html                     | 21 +++++-
 public/stylesheets/settings.css          | 84 ++++++++++++++++++++++++
 5 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 public/stylesheets/settings.css

diff --git a/public/index.html b/public/index.html
index 43dc1b6..3f9f5b7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
 		<meta charset="utf-8"/>
 		<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/layout.css" />
 		<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/search.css" />
+		<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/settings.css" />
 		<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/misc.css" />
 		<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/player.css" />
 		<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/albums.css" />
diff --git a/public/javascripts/beathaven/pages.js b/public/javascripts/beathaven/pages.js
index be47db9..4f81e1b 100644
--- a/public/javascripts/beathaven/pages.js
+++ b/public/javascripts/beathaven/pages.js
@@ -87,6 +87,7 @@ var Pages = {
 	},
 	
 	renderSettings: function(data) {
+		$('#data-container').css('background', 'url(/images/concrete_wall_2.png) 0 -30px repeat');
 		$('#data-container .inner').html(data);
 		yaCounter7596904.hit(Ajax.getAnchor(), 'Settings', Ajax.referer);
 		Ajax.setTitle('Settings');
diff --git a/public/javascripts/beathaven/settings.js b/public/javascripts/beathaven/settings.js
index d41b826..68d78ad 100644
--- a/public/javascripts/beathaven/settings.js
+++ b/public/javascripts/beathaven/settings.js
@@ -4,4 +4,10 @@ var Settings = {
 
 $('.settings').live('click', function() {
 	Ajax.loadSettingsPage();
+})
+$('.settings-container .tabs .tab').live('click', function(){
+	if (!$(this).hasClass('active')) {
+		$('.settings-container .tabs .tab').removeClass('active');
+		$(this).addClass('active');
+	}
 })
\ No newline at end of file
diff --git a/public/settings.html b/public/settings.html
index b6fc4c6..f445a6b 100644
--- a/public/settings.html
+++ b/public/settings.html
@@ -1 +1,20 @@
-hello
\ No newline at end of file
+<div class="settings-container">
+	<div class="tabs">
+		<div class="left-space"></div>
+		<div class="tab active">Account</div>
+		<div class="middle-space"></div>
+		<div class="tab">Music</div>
+	</div>
+	<div class="form-container">
+		<div class="form">
+			<div class="field">
+				<div class="label">Username:</div>
+				<div class="value"><input name="username" type="text"/></div>
+			</div>
+			<div class="field">
+				<div class="label">Email:</div>
+				<div class="value"><input name="email" type="text"/></div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/public/stylesheets/settings.css b/public/stylesheets/settings.css
new file mode 100644
index 0000000..f07734a
--- /dev/null
+++ b/public/stylesheets/settings.css
@@ -0,0 +1,84 @@
+.settings-container {
+	margin: 25px;
+}
+	.settings-container .tabs {
+		height: 26px;
+	}
+		.settings-container .tabs > div {
+			float: left;
+			height: 25px;
+		}
+		.settings-container .tabs .left-space {
+			width: 15px;
+		}
+		.settings-container .tabs .tab {
+			position: relative;
+			border-left: #DDD 2px solid;
+			border-top: #DDD 2px solid;
+			border-right: #DDD 2px solid;
+			padding: 0 8px;
+			line-height: 24px;
+			margin-top: 2px;
+			border-radius: 5px;
+			-webkit-border-radius: 5px;
+			-moz-border-radius: 5px;
+			background-color: #FAFAFA;
+			cursor: pointer;
+		}
+			.settings-container .tabs .tab.active {
+				position: relative;
+				z-index: 200;
+				background-color: #EAEAEA;
+				border-left: #CCC 2px solid;
+				border-top: #CCC 2px solid;
+				border-right: #CCC 2px solid;
+				border-bottom: #EAEAEA 6px solid;
+				margin-top: -2px;
+				line-height: 29px;
+				font-weight: bold;
+				cursor: default;
+			}
+		.settings-container .tabs .middle-space {
+			width: 8px;
+		}
+	.settings-container .form-container {
+		position: relative;
+		z-index: 100;
+		height: 500px;
+		background-color: #EAEAEA;
+		border-left: #CCC 2px solid;
+		border-top: #CCC 2px solid;
+		border-right: #CCC 2px solid;
+		border-bottom: #CCC 2px solid;
+		border-radius: 5px;
+		-webkit-border-radius: 5px;
+		-moz-border-radius: 5px;
+	}
+		.settings-container .form-container .form {
+			margin: 25px;
+		}
+			.settings-container .form-container .form .field {
+				height: 40px;
+				margin-bottom: 10px;
+				clear: both;
+			}
+				.settings-container .form-container .form .field .label{
+					float: left;
+					font-size: 24px;
+					line-height: 32px;
+					width: 140px;
+					padding: 3px 6px;
+					-webkit-border-radius: 3px;
+					-moz-border-radius: 3px;
+					border-radius: 3px;
+					background-color: #CCC;
+					margin-right: -10px;
+				}
+				.settings-container .form-container .form .field input[type="text"]{
+					font-size: 24px;
+					padding: 4px;
+					border: #CCC 1px solid;
+					-webkit-border-radius: 3px;
+					-moz-border-radius: 3px;
+					border-radius: 3px;
+				}
\ No newline at end of file