CSS/JS код для Создания нового окна/слоя

Antuan · April 3, 2009

Ниже небольшой :huh: кодик

Очень понравилась реализация просмотра изображений нас сайте Вконтакте

Решил выдернуть код от туда, получился не совсем как я ожидал. Очень длинный код

Может кто знает

как реализовать эту функцию в "несколько строк"

<style type="text/css" />
body {
  background: #fff; text-align: left; margin: 0px; padding: 0px;
  font-family: tahoma, verdana, arial, sans-serif;
  font-size: 11px;
  }

p {
  font-family: tahoma, verdana, arial, sans-serif;
  font-size: 11px; text-align: left; padding:0px; margin:15px 0px;
  }

a {
  color: #2B587A; text-decoration: none;
  }

img {
  border: 0px;
}
.captchaImg{
	width:130px;
	height:50px;
	background:url(/images/vklogo.gif);
}
.giftImg{
	behavior: url(./../js/iepngfix.htc);
}
form {
 margin:0px;
 padding:0px;
}
small {
 font-size:10px;
}
label {
  color: gray;
  font-weight: bold; }

select  {
		border: 1px solid #bdc7d8;
		padding: 2px;
		font-size: 11px;
		font-family: tahoma, verdana, arial, sans-serif }
pre {
  font-family: Courier New;
  font-size: 11px;
  margin:0px;
}
td,
td.label {
  text-align: left; }

/* ALL INPUTS */

.inputText,
.inputPassword {
  border: 1px solid #C0CAD5;
  font-family: tahoma, tahoma, verdana, arial, sans-serif;
  font-size: 11px;
  padding: 3px;
}

input[type="text"],
input[type="password"],
input[type~="text"],
input[type~="password"] {
  border: 1px solid #C0CAD5;
  padding: 3px;
  font-size: 11px;
  font-family: tahoma, tahoma, verdana, arial, sans-serif;
}

textarea {
  border: 1px solid #C0CAD5;
  padding: 3px;
  font-size: 11px;
  font-family: tahoma, tahoma, verdana, arial, sans-serif;
}

input[type="submit"],
input[type="button"],
input[type~="submit"],
input[type~="button"] {
  background-color: #36638E;
  color: #FFFFFF;
  font-size: 11px;
  padding:3px;
  font-family: tahoma, tahoma, verdana, arial, sans-serif;
  border:0}

* html .inputButton,
* html .inputSubmit {
  background-color: #36638E;
  color: #FFFFFF;
  font-size: 11px;
  padding: 3px;
  font-family: tahoma, tahoma, verdana, arial, sans-serif;
  border:0px}

.buttonRow  {
		text-align: center;
		line-height: 20px;
		list-style: none;
	height:21px;
		margin: 0px;
		padding: 3px 0px; }

ul.buttonRow li {display: inline; width: 3.5em; float: left; margin-bottom:4px}
ul.buttonRow a {display:block; margin: auto; padding: 1px 4px; color: #FFF; margin-right:4px; background-color: #36638E; border-bottom:1px solid #eee;}
ul.buttonRow a:hover {color:#DAE1E8; text-decoration: none;}

.button {
  background-color: #36638E;
  color: #FFFFFF;
  font-size: 11px;
  padding: 4px 7px;
  text-align: center;
  font-family: tahoma, tahoma, verdana, arial, sans-serif;
  border:0px;
  cursor: pointer;
  cursor: hand;}

input[type~="radio"] {
  border: 0px; }

.inputcheckbox {
  border: 0px; }

/* HEADERS */
h1	  {
		margin: 0px;
		padding: 0px;
		font-size: 14px; }

		h1 a { color: white; text-decoration: none; }
		h1 a:hover { color: white; text-decoration: underline; }
		h1 em { font-style: normal; border-bottom: solid 1px #DAE1E8; }

h2	  {
		font-size: 11px;
		margin: 0px;
		padding: 0px; }

h6 {	border-bottom: 1px solid #DAE1E8;
	color: #36638E;
	margin:0px; padding:0px;
	font-size: 14px;
	padding-bottom: 5px; }

h3	  {
		color: #444;
		font-size: 11px;
		font-weight: normal;
		margin: 0px;
		padding: 0px; }

h4	  {
		color: #36638E;
		font-size: 11px;
		margin: 0px 0px 6px 8px; }

		h4 .edit { display: inline; margin-left: 8px; }
		h4 .edit a { color: lightgrey; }
		h4 .edit a:hover { color: #36638E; }

h5	  {
	   color: #36638E;
	   font-size: 11px;
	   margin: 0px 0px 6px 8px; }

	   h5 .edit { display: inline; margin-left: 8px; }
	   h5 .edit a { color: lightgrey; }
	   h5 .edit a:hover { color: #36638E; }

#pageLayout   {
 padding: 0px;
 margin: 0px auto;
 width: 791px;
 text-align: left; 
}

#pageHeader {
 width: 791px;
 height: 45px;
 position: relative;
 background-image: url(../images/xhead2.gif);
 background-repeat: no-repeat;
 background-position: left top;
 background-color: #32608A;
}

/*	background-color: #303E58 */

#home {
 position: absolute;
 left: 0;
 top: 0;
 width: 129px;
 width: 153px;
}

#home a {
  display: block;
  height: 42px;
  text-indent: -9999px; }

#home a:hover {
  text-decoration: none; }

#B {
 color:#36638E; background-color:#fff; padding:0px 2px 0px 0px;
}

#sideBar {
		margin: 5px 0px 0px 4px;
		float: left;
		padding-bottom: 10px;
		width: 118px; }

div#quickSearch {float:right; text-align:right; padding:9px 9px 0px 0px; margin:0px 0px;}
#quickSearch input {border-color: #678AA9;}
#quickquery.inputSearch {width: 85px; padding-left: 17px; margin-right:3px}

.inputSearch {
  background: white url(/images/magglass.png) no-repeat 3px 4px;
}


#quickLogin {
		width: 120px; padding: 0px; margin: 0px;
}

#quickLogin label {
				display: block;
				padding: 0px 0px 2px;
				margin: 0px;
				color: gray;
				font-weight: bold; }

#quickLogin table {
	  border-width: 0px;
	  border-spacing: 0px;
	  border-collapse: collapse;
	  margin: 3px 0px 0px 0px;
}
#quickLogin td {
	  padding: 0px 0px 3px 0px;
	  text-align: center;
	  border: none;
}
#quickLogin .inputText { width: 115px; }

#pageBody {
		float: right;
		font-size: 11px;
		margin-left: 12px;
		margin-right: 15px;
		text-align: left;
		width: 632px;
		}

* html #pageBody {
		f\loat: right;
		margin-left: 12px;
		margin-right: 15px;
		c\lear: both;
		text-align: left;
		width: 632px;
		o\verflow: hidden; }

.pageBody a:hover { text-decoration: underline; }

.simplePage {
  padding: 10px 20px 0px 20px;
  margin: 0px;
}
#wrap1 {border: 1px solid #EBF0F4; border-top: 0px; }
#wrap2 {border-right: 1px solid #F6F8FA; border-top: 0px; //border-right: 0px; }

#content {
		padding: 12px;
		border-bottom: solid 1px #C3CAD2;
		border-left: solid 1px #DAE1E8;
		border-right: solid 1px #DAE1E8; }



		#content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
		/* #content li a:hover { text-decoration: none; } */

/* Hides from IE-Mac \*/
* html #content { height: 1%; }
/* End hide from IE-Mac */

#wrapH {
		border-right: solid 1px #EAEEF3;
		border-left: solid 1px #EAEEF3;
}

#wrapHI {
		border-right: solid 1px #D5DDE6;
		border-left: solid 1px #D5DDE6;
}

#header {
		font-weight: bold;
		font-size: 11px;
		padding: 2px 10px 5px;
		margin: 0px;
		background-image: url(../images/header_yellow.gif);
		background-position: top left;
		background-repeat: repeat-x;
		background-color: #EEE5B8;
		color: black;
		border-right: solid 1px #DCD4A4;
		border-left: solid 1px #E4DDB4;
		border-bottom: solid 1px #D7CF9E; }

#header h1 {
		font-size: 11px;
}

#header h1 a {
		color: #696029;
}

#header span {
 color: #8E8443;
	color: #C8BF85;
}

#header b{
	color: #C8BF85;
	float:right;
}

#footer {
		text-align: center;
		color: #36638E;
		font-weight: bold;
		line-height: 21px;
		font-size: 11px;
		margin: 0px;
		padding: 0px 10px;
		background: #DAE1E8;
		border-bottom: solid 1px #36638E; }


/* ADS */

.leftAd {
 padding:3px; margin: 0pt auto; width: 100%; color: #000;
 background-color: #f7f7f7;
}
.leftAd p{
 margin:1px 5px;
 overflow: hidden;
 word-wrap: break-word;
 color: #222;
}
.leftAd h4 {
	text-align: center;
	font-size: 12px;
	border-bottom: solid 1px #DAE1E8;
	padding: 0px 0px 3px;
	margin: 0px 5px 3px;
}
.leftAd h3 {
	text-align: center;
	margin: 4px 5px 3px;
	color: black;
	font-weight: bold; }

/* TABS */

ul.tabs,ul.tabs li{list-style-type:none;margin:0;padding:0}
ul.tabs{width:600px}
ul.tabs li{float:left;margin-right: 3px;text-align: center;}
ul.tabs a{float:left;width: 7em;padding: 5px 0; text-decoration:none;}
ul.tabs a:hover{background: #DAE1E8; text-decoration:none;}

ul.tabs li.activeLink a,ul.tabs li.activeLink a:hover{background: #36638E;color: #FFF;}

#tSettings {width: 6em;}
#tNetworks {width: 4em;}
#tMobile {width: 9em;}

.tBar {
  padding: 0px 10px 0px;
  border-bottom: solid 1px #36638E;
}

.tBar #tabs {
	display: inline;
	float: left;
	border-bottom: none;
	margin: 0px;
}

.tBar .blinks {
	padding: 4px 0px;
	float: right;
}

/* GLOBAL FOOTER */

#bFooter {
		clear: both;
		font-size: 10px;
		line-height: 15px;
		padding: 5px 0px 0px 0px;
	text-align: center; margin: 0;
}
#bFooter p {
		font-size: 11px; margin: 0;  padding:0;
	text-align: center; margin-left: 95px;
}

/* BNAV*/

ul.bNav {
  font-size: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  margin-left:305px;
}

.bNav li a:hover {
  border-top: 1px solid #CAD1D9;
  background-color: #DAE1E8;
}

.bNav li {
  display: inline; float:left;}

.bNav li a {
  border-top: 1px solid #FFF;
  display:block; padding: 1px 5px 2px 7px;}

/* LEFT NAVIGATION */

.moreDiv {
 margin-top: 3px;
 padding-top: 3px;
 border-top: 1px solid #ccc;
}

#nav li a.more {
  padding-left: 29px;
  border-top: 0px;
}

#nav li a.more:hover {
  border-top: 0px;
}

#nav {
  list-style: none;
  margin: 0 0 1.0em 0;
  padding: 0; }

#nav li {
  border-bottom: 1px solid #FFF;
  font-size: 1.0em; }

#nav li#myprofile {
  border-bottom: 0; }

#nav li#myfriends {
  clear: left; }

#nav li a {
  border: 0; border-top:1px solid #fff;
/*  border-left: 4px solid #F3F5F7;*/
  background: #eee;
  background: white;
  display: block;
  padding: 3px 3px 3px 6px;
}

#nav li a.more {
  padding-left: 6px;
}

#nav li#myprofile a {
  padding: 0;
  width: auto;
  border-bottom: 1px solid #FFF;
}

#nav li#myprofile a.hasedit {
  float: left;
  padding: 2px 0 2px 3px;
  width: 76px;
  padding: 3px 3px 3px 6px; border-top:1px solid #fff;
/*  border-left: 4px solid #F3F5F7;*/
}

#nav li#myprofile a.edit {
  color: gray;
  float: right;
  padding: 2px 1px;
  text-align: center;
  width: 28px;
  padding: 3px 0px 3px 1px;
  border-left: 0;
}

#nav li#myprofile a.edit:hover {
 background: #EAEEF2;
 color:#36638E;
 border-left:0px;
}

#nav li#myfriends a {
}

#nav li a:hover,
#nav li#myprofile a:hover {
  background: #DAE1E8;
  color:#36638E;
  border-top: 1px solid #CAD1D9;
  text-decoration:none;
}

div.postOptions #nav li a { display: inline; }
div.postOptions #nav li { margin-bottom: 7px; }

/* clearFix */

.clearFix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;}

.clear {
  float: none;
  clear: both;
}
/* Hides from IE-mac \*/
* html .clearFix { height: 1%; }
.clearFix { display: block; }
/* End hide from IE-mac */

/* MISC */

.see_all {
  text-align: right; }

/* EDIT ACCOUNT */


.editorPanel {
  padding: 10px 0px;
  background: #f7f7f7; }

.settingsPanel {
  width: 400px;
  margin: 0px auto 15px;
}

.settingsPanel h4 {
  border-bottom: 1px solid #b9c4da;
  color: #36638E;
  font-size: 12px;
  font-weight: bold;
  margin: 10px 0px 10px;
  padding-bottom: 2px; }

.settingsPanel p {
  line-height: 14px;
  margin: 0px 0px 8px; }

.settingsPanel .editor {
  width: 400px; }

.settingsPanel .editor td.label {
  text-align: right;
  padding-left: 0px;
  width: 100px; }

.settingsPanel .editor .buttons {
  text-align: left;
  margin: 0px;
  padding: 0px 0px 0px 105px; }

.settingsPanel .editor td input[type~="text"],
.settingsPanel .editor td input[type="text"] {
  width: 280px; }

.settingsPanel .editor td input[type~="password"],
.settingsPanel .editor td input[type="password"] {
 width:200px;
}

.settingsPanel .editor select {
  width: 280px; }

.settingsPanel ul {
  list-style: square;
  padding: 0px;
  padding-left: 15px; }

.settingsPanel li {
  color: #36638E;
  margin-bottom: 5px; }

.settingsPanel li span {
  color: #000; }

.settingsPanel em {
  color: #36638E;
  font-weight: bold;
  font-style: normal }

/* LEFT AND RIGHT */

.left {
  float: left;
  width: 395px; }

.right {
  width: 215px;
  float: left; }

.middle {
  margin-left: auto;
  margin-right: auto;
}

.topNav  {
		text-align: center;
		line-height: 20px; margin:0px;
		list-style: none;
		padding: 0px 130px 0px 0px;
}

ul.topNav li {
display: inline;
width: 10em;
height: 36px;
float: right;
padding-top:9px; margin:0px;
background-image: url(../images/header_divider.gif);
background-repeat:no-repeat;
background-position: top left;
}
ul.topNav a {font-weight: bold; font-size:11px; height: 20px;display:block; margin: auto 0px; padding: 2px 4px; color: #DAE1E8;}
ul.topNav a:hover {color: white; text-decoration:underline;}
/* background-color: #4A556B;*/

#p40 {width: 4.0em;}
#p45 {width: 4.5em;}
#p50 {width: 5.0em;}
#p55 {width: 5.5em;}
#p60 {width: 6.0em;}
#p65 {width: 6.5em;}
#p70 {width: 7.0em;}
#p75 {width: 7.5em;}
#p85 {width: 8.0em;}
#p115 {width: 11.5em;}

.listing {
  list-style: square;
  padding-left: 40px;
  color: #758EAC;
  margin: 0px 0px 15px 0px
}

ul.listing li {
  padding: 1px 0px;
}

ul.listing li span{
  color:black;
}

.grey {
  padding: 0px 0px 2px;
  margin: 0px;
  color: gray;
  font-weight: bold;
}


#error {
 border: 1px solid #E89B88;
 background-color: #FFEFE8;
 padding: 8px 11px;
 font-size: 14px; font-weight:bold;
 margin: 0px;
}

.accountInfo {
  padding: 0px;
  margin: 0px 0px 0px 8px;
  border-bottom: solid 1px #DAE1E8; }

.basicInfo {
  padding: 5px 0px 15px 8px; }

.divide {
  color: gray;
  font-weight: normal;
  padding: 0px 4px;
}

.sdivide {
  color: #ADB8C3;
  padding: 0px 4px;
  font-size: 10px;
}

#msg, #dld, .msg, .dld {
 padding: 8px 11px;
 font-size: 11px; font-weight:bold;
 margin: 8px;
 text-align:left;
 background-color: #F4EBBD;
 border: 1px solid #D7CF9E;
 clear: both;
}
p#msg, p.msg, p#dld, #p.dld {text-align:center;}
#dld, .dld {
 background-color: #F6F7F9;
 border: 1px solid #DBE0EA;
}
.msg_wall {
 margin: 0px 0px 15px;
 padding: 9px 5px 10px 10px;
 border: 1px solid #E2DAA6;
 background-color:#FEFAE4;
}
.error {
  background-color:#FFEFE8;
  border:1px solid #E89B88;
  font-size:11px;
  margin:8px;
  padding:8px 11px;
}

.Graffiti {
 padding: 0px 20px;
}

.infomsg {
 padding: 8px 11px;
 font-size: 11px; font-weight:bold;
 margin: 8px;
 text-align:left;
 background-color: #fefefe;
 border: 1px solid #d8dfea;
}

.alertmsg {
 padding: 8px 11px;
 font-size: 11px;
 margin: 8px;
 text-align:left;
 background-color: #F9F6E7;
 border: 1px solid #D4BC4C
}

ul.nNav {
  font-size: 11px;
  list-style: none;
  margin: 0;
  padding: 0;

}
.nNav li {
 float: left;
 display: inline;
 margin-left: 5px;
 text-align:center;
 width: expression(this.getElementsByTagName("a")[0].offsetWidth+16+"px");
 border-bottom: 1px solid #eee;
}
.nNav li a:hover {
 color: #DAE1E8;
 text-decoration:none;
}
.nNav li a {
 color: #FFF;
 display:inline;
 white-space: nowrap;
}
.nc {
	display:block;
	width: expression(this.parentNode.offsetWidth+"px");
}
.nc *{
  display:block;
  height:1px;
  font-size:.01em;
  overflow:hidden;
  background:#36638E}
.nc1{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #9AB1C6;
  border-right:1px solid #9AB1C6;
  background:#36638E}
.nc2{
  border-left:1px solid #9AB1C6;
  border-right:1px solid #9AB1C6;
  background:#36638E}
.ncc {
  display: block;
  background:#36638E; padding:3px 8px 3px 8px; color:#fff;
}

.ratePlus, .rateGreenPlus, .rateRedPlus, .rateBluePlus {
 float: right;
 margin-top: -11px;
 color: #EEBD00;
 font-size: 10px;
 font-weight:bold;
}

.rateBody {
 padding:5px;
 text-align: center;
 background: #FAF3D8 url(/images/golden.gif) repeat-x bottom;
 margin: 0px 0px 10px 0px;
 border-bottom:1px solid #FBE172;
}

.rateBody a, .rateRedBody a, .rateGreenBody a, .rateBlueBody a{
 color:#000;
}

#rateMore {
 color: #2B587A;
}

.rateBody div {
 color: #908851;
 margin: 0px 6px 3px 6px;
 border-bottom: 1px solid #E6E0B6;
 padding-bottom: 1px;
}

.rRed {
 margin-bottom: 10px;
 border-bottom: 1px solid #8B4C23;
}

.rateRedBody {
 padding:4px;
 text-align: center;
 background: #F0D6C7 url(/images/redl.gif) repeat-x top;
 border:8px solid #C68D69;
}

.rateRedBody div {
 color: #8B4C23;
 margin: 0px 3px 7px 3px;
 border-bottom: 1px solid #C39679;
 padding-bottom: 2px;
}
.rateRedBody .bigPlus {
 margin:5px 5px 5px 3px;
 color:#C68D69;
 font-weight:bold;
 border:0px;
 font-size:36px;
}

.rGreen {
 margin-bottom: 10px;
 border-bottom: 1px solid #37702A;
}

.rateGreenBody {
 padding:4px;
 background: #D5EABB url(/images/greenl.gif) repeat-x top;
 border:8px solid #8DBF56;
 padding-bottom:7px;
 text-align:center;
}

.rateGreenBody div {
 color: #37702A;
 text-align: center;
 margin: 0px 3px 7px 3px;
 border-bottom: 1px solid #8DBF56;
 padding-bottom: 2px;
}
.rateGreenBody .bigPlus {
 margin:5px 5px 5px 3px;
 color:#8DBF56;
 font-weight:bold;
 border:0px;
 font-size:36px;
}


.rateRedPlus {
 color: #C5864F;
}

.rateGreenPlus {
 color: #8DB55F;
}

.rBlue {
 margin-bottom: 10px;
 border-bottom: 1px solid #2F6C95;
}

.rateBlueBody {
 padding:4px;
 text-align: center;
 background: #D9E6EE url(/images/bluel.gif) repeat-x top;
 border:8px solid #99B3C9;
}

.rateBlueBody div {
 color: #0B5588;
 margin: 0px 3px 7px 3px;
 border-bottom: 1px solid #99B3C9;
 padding-bottom: 2px;
}
.rateBlueBody .bigPlus{
 margin:5px 5px 5px 3px;
 color:#99B3C9;
 font-weight:bold;
 border:0px;
 font-size:36px;
}

.rateBluePlus {
 color: #99B3C9;
}

.giftAd {
 margin-bottom: 10px;
 border-bottom: 1px solid #DCDCDC;
}
.giftAdBody {
 padding:4px;
 /*background: #D5EABB url(/images/greenl.gif) repeat-x top;*/
 background-color: #f6f6f6;
 border:6px solid #EAEAEA;
 padding-bottom:7px;
 text-align:center;
}

.giftAdBody div {
 text-align: center;
 margin: 0px 3px 7px 3px;
 border-bottom: 1px solid #DCDCDC;
 padding-bottom: 2px;
}

.goldAd {
 border-bottom: 1px solid #C4BB98;
}
.goldAd .giftAdBody {
 background-color: #FEF9E1;
 border:6px solid #E9DEB4;
}

.goldAd .giftAdBody div {
 border-bottom: 1px solid #C4BB98;}

.bonusVotes {
  color:#C4BB98;
  float: right;
  margin-top: -11px;
  font-size: 10px;
  font-weight:bold;
}

.wrapped{
 overflow: hidden;
 word-wrap: break-word;
}

/* тыц */
/*wbr:after { content: '\00200B'; }*/
/* they say it's better */
wbr {
  width: 0px;
  display: inline-block;
  overflow: hidden;
}


#qquery {
 width: 105px;
 text-align: left;
 margin: 1px 5px 0px 0px;
 border: 1px solid #678AA9;
 border-right: 1px solid #265581;
 background-color: #FFF;
 height: 19px;
}

#qinput {
 float: left;
 font-family: tahoma, verdana, arial;
 border: 0px;
 background: white url(/images/magglass.png) no-repeat 3px 4px;
 padding: 3px 3px 3px 17px;
 width: 85px;
 font-size: 11px;
 color: #777;
 height: 13px;
 outline: none;
}

.qdrop_off, .qdrop_on, .qdrop_over {
 width: 128px;
 height: 13px;
 float: right;
 text-align: right;
 padding: 2px 22px 4px 0px;
 color: #999;
 cursor: pointer;
 background: #FFF url('/images/darr.gif') no-repeat 132px 4px;
}
.qdrop_on, .qdrop_over {
 background-position: 132px -22px;
}

.qdrop_on {
 color: #000;
}

.qonl {
 color: #708191;
 padding: 0px 5px 1px 5px; margin: 0px 5px;
 font-weight: normal;
}

#qdropdown {
 width: 151px;
 text-align: right;
 background-color: #FFF;
 border: 1px solid #265581;
 aborder-bottom: 1px solid #839EB7;
 border-bottom: 0px;
 border-top: 0px;
 position: absolute;
 display: none;
 left: 624px;
 top: 30px;
 *top: 29px;
 z-index: 300;
}
.qdiv_over, .qdiv_over_top, .qdiv_off, .qdiv_on {
 padding: 3px 21px 4px 3px;
 background-color: #FFF;
 border-bottom: 1px solid #DAE2E8;
 border-bottom: 0px;
 cursor: pointer;
 border-top: 1px solid #FFF;
 border-bottom: 1px solid #FFF;
}
.qdiv_over, .qdiv_over_top {
 aborder-bottom: 0px;			  
 background-color: #587DA1;
 color: #FFF;
 border-top: 1px solid #2A5883;
 border-bottom: 1px solid #2A5883;
}
.qdiv_on {
 background-color: #E1E8ED;
 border-bottom: 1px solid #CCD5DD;
 border-top: 1px solid #CCD5DD;
}
.qdiv_over_top {
 border-top: 1px solid #2A5883;
 border-bottom: 1px solid #2A5883;
}

#qfriends {
 width: 618px;
 background-color: #FFF;
 border: 1px solid #265581;
 position: absolute;
 display: none;
 left: 157px;
 padding-top: 0px;
 border-top: 0px;
 top: 30px;
 *top: 29px;
 opacity:0.96;
 filter:alpha(opacity=96);
 z-index:1300;
}

#qfriends table {
 border-collapse: collapse;
}

#qfriends table tr td div {
 width: 25px;
 height: 25px;
 font-size: 19px;
 color: #85a0ba;
 text-align: center;
 font-weight: bold;
 margin: 2px 2px 2px 2px;
 overflow: hidden;
}

#qfriends img {
 width: 25px;
}

.qfr_cell, .qfr_cell_on, .qfr_cell_un {
 width: 618px;
 cursor: pointer;
 border-top: 1px solid #CCD5DD;
}

.qfr_cell_un {
 border-top: 1px solid #2A5883;
 background-color:#FFF;
}

.qfr_cell_on {
 background-color: #587DA1;
 border-top: 1px solid #2A5883;
 color: #FFF;
}

.qfr_cell span, .qfr_cell_un span {
 background-color: #dae2e8; color:#000;
}

.qfr_cell_on span {
 background-color: #2A5883; color:#FFF;
}

.qfr_cell_on .qonl {
 background-color: #7C98B3;
 color: #4C6C8A;
}


.ad_box {
 background: #F7F7F7;
 border: 1px solid #C0CAD5;
 border-width: 1px 0px;
 padding: 0px 0px 10px 0px;
 margin: 0px;
 width: 118px;
 overflow: hidden;
 text-align: center;
 display: block;
}

.ad_title {
 font-weight: bold;
 font-size: 11px;
 margin: 0px 3px;
 color: #36638E;
 padding-top: 8px;
 text-align: center
}
.ad_box img {
 padding-top: 8px
}
.ad_desc {
 padding-top: 8px;
 margin: 0px 2px;
}

a.ad_box .ad_desc {
 color: #000;
}


/* message box*/
.popup_transparent_bg {
  top:0;
  left:0;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #FFF;
	filter:alpha(opacity=0);
	opacity:0.0;
	z-index: 1000;
}

.box_frame{
  left: 50%;
	position: absolute;
}

.popup_box_bg {
}

.popup_box_container {
  position: absolute;
	left: 50%;
	z-index: 1001;
  padding: 10px;
}

.message_box {
	background-color: none;
  /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./../images/transpx2.png',sizingMethod='scale'); */
  background: url('./../images/transpx2.png');
}

.box_loader {
  height: 50px;
  background: url('/../images/progress7.gif') center no-repeat;
}

.box_title_wrap {
  background-color: #4B769F;
  border: 1px solid #45688E;
  padding: 0px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}

.box_body {
  background-color: #fff;
  border: 1px solid #aaa;
  border-width: 0px 1px 0px 1px;
  border-bottom: 1px solid #ccc;
  padding:16px 14px;
  line-height: 14px;
}

.box_controls {
  text-align: center;
  padding:5px;
  height: 30px;
  background-color:#f2f2f2;
  border: 1px solid #aaa;
  border-top: 0px;
}

.box_controls .button_wrap {
  margin: 2px 5px;
  cursor: pointer;
  float: right;
  width: auto;
  height: auto;
}

.box_controls .button_wrap div {
  padding: 4px 14px;
}
.box_controls .button_yes {
  border: 1px solid #2B587A;
}
.box_controls .button_yes div {
  border-top: 1px solid #6E97C4;  
  background-color:#4B769F;
  color: #FFF;
}
.box_controls .button_yes div.button_hover {
  background-color: #678BAE;
}

.box_controls .button_no {
  border: 1px solid #ccc;
}
.box_controls .button_no div {
  border-top: 1px solid #fff;
  background-color:#eaeaea;
  color: #000;
  text-decoration: none;
}
.box_controls .button_no div.button_hover {
  background-color: #f5f5f5;
}

.box_title {
 border-top: 1px solid #6088B3;
 padding: 4px 10px 5px 10px;
}


.box_no_controls {
	background-color: #DAE2E8;
	border: 1px solid #ADBBCA;
}

.box_no_controls .box_title_wrap, .box_no_controls .box_layout .box_controls {
  display: none;
}

.box_no_controls .box_body {
  border: none;
  padding: 0;
}
</style>


<script type="text/javascript">
var base_domain = base_domain || "/";

var browser = {
  opera: /opera/i.test(navigator.userAgent),
  msie: (!this.opera && /msie/i.test(navigator.userAgent)),
  msie6: (!this.opera && /msie 6/i.test(navigator.userAgent)),
  mozilla: /firefox/i.test(navigator.userAgent),
  chrome: /chrome/i.test(navigator.userAgent),
  safari: (!(/chrome/i.test(navigator.userAgent)) && /webkit|safari|khtml/i.test(navigator.userAgent))
}

/**
 * DOM
 **/
function ge() {
  var ea;
  for (var i = 0; i < arguments.length; i++) {
	var e = arguments[i];
	if (typeof e == 'string')
	  e = document.getElementById(e);
	if (arguments.length == 1)
	  return e;
	if (!ea)
	  ea = new Array();
	ea.push(e);
  }
  return ea;
}

function geByClass(searchClass, node, tag) {
  var classElements = new Array();
  if ( node == null )
		  node = document;
  if ( tag == null )
		  tag = '*';
  if (node.getElementsByClassName) {
	classElements = node.getElementsByClassName(searchClass);
	if (tag != '*') {
	  for (i = 0; i < classElements.length; i++) {
		if (classElements.nodeName == tag) 
		  classElements.splice(i, 1);
	  }
	}
	return classElements;
  }
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
  for (i = 0, j = 0; i < elsLen; i++) {
	if ( pattern.test(els[i].className) ) {
	  classElements[j] = els[i];
	  j++;
	}
  }
  return classElements;
}

function show(elem) {
  if (arguments.length > 1) {
	for (var i = 0; i < arguments.length; i++) {
	  show(arguments[i]);  
	}
	return;
  }
  elem = ge(elem);
  if (!elem) return;
	var old = data(elem, "olddisplay");
	elem.style.display = old || "";

	if (getStyle(elem, 'display') == "none" ) {
		elem.style.display = data(elem, "olddisplay", "block");
	}
}

function hide(elem){
  if (arguments.length > 1) {
	for (var i = 0; i < arguments.length; i++) {
	  hide(arguments[i]);  
	}
	return;
  }
  elem = ge(elem);
  if (!elem) return;
	if (getStyle(elem, 'display') != "none")
		data(elem, "olddisplay", elem.style.display);
	elem.style.display = "none";
}
function isVisible(elem) {
 elem = ge(elem);
 return getStyle(elem, 'display') != 'none' && getStyle(elem, 'visibility') != 'hidden';
}
function toggle(elem) {
  if (isVisible(elem)) {
	hide(elem);
  } else {
	show(elem);
  }
}
window.shide = toggle;

function getXY(obj) {
 if (!obj || obj == undefined) return;
 var left = 0, top = 0;
 if (obj.offsetParent) {
  do {
   left += obj.offsetLeft;
   top += obj.offsetTop;
  } while (obj = obj.offsetParent);
 }
 return [left,top];
}

function getSize(elem, woBounds) {
  var s = [0, 0];
  if (elem == document) {
	s =	[Math.max(
				document.documentElement["clientWidth"],
				document.body["scrollWidth"], document.documentElement["scrollWidth"],
				document.body["offsetWidth"], document.documentElement["offsetWidth"]
			), Math.max(
			  document.documentElement["clientHeight"],
			  document.body["scrollHeight"], document.documentElement["scrollHeight"],
			  document.body["offsetHeight"], document.documentElement["offsetHeight"]
		  )];
  } else if (elem){
	function getWH() {
	  s = [elem.offsetWidth, elem.offsetHeight];
	  if (!woBounds) return;
	  var padding = 0, border = 0;
	  each(s, function(i, v) {
		var which = i ? ['Top', 'Bottom'] : ['Left', 'Right'];
		each(which, function(){
		  s[i] -= parseFloat(getStyle(elem, "padding" + this)) || 0;
				  s[i] -= parseFloat(getStyle(elem, "border" + this + "Width")) || 0;
		});
	  });
	  s = [Math.round(s[0]), Math.round(s[1])];
	}
	if (!isVisible(elem)) { 
	  var props = {position: "absolute", visibility: "hidden", display:"block"};
	  var old = {};
	  each(props, function(i, val){
		old[i] = elem.style[i];
		elem.style[i] = val;
	  });
	  getWH();
	  each(props, function(i, val){
		elem.style[i] = old[i];
	  });
	} else getWH();

  } 
  return s;
}
/** * *************************************************** */


/**
 *  Useful utils
 */

Function.prototype.bind = function(object) {
	var __method = this;
	return function() {
		return __method.apply(object, arguments);
	}
};

function isFunction(obj) {
	return Object.prototype.toString.call(obj) === "[object Function]";
}

function isArray(obj) {
	return Object.prototype.toString.call(obj) === "[object Array]";
}

function now() {
  return +new Date;
}

function trim(text) {
  return (text || "").replace(/^\s+|\s+$/g, "");
}

/**
 *  Arrays, objects
 **/

function each(object, callback) {
	var name, i = 0, length = object.length;

	if ( length === undefined ) {
		for ( name in object )
			if ( callback.call( object[ name ], name, object[ name ] ) === false )
				break;
	} else
		for ( var value = object[0];
			i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}

	return object;
};
function indexOf(arr, value, from) {
  from = (from == null) ? 0 : from; 
  var m = arr.length;
  for(var i = from; i < m; i++) 
	if (arr[i] == value)
	   return i;
   return -1;
}

function clone(obj) {
  var newObj = {};
  for (var i in obj) {
	newObj[i] = obj[i];
  }
  return newObj;
}


// Extending object by another
function extend() {
	// copy reference to target object
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

	// Handle a deep copy situation
	if (typeof target === "boolean") {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}

	// Handle case when target is a string or something (possible in deep copy)
	if (typeof target !== "object" && !isFunction(target))
		target = {};

	// return target object if only one argument is passed
	if (length == i) {
		return target;
	}

	for (; i < length; i++)
		// Only deal with non-null/undefined values
		if ((options = arguments[i]) != null)
			// Extend the base object
			for (var name in options) {
				var src = target[name], copy = options[name];

				// Prevent never-ending loop
				if (target === copy)
					continue;

				// Recurse if we're merging object values
				if (deep && copy && typeof copy === "object" && !copy.nodeType)
					target[name] = extend(deep, 
						// Never move original objects, clone them
						src || (copy.length != null ? [] : { })
					, copy);

				// Don't bring in undefined values
				else if (copy !== undefined)
					target[name] = copy;
			}

	// Return the modified object
	return target;
}


/**
 * CSS classes
 **/

function hasClass(obj, name) {
  return obj && (new RegExp('(\\s|^)' + name + '(\\s|$)')).test(obj.className);
}

function addClass(obj, name) {
  if (obj && !hasClass(obj, name)) obj.className = (obj.className ? obj.className + ' ' : '') + name;
}

function removeClass(obj, name) {
  if (obj && hasClass(obj, name)) {
	obj.className = obj.className.replace((new RegExp('(\\s|^)' + name + '(\\s|$)')), ' ');
  }
}

// Get computed style
function getStyle(elem, name) {  

  if (name == "width" || name == "height") {
		return getSize(elem, true)[({'width':0, 'height':1})[name]] + 'px';
	}
  var ret, defaultView = document.defaultView || window;
  if (defaultView.getComputedStyle) {
	name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
	var computedStyle = defaultView.getComputedStyle( elem, null );
			if (computedStyle)
				ret = computedStyle.getPropertyValue(name);
  } else if (elem.currentStyle) {
	if (name == 'opacity' && browser.msie) {
		  var filter = elem.currentStyle['filter'];
		return filter && filter.indexOf("opacity=") >= 0 ?
			  (parseFloat(filter.match(/opacity=([^)]*)/)[1] ) / 100) + '' : '1';
	  }
		var camelCase = name.replace(/\-(\w)/g, function(all, letter){
			return letter.toUpperCase();
		});
		ret = elem.currentStyle[name] || elem.currentStyle[camelCase];
		// If we're not dealing with a regular pixel number
		// but a number that has a weird ending, we need to convert it to pixels
		if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
			// Remember the original values
			var left = style.left, rsLeft = elem.runtimeStyle.left;

			// Put in the new values to get a computed value out
			elem.runtimeStyle.left = elem.currentStyle.left;
			style.left = ret || 0;
			ret = style.pixelLeft + "px";

			// Revert the changed values
			style.left = left;
			elem.runtimeStyle.left = rsLeft;
		}
	}
	return ret;
}

function setStyle(elem, name, value){
  elem = ge(elem);
  if (name == 'opacity'){
	if (browser.msie) {elem.style.filter = "alpha(opacity=" + value*100 + ")"; elem.style.zoom = 1; };
	elem.style.opacity = value;
  } else elem.style[name] = typeof(value) == 'number' && !(/z-?index|font-?weight|opacity|zoom|line-?height/i).test(name) ? value + 'px': value;
}

/**
 * Store data connected to element
 **/

var expand = "VK" + now(), vk_uuid = 0, vk_cache = {};

// Get or set element data
function data(elem, name, data) {
	var id = elem[ expand ], undefined;
	if ( !id )
		id = elem[ expand ] = ++vk_uuid;

	if (name && !vk_cache[id])
		vk_cache[id] = {};

	if (data !== undefined)
		vk_cache[id][name] = data;

	return name ?
		vk_cache[id][name] :
		id;
}

function removeData(elem, name) {
  var id = elem[expand];
  if (name) {
		if (vk_cache[id]) {
			delete vk_cache[id][name];
			name = "";
			for (name in vk_cache[id])
				break;

			if (!name)
				removeData(elem);
		}
	} else {
		try {
			delete elem[expand];
		} catch(e){ // fix for IE
			if (elem.removeAttribute)
				elem.removeAttribute(expand);
		}
		delete vk_cache[id];
	}
}

/**
 * Simple FX
 **/
function animate(el, params, speed, callback) {
  el = ge(el);
  var options = extend({}, typeof speed == 'object' ? speed : {duration: speed, onComplete: callback || function(){}});
  var tween = data(el, 'tween');
  if (tween) {
	tween.setOptions(options);
  } else {
	tween = data(el, 'tween', new Fx.Base(el, options));
  }
  return tween.custom(params);
}

function fadeTo(el, speed, to, callback) {return animate(el, {opacity: to}, speed, callback);}

var Fx = fx = {};

Fx.Transitions = {
  linear: function(t, b, c, d) { return c*t/d + b; },
  sineInOut: function(t, b, c, d) { return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; }
};

Fx.Attrs = [
  [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ],
  [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ],
  [ "opacity" ]
];

function genFx(type, num){
  var obj = {};
  each( Fx.Attrs.concat.apply([], Fx.Attrs.slice(0,num)), function(){
	obj[this] = type;
  });
  return obj;
};

// Shortcuts for custom animations
each({slideDown: genFx('show', 1),
 slideUp: genFx('hide', 1),
 slideToggle: genFx('toggle', 1),
 fadeIn: {opacity: 'show'},
 fadeOut: {opacity: 'hide'},
 fadeToggle: {opacity: 'toggle'}}, function(f, val){
 window[f] = function(el, speed, callback){return animate(el, val, speed, callback);}
});


Fx.Base = function(el, options){
  this.element = ge(el);
  this.setOptions(options);
  this.now = {};
};
Fx.Base.prototype = {

  setOptions: function(options){
	if (this.isTweening()) return;
	this.options = extend({
	  onComplete: function(){},
	  transition: Fx.Transitions.sineInOut,
	  duration: 500
	}, options || {});
  },

  step: function(){
	var time = new Date().getTime();
	if (time < this.time + this.options.duration){
	  this.cTime = time - this.time;
	  this.setNow();
	} else {
	  setTimeout(this.options.onComplete.bind(this, this.element), 10);
	  this.clearTimer();
	  this.now = this.to;
	  if (this.options.hide) hide(this.element);
	  if (this.options.hide) {
		this.now = this.options.orig;
	  }
	  this.increase();
	  return false;
	}
	this.increase();
	return true;
  },

  setNow: function(){
	for (p in this.from) this.now[p] = this.compute(this.from[p], this.to[p]);
  },

  compute: function(from, to){
	var change = to - from;
	return this.options.transition(this.cTime, from, change, this.options.duration);
  },

  clearTimer: function(){
	clearInterval(this.timer);
	this.timer = null;
	return this;
  },

  _start: function(from, to){
	if (this.timer) return;
	this.from = from;
	this.to = to;
	this.time = new Date().getTime();
	if (this.step()) this.timer = setInterval(this.step.bind(this), 13);
	return this;
  },

  increase: function(){
	for (var p in this.now) setStyle(this.element, p, this.now[p]);
  },

  isTweening: function() {
	return this.timer ? true : false;
  },

  custom: function(prop){
	if (this.isTweening()) return false;

	var from = {}, to = {}, visible = isVisible(this.element), from_val, self = this;

	self.options.show = self.options.hide = false;
	self.options.orig = {};

	for (p in prop) { 
	  if (prop[p] == 'show' && visible || prop[p] == 'hide' && !visible) 
		return this.options.onComplete.call(this, this.element);
	}
	each(prop, function(name, val){
	  from_val = parseFloat(getStyle(self.element, name)) || 0;
	  val = val == 'toggle' ? visible ? 'hide' : 'show' : val;
	  if (val == 'show') {
		self.options.show = true;
		val = from_val;
		from_val = (name == "width" || name == "height" ? 1 : 0);
		show(self.element);
	  } else if (val == 'hide') {
		self.options.hide = true;
		self.options.orig[name] = getStyle(self.element, name);
		val = 0;
	  } else {
		var parts = val.toString().match(/^([\d+-.]+)(.*)$/);
		val = parts ? parseFloat(parts[1]) : val;
	  }

	  if ((name == "height" || name == "width") && self.element.style) {
		self.element.style.overflow = 'hidden';
		self.element.style.display = 'block';
	  }
	  if (name == "opacity" && val > 0 && !visible) {
		setStyle(self.element, 'opacity', 0);
		from_val = 0;
		show(self.element);
	  }

	  if (from_val != val) {
		from[name] = from_val;
		to[name] = val;
	  }
	});
	return this._start(from, to);
  }
};


/**
 * Events
 **/
var KEY = window.KEY = {
  LEFT: 37,
 	UP: 38,
 	RIGHT: 39,
 	DOWN: 40,
 	DEL: 8,
 	TAB: 9,
 	RETURN: 13,
 	ESC: 27,
 	PAGEUP: 33,
 	PAGEDOWN: 34,
 	SPACE: 32
 };

function addEvent(elem, types, handler) {
  if (!elem || elem.nodeType == 3 || elem.nodeType == 8 )
		return;

	// For whatever reason, IE has trouble passing the window object
	// around, causing it to be cloned in the process
	if (elem.setInterval && elem != window)
		elem = window;

	var events = data(elem, "events") || data(elem, "events", []),	  
		handle = data(elem, "handle") || data(elem, "handle", function(){
				_eventHandle.apply(arguments.callee.elem, arguments);
			});
	// Add elem as a property of the handle function
	// This is to prevent a memory leak with non-native
	// event in IE.
	handle.elem = elem;
	each(types.split(/\s+/), function(index, type) {
	  var handlers = events[type];
	  if (!handlers) {
		handlers = events[type] = new Array();

	  if (elem.addEventListener) 
		elem.addEventListener(type, handle, false);
		else if (elem.attachEvent) 
		  elem.attachEvent('on' + type, handle);
	  }
	handlers.push(handler);
  });

	elem = null;
}

function removeEvent(elem, type, handler) {
  if (!elem) return;
  var events = data(elem, "events");
  if (events) {
	if (typeof(type) == 'string' && isArray(events[type])) {
	  if (isFunction(handler)) {
		for (var i = 0; i < events[type].length; i++) {
		  if (events[type][i] == handler) {
			delete events[type][i];
			break;
		  }
		}
	  } else {
		for (var i = 0; i < events[type].length; i++) {
		  delete events[type][i];
		}
	  }
	} else {
	  for (var i in events) {
		removeEvent(elem, i);
	  }
	  return;
	}
	for (var ret in events[type]) break;
	  if (!ret && data(elem, "handle")) {

			if (elem.removeEventListener)
				elem.removeEventListener(type, data(elem, "handle"), false);
			else if (elem.detachEvent)
				elem.detachEvent("on" + type, data(elem, "handle"));
		}
		ret = null;
		delete events[type];
  }
}

function cancelEvent(event) {
  var e = event.originalEvent || event;
  if (e.preventDefault)
		  e.preventDefault();
  if (e.stopPropagation) 
		  e.stopPropagation(); 
  e.cancelBubble = true;
  e.returnValue = false;
	return false;
}

function _eventHandle(event) {
  event = event || window.event;

  var originalEvent = event;
  event = clone(originalEvent);
  event.originalEvent = originalEvent;

	if (!event.target)
		event.target = event.srcElement || document; 

	// check if target is a textnode (safari)
	if ( event.target.nodeType == 3 )
		event.target = event.target.parentNode;

	if (!event.relatedTarget && event.fromElement)
		event.relatedTarget = event.fromElement == event.target 

	if ( event.pageX == null && event.clientX != null ) {
		var doc = document.documentElement, body = document.body;
		event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc.clientLeft || 0);
		event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc.clientTop || 0);
	}

	if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) )
		event.which = event.charCode || event.keyCode;

	// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
	if ( !event.metaKey && event.ctrlKey )
		event.metaKey = event.ctrlKey;

	// Add which for click: 1 == left; 2 == middle; 3 == right
	// Note: button is not normalized, so don't use it
	if ( !event.which && event.button )
		event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));

	var handlers = data(this, "events");
	if (!handlers || typeof(event.type) != 'string' || !handlers[event.type] || !handlers[event.type].length) { 
	  return;
  }
  try {

	for (var i = 0; i < handlers[event.type].length; i++) {
	  if (event.type == 'mouseover' || event.type == 'mouseout') {
		var parent = event.relatedElement;
		// Traverse up the tree
		while ( parent && parent != this )
			try { parent = parent.parentNode; }
			catch(e) { parent = this; }
	  if (parent == this) {
		continue
	  }
	  }
	  var ret = handlers[event.type][i].apply(this, arguments);
	  if (ret === false) {
		cancelEvent(event);
	  }
	}
	} catch (e) {
	  var a = 0;
	}
}

// Prevent memory leaks in IE
// And prevent errors on refresh with events like mouseover in other browsers
// Window isn't included so as not to unbind existing unload events
addEvent(window, "unload", function(){ 
	for (var id in vk_cache)
		if (vk_cache[id].handle && vk_cache[id].handle.elem != window)
			removeEvent(vk_cache[id].handle.elem);
});

// Dom ready event handler
(function(){
  var isRdy = false, rdyBnd = false, rdyList = [];

  window.onDomReady = function(fn) {
	bindRdy();
	if (isRdy){
	  fn.call(document);
	} else {
	  rdyList.push(function() {
		fn.call(document);
	  });
	}
  };

  var rdy = function() {
	if (!isRdy) {
	  isRdy = true;
	  if (rdyList) {
		var l = rdyList;
		l.reverse();
		while (fn = l.pop()) {
		  fn.apply(document);
		}
		rdyList = null;
	  }
	}
  };

  var bindRdy = function() {
	  if (rdyBnd) return;
		rdyBnd = true;

	  if(document.addEventListener && !browser.opera) 
		document.addEventListener("DOMContentLoaded", rdy, false);
		if (browser.msie && window == top) (function(){ 
			if (isRdy) return;
			try {document.documentElement.doScroll("left"); }
			catch (e) { setTimeout(arguments.callee,0); return; }
			rdy();
		  })();
		if (browser.opera) document.addEventListener("DOMContentLoaded", function(){
		  if (isRdy) return;
			rdy();
		}, false);
		if (browser.safari) { 
		  (function(){ 
			if(isRdy) return; 
			if (document.readyState != "loaded" && document.readyState != "complete") { 
			  setTimeout(arguments.callee,0); 
			  return;
			}
			rdy();
		  })();
		}
		addEvent(window, "load", rdy);
	}
})();



 var ajaxHistory = $ah = new (function(){
 	var _t = this;

 	var curHash = "";
 	var curHashes = {};
 	var frame = null;
 	var forceLoad = false;
 	var order = null;

 	_t.frameLoading = false;
 	_t.enabled = false;
 	_t.useCache = true;
 	_t.onLoad = {};
 	_t.cache = {};

 	var setHash = function(hash){
 		hash = hash.replace("#","");
 		if(location.hash != "#" + hash){
 			location.hash = "#" + hash;
 			if(browser.msie){
 				frame.src = 'blank.html?ahHash='+encodeURIComponent(hash);
 				_t.frameLoading = true;
 			}
 		}
 		return true;
 	};
 	var getHash = function(){
 		if(!browser.msie)return location.hash.replace("#","");
 		try{
 			var hash = ge('ahFrame').contentWindow.document.location.search.match(/ahHash=(.*)$/);
 			return decodeURIComponent((hash && hash[1]) || "").replace("#","");
 		}catch(e){return curHash;}
 	};
 	var splitHash = function(hash){
 		if(!hash)return {};
 		hash = hash.split("/");
 		if(hash.length == 1){
 			if(!_t.onLoad['default'])return {};
 			if(_t.onLoad['default'].show)hash[0] = _t.onLoad['default'].show.from(hash[0]);
 			return {'default':sortParams(hash[0])};
 		}
 		var parsed = {};
 		for(var i=0;i<hash.length;i+=2){
 			var h = hash[i];var p = hash[i+1];
 			if(_t.onLoad[h].show){p = sortParams(_t.onLoad[h].show.from(p));}
 			else{
 				p = sortParams(p);
 				if(!p && _t.onLoad[h])p = sortParams(_t.onLoad[h].def);
 			}
 			parsed[h] = p;
 		}
 		return parsed;
 	};
 	var joinHash = function(hash){
 		var joined = [];
 		var def = true;
 		for(var i in hash){
 			def = def && (i=='default');
 			var p = sortParams(hash[i]);
 			if(_t.onLoad[i].show){
 				var p1 = _t.onLoad[i].show.to(splitParams(hash[i]));
 				if(p1)p = p1;
 			}
 			joined.push(i + "/" + p);
 		}
 		if(def && joined[0])return joined[0].split("/")[1];
 		return joined.sort().join("/");
 	};
 	var splitParams = function(params){
 		if(!params)return {};
 		if(typeof(params)!='string')return params;
 		if(!/&|=/.test(params))return params;
 		var vals = params.split("&");
 		var p = {};
 		for(var i=0;i<vals.length;i++){
 			var v = vals[i].split("=");
 			p[v[0]] = v[1];
 		}
 		return p;
 	};
 	var sortParams = function(params){
 		if(typeof(params)=='number')return params+'';
 		if(typeof(params)!='string'){
 			params = ajx2q(params);
 		}
 		return params.split("&").sort().join("&");
 	};

 	_t.init = function(){
 		if(!this.enabled)return;
 		for(var i in _t.onLoad){
 			var p = sortParams(_t.onLoad[i].def);
 			curHashes[i] = p;
 		};
 		var handler = function(){
 			var origHash = getHash();
 			if(origHash==curHash && !forceLoad)return;
 			var state = splitHash(origHash);
 			var hash = joinHash(state);
 			if(hash!=curHash || forceLoad){
 				var ordered = order || _t.onLoad;
 				for(var i in ordered){
 					if(order)i = ordered[i];
 					var l = _t.onLoad[i];
 					var p = state[i] || sortParams(l.def);
 					if(p!=curHashes[i] || i == forceLoad){
 						forceLoad = false;
 						if(l.before && !l.before(splitParams(p))){
 							curHashes[i] = p;
 							continue;
 						}
 						if(!_t.cache[i])_t.cache[i] = {};
 						if(!_t.useCache || !_t.cache[i][p]){
 							_t.getData(l,i,p,hash);
 						}else if(l.done){
 							l.done({}, _t.cache[i][p]);
 						}
 						curHashes[i] = p;
 					}
 				}
 				curHash = hash;
 				if(browser.msie){
 					if(location.hash != "#" + hash)location.hash = "#" + hash;
 				}
 			}
 		};
 		if(browser.msie){
 			var initHash = encodeURIComponent(location.hash);
 			document.body.innerHTML += "<iframe id='ahFrame' style='position:absolute;left:-1000px;width:0;height:0' src='/blank.html?ahHash="+initHash+"'></iframe>";
 			frame = ge('ahFrame');

 			frame.attachEvent('onreadystatechange', function() {
 				if(frame.contentWindow.document.readyState == 'complete'){
 					_t.frameLoading = false;
 					handler();
 				}
 			}, false);
 			frame.attachEvent('onload', function() {
 				if(_t.frameLoading){
 					_t.frameLoading = false;
 					handler();
 				}
 			}, false);

 			setInterval(function(){
 				if(!_t.frameLoading && (location.hash.replace("#", "") != getHash())){
 					setHash(location.hash);
 				}				
 			}, 200);
 		}else{
 			setInterval(handler,150);
 		}
 	};
 	_t.go = function(s, params){
 		if(params===undefined){params = s; s = 'default';}
 		var state = splitHash(curHash);
 		state[s] = sortParams(params);
 		var hash = joinHash(state);
 		setHash(hash);
 		forceLoad = s;
 	};
 	_t.getData = function(loadObj, id, params, hash){
 		var a = new Ajax(
 		(function(l,i,p,t){return function(res,text){
 			if(l.done)l.done(res,text);
 			if(t.useCache)_t.cache[i][p] = text;
 			t.frameLoading = false;
 		};})(loadObj,id,params, _t), 
 		(function(l,i,p,t){return function(res,text){
 			if(l.fail)l.fail(res,text);
 			t.frameLoading = false;
 		};})(loadObj,id,params, _t),
 		true);
 		a.post(loadObj.url, params);
 	};
 	_t.prepare = function(id, params){
 		_t.enabled = true;
 		if(params===undefined){params = id; id = 'default';}
 		_t.onLoad[id] = params;
 	};
 	_t.validateHash = function(hash){return joinHash(splitHash(hash));};
 	_t.clearCache = function(id){_t.cache[id] = {}};

})();

onDomReady(function(){ajaxHistory.init()});




/** 
 * Message box
 **/
var _message_box_guid = 0,
	_message_boxes = [],
	_message_box_shown = false,
	_show_flash_timeout;
function MessageBox(options) {
  var defaults = {
	type: "MESSAGE", // "MESSAGE" || "POPUP"
	hideOnClick: true,
	title: "Alert",
	width: "410px",
	height: "auto",
	hideFlash: true
  };

  options = extend(defaults, options);

  var buttonsCount = 0, body = document.getElementsByTagName('body')[0],
	  transparentBG, boxContainer, boxBG, boxContainer, boxLayout, boxTitle, boxBody, boxControls, buttonYes, buttonNo,
	  guid = _message_box_guid++, isVisible = false;

  transparentBG = document.createElement('div');
  transparentBG.className = 'popup_transparent_bg';
  hide(transparentBG);

  //boxBG = document.createElement('div');
  //boxBG.className = 'popup_box_bg';
  //hide(boxBG);

  transparentBG.innerHTML = '<iframe class="box_frame"></iframe>';
  boxContainer = document.createElement('div');
  boxContainer.className = 'popup_box_container';
  hide(boxContainer);
  boxContainer.innerHTML = '<div class="box_layout"><div class="box_title_wrap"><div class="box_title"></div></div><div class="box_body"></div><div class="box_controls"></div></div>';

  boxFrame = geByClass('box_frame', transparentBG)[0];
  boxLayout = geByClass('box_layout', boxContainer)[0];
  boxTitle = geByClass('box_title', boxContainer)[0];
  boxBody = geByClass('box_body', boxContainer)[0];
  boxControls = geByClass('box_controls', boxContainer)[0];

  transparentBG.style.height = getSize(document)[1] + 'px';
  addEvent(document, 'keydown', function(e) {
	if (e.keyCode == 27) {
	  hideBox();
	}
  });

  onDomReady(function() {
	body.appendChild(transparentBG);
	body.appendChild(boxContainer);
	refreshCoords();
	refreshBox();
  });

  // Refresh box position
  function refreshCoords() {
	var height = window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight);
	containerSize = getSize(boxContainer);
	boxFrame.style.top = 
	boxContainer.style.top = Math.max(document.documentElement.scrollTop,  body.scrollTop) + (height - containerSize[1]) / 3 + 'px';
	boxFrame.style.marginLeft =
	boxContainer.style.marginLeft =  - containerSize[0] / 2 + 'px';
	setStyle(boxFrame, 'width', containerSize[0]);
	setStyle(boxFrame, 'height', containerSize[1]);

  }

  // Add button
  function addButton(options) {
	buttonsCount++;
	if (typeof options != 'object') options = {};
	options = extend({
		label: 'Button' + buttonsCount,
		style: 'button_yes'
	}, options);

	var buttonWrap = document.createElement('div');
	buttonWrap.className = "button_wrap " + options.style;
	buttonWrap.innerHTML = '<div class="box_button" id="button' + guid + '_' + buttonsCount + '">' + options.label + '</div>';
	boxControls.appendChild(buttonWrap);
	addEvent(buttonWrap, 'mouseover', function() {
	  addClass(this.firstChild, 'button_hover');
	});
	addEvent(buttonWrap, 'mouseout', function() {
	  removeClass(this.firstChild, 'button_hover');
	});
	if (isFunction(options.onClick)) {
	  addEvent(buttonWrap, 'click', options.onClick);
	}
	return buttonWrap;
  }

  // Remove buttons
  function removeButtons() {
	buttonsCount = 0;
	boxControls.innerHTML = '';
  }

  // Refresh box properties
  function refreshBox() {
	// Set title
	boxTitle.innerHTML = options.title;

	// Set box dimensions
	boxContainer.style.width = typeof(options.width) == 'string' ? options.width : options.width + 'px';
	boxContainer.style.height = typeof(options.height) == 'string' ? options.height : options.height + 'px';

	// Switch box type
	removeClass(boxContainer, 'box_no_controls');
	removeClass(boxContainer, 'message_box');

	removeEvent(boxContainer, 'click');
	if (options.hideOnClick && options.type == 'POPUP') {
	  addEvent(boxContainer, 'click', function(){
		hideBox();
	  });
	}

	switch (options.type) {
	  case 'POPUP':
		addClass(boxContainer, 'box_no_controls');
		addEvent(transparentBG, 'click', function(){
		  hideBox();
		});
	  break;

	  case 'MESSAGE':
		addClass(boxContainer, 'message_box');
		removeEvent(transparentBG, 'click');
	  break;
	}
  }

  // Show box
  function showBox() {
	if (isVisible) return;
	isVisible = true;
	each(_message_boxes, function(box_guid, box) {
	  if (box_guid != guid) box.hide();
	});
	// Show blocking background
	show(transparentBG);
	// Show box

//	fadeIn(boxContainer, 200);
	show(boxContainer); // AntanubiS - Video wall posting fails with fadeIn =(

	refreshCoords();

	// Hide all flash movies on the page
	if (options.hideFlash) {
	  clearTimeout(_show_flash_timeout);
	  each(body.getElementsByTagName('embed'), function(i, el) {
		el.style.visibility = 'hidden';
	  });
	  each(body.getElementsByTagName('object'), function(i, el) {
		el.style.visibility = 'hidden';
	  });
	}

	if (options.onShow) {
	  options.onShow();
	}
  }
  // Hide box
  function hideBox(speed) {
	if (!isVisible) return;
	isVisible = false;

	var onHide = function () {
	  hide(boxContainer);
	  hide(transparentBG);
	  // Show all flash movies on the page
	  if (options.hideFlash) {
	   if (_show_flash_timeout) clearTimeout(_show_flash_timeout);
	   _show_flash_timeout = setTimeout(function() {
		 each(body.getElementsByTagName('embed'), function(i, el) {
		  el.style.visibility = 'visible';
		 });
		 each(body.getElementsByTagName('object'), function(i, el) {
		  el.style.visibility = 'visible';
		 });
	   }, 50);
	  }
	  if (options.onHide) options.onHide();
	}
	if (speed > 0) {
	  fadeOut(boxContainer, speed, function(){
		onHide(); 
	  });
	} else {
	  onHide();
	}
  }

  var retBox = {
	guid: guid,
	// Show box
	show: function(speed) {
	  showBox(speed); return this;
	},

	// Hide box
	hide: function(speed) {
	  hideBox(speed); return this;
	},

	isVisible: function() {
	  return this.isVisible;
	},

	// Insert html content into the box
	content: function(html) {
	  boxBody.innerHTML = html;
	  refreshCoords();
	  return this;
	},

	// Load html content from URL
	loadContent: function(url, params) {
	  var ajax = new Ajax(function(ajaxObj, responseText) {
		 boxBody.innerHTML = responseText;
		 refreshCoords();
		 if (options.onLoad) options.onLoad(responseText);
	  }, function(ajaxObj, responseText) {
		boxBody.innerHTML = 'Request error occured.';
		if (options.onLoadError) options.onLoadError(responseText);
	  });
	  // Show loader
	  boxBody.innerHTML = '<div class="box_loader"></div>';

	  // Load remote html using get request
	  if (typeof params != 'object') params = {};   
	  ajax.post(url, params);  

	  return this;
	},

	// Add button
	addButton: function(options) {
	  addButton(options);
	  return this;
	},

	// Remove buttons
	removeButtons: function(options) {
	  removeButtons();
	  return this;
	},

	// Update box options
	setOptions: function(newOptions) {
	  options = extend(options, newOptions);
	  refreshBox();
	  return this;
	}
  };
  _message_boxes[guid] = retBox;
  return retBox;
};

</script>


<script type="text/javascript">
var photoBox;

function showPhoto(url, photo_id) {
  pic = new Image(); 
  pic.src = url; 
  if (!pic.width) {
   var coords = durovGetXY(ge('photo'+photo_id));
   ge('imageProgress').style.height = ge('photo'+photo_id).offsetHeight+"px";
   ge('imageProgress').style.left = coords[0]+"px";
   ge('imageProgress').style.top = coords[1]+"px";
   show('imageProgress');
   setTimeout("showPhoto('"+url+"')", 1500);
   return false;
  }
  if (!photoBox) photoBox = new MessageBox({type: 'POPUP', width: 'auto'});
  photoBox.content('<img src="' + url + '" />').show();
  hide('imageProgress');
  return false;
}

</script>




<div class="photos"><a href="#" id="photo2093433" onclick="showPhoto('http://cs302.vkontakte.ru/u13481912/51344350/x_4314a6af.jpg', 2093433); return false;" class="imageLink"><img src="http://cs302.vkontakte.ru/u13481912/51344350/m_93deac69.jpg"></a></div>
<div class="photos"><a href="#" id="photo2093433" onclick="showPhoto('http://cs302.vkontakte.ru/u13481912/51344350/x_4314a6af.jpg', 2093433); return false;" class="imageLink"><img src="http://cs302.vkontakte.ru/u13481912/51344350/m_93deac69.jpg"></a></div>
<div class="photos"><a href="#" id="photo2093433" onclick="showPhoto('http://cs302.vkontakte.ru/u13481912/51344350/x_4314a6af.jpg', 2093433); return false;" class="imageLink"><img src="http://cs302.vkontakte.ru/u13481912/51344350/m_93deac69.jpg"></a></div>
<div class="photos"><a href="#" id="photo2093433" onclick="showPhoto('http://cs302.vkontakte.ru/u13481912/51344350/x_4314a6af.jpg', 2093433); return false;" class="imageLink"><img src="http://cs302.vkontakte.ru/u13481912/51344350/m_93deac69.jpg"></a></div>

Nekromancer · April 3, 2009

*CRAZY* я успел 10 раз по ржать пока спустил скролл до конца...

ггг нафигаа вам весь ЦСС и ДЖС код??

П.С. на самом деле я не лазая по вконтакту, можно по подробнее чтоза просмотр картинок там?

Edited April 3, 2009 by Nekromancer

psywalker · April 3, 2009

Antuan · April 4, 2009

Я понимаю... Что полная жесть.

Но сохраните "кодик" :huh: И посмотрите на функционал

Я и обратился к гуру за помощью!

Antuan · April 8, 2009

Короче тухлый форум

Veseloff · April 8, 2009

Короче тухлый форум

А знаешь почему? Да потому что есть такие как ты. Чем меньше пишут в этот форум такие как ты - тем форум лучше.

s0rr0w · April 8, 2009

Короче тухлый форум

Да, и пойдите всем друзьям расскажите, какой тухлый форум....

Victor Ananiev · April 9, 2009

...и будет нам счастье....

Antuan · April 22, 2009

Просто я не могу точно сформулировать что именно мне надо (в общем комплекс задач)

Вот и обратился сюда...

Скинул код... (Который не до конца очистил)

И прошу, помощи...

А в ответ... Ни фига...

Только бесполезные восклики - типо ты ***

Нормальные адекватные люди скажут куда можно обратится, и где можно найти информации по данному вопросу.

(Только не надо дешевых ответов из серии - www.google.com)

Пока в теме не встретились такие...

Veseloff · April 23, 2009

А как можно ответить на вопрос, который человек не может даже нормально сформулировать? Ну, допустим, я видел как выглядит просмотр фоток на "Вконтакте" - ничего необычного. Такое можно реализовать при помощи обычного пхп и при помощи аякса - совершенно ничего сложного. Плюс по инету валяется еще тысячи разных "фотоальбомов", поэтому, конечно, проще всего погуглить. В этом форуме могут помочь, если есть какие-то вопросы, касающиеся особенностей браузеров, языков и даже иногда помочь исправить корявый кусок кода (естественно, размером меньше, чем 2570 строк), но никто никогда не станет вам давать готовый код. Говорить, что форум тухлый, потому что его юзеры не делают за вас вашу работу - глупо. Так что мой ответ самый дешевый - гуглите и будет вам счастье.

Searcher · April 23, 2009

Veseloff, полностью поддерживаю :lol:

Victor Ananiev · April 23, 2009

+1) тем более что про свежесть рассказывает человек, у которого 4 сообщения, а на тот момент одно)

Aliance · April 23, 2009

Чего Вы злые такие, накинулись на человека.

А так понимаю, что вы хотите реализовать нечто вроде lightbox`а. На jQuery есть масса таких плагинов (скрываю экран под полупрозрачным темным фоном и выводят слой с картинкой на передний план), например: floatbox, lightbox и т.д.

Justnewone · April 23, 2009

После слов "тухлый форум" человек мог бы и извинения принести. Совершенно справедливо, что мало желающих давать советы после такого. Если вдруг, просто не увидели те, кто реально мог помочь, не ответили или тут надо резидентно сидеть как фаервол, вылавливать вопросы и быстро отвечать???

ELNINO · June 1, 2009

Немного подчистил код, сразу говорю я нуб поэтому просто убрал те блоки которые никак не влияют, если есть у кого желание можете подредактировать оставшиеся блоки ))

<style type="text/css" />
/* message box*/
.popup_transparent_bg {
  top:0;
  left:0;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #FFF;
	filter:alpha(opacity=0);
	opacity:0.0;
	z-index: 1000;
}

.box_frame{
  left: 50%;
	position: absolute;
}

.popup_box_bg {
}

.popup_box_container {
  position: absolute;
	left: 50%;
	z-index: 1001;
  padding: 10px;
}

.message_box {
	background-color: none;
  /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./../images/transpx2.png',sizingMethod='scale'); */
  background: url('./../images/transpx2.png');
}

.box_loader {
  height: 50px;
  background: url('/../images/progress7.gif') center no-repeat;
}

.box_title_wrap {
  background-color: #4B769F;
  border: 1px solid #45688E;
  padding: 0px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}

.box_body {
  background-color: #fff;
  border: 1px solid #aaa;
  border-width: 0px 1px 0px 1px;
  border-bottom: 1px solid #ccc;
  padding:16px 14px;
  line-height: 14px;
}

.box_controls {
  text-align: center;
  padding:5px;
  height: 30px;
  background-color:#f2f2f2;
  border: 1px solid #aaa;
  border-top: 0px;
}

.box_controls .button_wrap {
  margin: 2px 5px;
  cursor: pointer;
  float: right;
  width: auto;
  height: auto;
}

.box_controls .button_wrap div {
  padding: 4px 14px;
}
.box_controls .button_yes {
  border: 1px solid #2B587A;
}
.box_controls .button_yes div {
  border-top: 1px solid #6E97C4;  
  background-color:#4B769F;
  color: #FFF;
}
.box_controls .button_yes div.button_hover {
  background-color: #678BAE;
}

.box_controls .button_no {
  border: 1px solid #ccc;
}
.box_controls .button_no div {
  border-top: 1px solid #fff;
  background-color:#eaeaea;
  color: #000;
  text-decoration: none;
}
.box_controls .button_no div.button_hover {
  background-color: #f5f5f5;
}

.box_title {
border-top: 1px solid #6088B3;
padding: 4px 10px 5px 10px;
}


.box_no_controls {
	background-color: #DAE2E8;
	border: 1px solid #ADBBCA;
}

.box_no_controls .box_title_wrap, .box_no_controls .box_layout .box_controls {
  display: none;
}

.box_no_controls .box_body {
  border: none;
  padding: 0;
}
</style>


<script type="text/javascript">
var base_domain = base_domain || "/";

var browser = {
  opera: /opera/i.test(navigator.userAgent),
  msie: (!this.opera && /msie/i.test(navigator.userAgent)),
  msie6: (!this.opera && /msie 6/i.test(navigator.userAgent)),
  mozilla: /firefox/i.test(navigator.userAgent),
  chrome: /chrome/i.test(navigator.userAgent),
  safari: (!(/chrome/i.test(navigator.userAgent)) && /webkit|safari|khtml/i.test(navigator.userAgent))
}

/**
* DOM
**/
function ge() {
  var ea;
  for (var i = 0; i < arguments.length; i++) {
	var e = arguments[i];
	if (typeof e == 'string')
	  e = document.getElementById(e);
	if (arguments.length == 1)
	  return e;
	if (!ea)
	  ea = new Array();
	ea.push(e);
  }
  return ea;
}

function geByClass(searchClass, node, tag) {
  var classElements = new Array();
  if ( node == null )
		  node = document;
  if ( tag == null )
		  tag = '*';
  if (node.getElementsByClassName) {
	classElements = node.getElementsByClassName(searchClass);
	if (tag != '*') {
	  for (i = 0; i < classElements.length; i++) {
		if (classElements.nodeName == tag) 
		  classElements.splice(i, 1);
	  }
	}
	return classElements;
  }
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
  for (i = 0, j = 0; i < elsLen; i++) {
	if ( pattern.test(els[i].className) ) {
	  classElements[j] = els[i];
	  j++;
	}
  }
  return classElements;
}

function show(elem) {
  if (arguments.length > 1) {
	for (var i = 0; i < arguments.length; i++) {
	  show(arguments[i]);  
	}
	return;
  }
  elem = ge(elem);
  if (!elem) return;
	var old = data(elem, "olddisplay");
	elem.style.display = old || "";

	if (getStyle(elem, 'display') == "none" ) {
		elem.style.display = data(elem, "olddisplay", "block");
	}
}

function hide(elem){
  if (arguments.length > 1) {
	for (var i = 0; i < arguments.length; i++) {
	  hide(arguments[i]);  
	}
	return;
  }
  elem = ge(elem);
  if (!elem) return;
	if (getStyle(elem, 'display') != "none")
		data(elem, "olddisplay", elem.style.display);
	elem.style.display = "none";
}
function isVisible(elem) {
elem = ge(elem);
return getStyle(elem, 'display') != 'none' && getStyle(elem, 'visibility') != 'hidden';
}
function toggle(elem) {
  if (isVisible(elem)) {
	hide(elem);
  } else {
	show(elem);
  }
}
window.shide = toggle;

function getXY(obj) {
if (!obj || obj == undefined) return;
var left = 0, top = 0;
if (obj.offsetParent) {
  do {
   left += obj.offsetLeft;
   top += obj.offsetTop;
  } while (obj = obj.offsetParent);
}
return [left,top];
}

function getSize(elem, woBounds) {
  var s = [0, 0];
  if (elem == document) {
	s =	[Math.max(
				document.documentElement["clientWidth"],
				document.body["scrollWidth"], document.documentElement["scrollWidth"],
				document.body["offsetWidth"], document.documentElement["offsetWidth"]
			), Math.max(
			  document.documentElement["clientHeight"],
			  document.body["scrollHeight"], document.documentElement["scrollHeight"],
			  document.body["offsetHeight"], document.documentElement["offsetHeight"]
		  )];
  } else if (elem){
	function getWH() {
	  s = [elem.offsetWidth, elem.offsetHeight];
	  if (!woBounds) return;
	  var padding = 0, border = 0;
	  each(s, function(i, v) {
		var which = i ? ['Top', 'Bottom'] : ['Left', 'Right'];
		each(which, function(){
		  s[i] -= parseFloat(getStyle(elem, "padding" + this)) || 0;
				  s[i] -= parseFloat(getStyle(elem, "border" + this + "Width")) || 0;
		});
	  });
	  s = [Math.round(s[0]), Math.round(s[1])];
	}
	if (!isVisible(elem)) { 
	  var props = {position: "absolute", visibility: "hidden", display:"block"};
	  var old = {};
	  each(props, function(i, val){
		old[i] = elem.style[i];
		elem.style[i] = val;
	  });
	  getWH();
	  each(props, function(i, val){
		elem.style[i] = old[i];
	  });
	} else getWH();

  } 
  return s;
}
/** * *************************************************** */


/**
*  Useful utils
*/

Function.prototype.bind = function(object) {
	var __method = this;
	return function() {
		return __method.apply(object, arguments);
	}
};

function isFunction(obj) {
	return Object.prototype.toString.call(obj) === "[object Function]";
}

function isArray(obj) {
	return Object.prototype.toString.call(obj) === "[object Array]";
}

function now() {
  return +new Date;
}

function trim(text) {
  return (text || "").replace(/^\s+|\s+$/g, "");
}

/**
*  Arrays, objects
**/

function each(object, callback) {
	var name, i = 0, length = object.length;

	if ( length === undefined ) {
		for ( name in object )
			if ( callback.call( object[ name ], name, object[ name ] ) === false )
				break;
	} else
		for ( var value = object[0];
			i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}

	return object;
};
function indexOf(arr, value, from) {
  from = (from == null) ? 0 : from; 
  var m = arr.length;
  for(var i = from; i < m; i++) 
	if (arr[i] == value)
	   return i;
   return -1;
}

function clone(obj) {
  var newObj = {};
  for (var i in obj) {
	newObj[i] = obj[i];
  }
  return newObj;
}


// Extending object by another
function extend() {
	// copy reference to target object
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

	// Handle a deep copy situation
	if (typeof target === "boolean") {
		deep = target;
		target = arguments[1] || {};
		// skip the boolean and the target
		i = 2;
	}

	// Handle case when target is a string or something (possible in deep copy)
	if (typeof target !== "object" && !isFunction(target))
		target = {};

	// return target object if only one argument is passed
	if (length == i) {
		return target;
	}

	for (; i < length; i++)
		// Only deal with non-null/undefined values
		if ((options = arguments[i]) != null)
			// Extend the base object
			for (var name in options) {
				var src = target[name], copy = options[name];

				// Prevent never-ending loop
				if (target === copy)
					continue;

				// Recurse if we're merging object values
				if (deep && copy && typeof copy === "object" && !copy.nodeType)
					target[name] = extend(deep, 
						// Never move original objects, clone them
						src || (copy.length != null ? [] : { })
					, copy);

				// Don't bring in undefined values
				else if (copy !== undefined)
					target[name] = copy;
			}

	// Return the modified object
	return target;
}


/**
* CSS classes
**/

function hasClass(obj, name) {
  return obj && (new RegExp('(\\s|^)' + name + '(\\s|$)')).test(obj.className);
}

function addClass(obj, name) {
  if (obj && !hasClass(obj, name)) obj.className = (obj.className ? obj.className + ' ' : '') + name;
}

function removeClass(obj, name) {
  if (obj && hasClass(obj, name)) {
	obj.className = obj.className.replace((new RegExp('(\\s|^)' + name + '(\\s|$)')), ' ');
  }
}

// Get computed style
function getStyle(elem, name) {  

  if (name == "width" || name == "height") {
		return getSize(elem, true)[({'width':0, 'height':1})[name]] + 'px';
	}
  var ret, defaultView = document.defaultView || window;
  if (defaultView.getComputedStyle) {
	name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
	var computedStyle = defaultView.getComputedStyle( elem, null );
			if (computedStyle)
				ret = computedStyle.getPropertyValue(name);
  } else if (elem.currentStyle) {
	if (name == 'opacity' && browser.msie) {
		  var filter = elem.currentStyle['filter'];
		return filter && filter.indexOf("opacity=") >= 0 ?
			  (parseFloat(filter.match(/opacity=([^)]*)/)[1] ) / 100) + '' : '1';
	  }
		var camelCase = name.replace(/\-(\w)/g, function(all, letter){
			return letter.toUpperCase();
		});
		ret = elem.currentStyle[name] || elem.currentStyle[camelCase];
		// If we're not dealing with a regular pixel number
		// but a number that has a weird ending, we need to convert it to pixels
		if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
			// Remember the original values
			var left = style.left, rsLeft = elem.runtimeStyle.left;

			// Put in the new values to get a computed value out
			elem.runtimeStyle.left = elem.currentStyle.left;
			style.left = ret || 0;
			ret = style.pixelLeft + "px";

			// Revert the changed values
			style.left = left;
			elem.runtimeStyle.left = rsLeft;
		}
	}
	return ret;
}

function setStyle(elem, name, value){
  elem = ge(elem);
  if (name == 'opacity'){
	if (browser.msie) {elem.style.filter = "alpha(opacity=" + value*100 + ")"; elem.style.zoom = 1; };
	elem.style.opacity = value;
  } else elem.style[name] = typeof(value) == 'number' && !(/z-?index|font-?weight|opacity|zoom|line-?height/i).test(name) ? value + 'px': value;
}

/**
* Store data connected to element
**/

var expand = "VK" + now(), vk_uuid = 0, vk_cache = {};

// Get or set element data
function data(elem, name, data) {
	var id = elem[ expand ], undefined;
	if ( !id )
		id = elem[ expand ] = ++vk_uuid;

	if (name && !vk_cache[id])
		vk_cache[id] = {};

	if (data !== undefined)
		vk_cache[id][name] = data;

	return name ?
		vk_cache[id][name] :
		id;
}

function removeData(elem, name) {
  var id = elem[expand];
  if (name) {
		if (vk_cache[id]) {
			delete vk_cache[id][name];
			name = "";
			for (name in vk_cache[id])
				break;

			if (!name)
				removeData(elem);
		}
	} else {
		try {
			delete elem[expand];
		} catch(e){ // fix for IE
			if (elem.removeAttribute)
				elem.removeAttribute(expand);
		}
		delete vk_cache[id];
	}
}

/**
* Events
**/
var KEY = window.KEY = {
  LEFT: 37,
	UP: 38,
	RIGHT: 39,
	DOWN: 40,
	DEL: 8,
	TAB: 9,
	RETURN: 13,
	ESC: 27,
	PAGEUP: 33,
	PAGEDOWN: 34,
	SPACE: 32
};

function addEvent(elem, types, handler) {
  if (!elem || elem.nodeType == 3 || elem.nodeType == 8 )
		return;

	// For whatever reason, IE has trouble passing the window object
	// around, causing it to be cloned in the process
	if (elem.setInterval && elem != window)
		elem = window;

	var events = data(elem, "events") || data(elem, "events", []),	  
		handle = data(elem, "handle") || data(elem, "handle", function(){
				_eventHandle.apply(arguments.callee.elem, arguments);
			});
	// Add elem as a property of the handle function
	// This is to prevent a memory leak with non-native
	// event in IE.
	handle.elem = elem;
	each(types.split(/\s+/), function(index, type) {
	  var handlers = events[type];
	  if (!handlers) {
		handlers = events[type] = new Array();

	  if (elem.addEventListener) 
		elem.addEventListener(type, handle, false);
		else if (elem.attachEvent) 
		  elem.attachEvent('on' + type, handle);
	  }
	handlers.push(handler);
  });

	elem = null;
}

function removeEvent(elem, type, handler) {
  if (!elem) return;
  var events = data(elem, "events");
  if (events) {
	if (typeof(type) == 'string' && isArray(events[type])) {
	  if (isFunction(handler)) {
		for (var i = 0; i < events[type].length; i++) {
		  if (events[type][i] == handler) {
			delete events[type][i];
			break;
		  }
		}
	  } else {
		for (var i = 0; i < events[type].length; i++) {
		  delete events[type][i];
		}
	  }
	} else {
	  for (var i in events) {
		removeEvent(elem, i);
	  }
	  return;
	}
	for (var ret in events[type]) break;
	  if (!ret && data(elem, "handle")) {

			if (elem.removeEventListener)
				elem.removeEventListener(type, data(elem, "handle"), false);
			else if (elem.detachEvent)
				elem.detachEvent("on" + type, data(elem, "handle"));
		}
		ret = null;
		delete events[type];
  }
}

function cancelEvent(event) {
  var e = event.originalEvent || event;
  if (e.preventDefault)
		  e.preventDefault();
  if (e.stopPropagation) 
		  e.stopPropagation(); 
  e.cancelBubble = true;
  e.returnValue = false;
	return false;
}

function _eventHandle(event) {
  event = event || window.event;

  var originalEvent = event;
  event = clone(originalEvent);
  event.originalEvent = originalEvent;

	if (!event.target)
		event.target = event.srcElement || document; 

	// check if target is a textnode (safari)
	if ( event.target.nodeType == 3 )
		event.target = event.target.parentNode;

	if (!event.relatedTarget && event.fromElement)
		event.relatedTarget = event.fromElement == event.target 

	if ( event.pageX == null && event.clientX != null ) {
		var doc = document.documentElement, body = document.body;
		event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc.clientLeft || 0);
		event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc.clientTop || 0);
	}

	if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) )
		event.which = event.charCode || event.keyCode;

	// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
	if ( !event.metaKey && event.ctrlKey )
		event.metaKey = event.ctrlKey;

	// Add which for click: 1 == left; 2 == middle; 3 == right
	// Note: button is not normalized, so don't use it
	if ( !event.which && event.button )
		event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));

	var handlers = data(this, "events");
	if (!handlers || typeof(event.type) != 'string' || !handlers[event.type] || !handlers[event.type].length) { 
	  return;
  }
  try {

	for (var i = 0; i < handlers[event.type].length; i++) {
	  if (event.type == 'mouseover' || event.type == 'mouseout') {
		var parent = event.relatedElement;
		// Traverse up the tree
		while ( parent && parent != this )
			try { parent = parent.parentNode; }
			catch(e) { parent = this; }
	  if (parent == this) {
		continue
	  }
	  }
	  var ret = handlers[event.type][i].apply(this, arguments);
	  if (ret === false) {
		cancelEvent(event);
	  }
	}
	} catch (e) {
	  var a = 0;
	}
}

// Prevent memory leaks in IE
// And prevent errors on refresh with events like mouseover in other browsers
// Window isn't included so as not to unbind existing unload events
addEvent(window, "unload", function(){ 
	for (var id in vk_cache)
		if (vk_cache[id].handle && vk_cache[id].handle.elem != window)
			removeEvent(vk_cache[id].handle.elem);
});

// Dom ready event handler
(function(){
  var isRdy = false, rdyBnd = false, rdyList = [];

  window.onDomReady = function(fn) {
	bindRdy();
	if (isRdy){
	  fn.call(document);
	} else {
	  rdyList.push(function() {
		fn.call(document);
	  });
	}
  };

  var rdy = function() {
	if (!isRdy) {
	  isRdy = true;
	  if (rdyList) {
		var l = rdyList;
		l.reverse();
		while (fn = l.pop()) {
		  fn.apply(document);
		}
		rdyList = null;
	  }
	}
  };

  var bindRdy = function() {
	  if (rdyBnd) return;
		rdyBnd = true;

	  if(document.addEventListener && !browser.opera) 
		document.addEventListener("DOMContentLoaded", rdy, false);
		if (browser.msie && window == top) (function(){ 
			if (isRdy) return;
			try {document.documentElement.doScroll("left"); }
			catch (e) { setTimeout(arguments.callee,0); return; }
			rdy();
		  })();
		if (browser.opera) document.addEventListener("DOMContentLoaded", function(){
		  if (isRdy) return;
			rdy();
		}, false);
		if (browser.safari) { 
		  (function(){ 
			if(isRdy) return; 
			if (document.readyState != "loaded" && document.readyState != "complete") { 
			  setTimeout(arguments.callee,0); 
			  return;
			}
			rdy();
		  })();
		}
		addEvent(window, "load", rdy);
	}
})();



var ajaxHistory = $ah = new (function(){
	var _t = this;

	var curHash = "";
	var curHashes = {};
	var frame = null;
	var forceLoad = false;
	var order = null;

	_t.frameLoading = false;
	_t.enabled = false;
	_t.useCache = true;
	_t.onLoad = {};
	_t.cache = {};

	var setHash = function(hash){
		hash = hash.replace("#","");
		if(location.hash != "#" + hash){
			location.hash = "#" + hash;
			if(browser.msie){
				frame.src = 'blank.html?ahHash='+encodeURIComponent(hash);
				_t.frameLoading = true;
			}
		}
		return true;
	};
	var getHash = function(){
		if(!browser.msie)return location.hash.replace("#","");
		try{
			var hash = ge('ahFrame').contentWindow.document.location.search.match(/ahHash=(.*)$/);
			return decodeURIComponent((hash && hash[1]) || "").replace("#","");
		}catch(e){return curHash;}
	};
	var splitHash = function(hash){
		if(!hash)return {};
		hash = hash.split("/");
		if(hash.length == 1){
			if(!_t.onLoad['default'])return {};
			if(_t.onLoad['default'].show)hash[0] = _t.onLoad['default'].show.from(hash[0]);
			return {'default':sortParams(hash[0])};
		}
		var parsed = {};
		for(var i=0;i<hash.length;i+=2){
			var h = hash[i];var p = hash[i+1];
			if(_t.onLoad[h].show){p = sortParams(_t.onLoad[h].show.from(p));}
			else{
				p = sortParams(p);
				if(!p && _t.onLoad[h])p = sortParams(_t.onLoad[h].def);
			}
			parsed[h] = p;
		}
		return parsed;
	};
	var joinHash = function(hash){
		var joined = [];
		var def = true;
		for(var i in hash){
			def = def && (i=='default');
			var p = sortParams(hash[i]);
			if(_t.onLoad[i].show){
				var p1 = _t.onLoad[i].show.to(splitParams(hash[i]));
				if(p1)p = p1;
			}
			joined.push(i + "/" + p);
		}
		if(def && joined[0])return joined[0].split("/")[1];
		return joined.sort().join("/");
	};
	var splitParams = function(params){
		if(!params)return {};
		if(typeof(params)!='string')return params;
		if(!/&|=/.test(params))return params;
		var vals = params.split("&");
		var p = {};
		for(var i=0;i<vals.length;i++){
			var v = vals[i].split("=");
			p[v[0]] = v[1];
		}
		return p;
	};
	var sortParams = function(params){
		if(typeof(params)=='number')return params+'';
		if(typeof(params)!='string'){
			params = ajx2q(params);
		}
		return params.split("&").sort().join("&");
	};

	_t.init = function(){
		if(!this.enabled)return;
		for(var i in _t.onLoad){
			var p = sortParams(_t.onLoad[i].def);
			curHashes[i] = p;
		};
		var handler = function(){
			var origHash = getHash();
			if(origHash==curHash && !forceLoad)return;
			var state = splitHash(origHash);
			var hash = joinHash(state);
			if(hash!=curHash || forceLoad){
				var ordered = order || _t.onLoad;
				for(var i in ordered){
					if(order)i = ordered[i];
					var l = _t.onLoad[i];
					var p = state[i] || sortParams(l.def);
					if(p!=curHashes[i] || i == forceLoad){
						forceLoad = false;
						if(l.before && !l.before(splitParams(p))){
							curHashes[i] = p;
							continue;
						}
						if(!_t.cache[i])_t.cache[i] = {};
						if(!_t.useCache || !_t.cache[i][p]){
							_t.getData(l,i,p,hash);
						}else if(l.done){
							l.done({}, _t.cache[i][p]);
						}
						curHashes[i] = p;
					}
				}
				curHash = hash;
				if(browser.msie){
					if(location.hash != "#" + hash)location.hash = "#" + hash;
				}
			}
		};
		if(browser.msie){
			var initHash = encodeURIComponent(location.hash);
			document.body.innerHTML += "<iframe id='ahFrame' style='position:absolute;left:-1000px;width:0;height:0' src='/blank.html?ahHash="+initHash+"'></iframe>";
			frame = ge('ahFrame');

			frame.attachEvent('onreadystatechange', function() {
				if(frame.contentWindow.document.readyState == 'complete'){
					_t.frameLoading = false;
					handler();
				}
			}, false);
			frame.attachEvent('onload', function() {
				if(_t.frameLoading){
					_t.frameLoading = false;
					handler();
				}
			}, false);

			setInterval(function(){
				if(!_t.frameLoading && (location.hash.replace("#", "") != getHash())){
					setHash(location.hash);
				}				
			}, 200);
		}else{
			setInterval(handler,150);
		}
	};
	_t.go = function(s, params){
		if(params===undefined){params = s; s = 'default';}
		var state = splitHash(curHash);
		state[s] = sortParams(params);
		var hash = joinHash(state);
		setHash(hash);
		forceLoad = s;
	};
	_t.getData = function(loadObj, id, params, hash){
		var a = new Ajax(
		(function(l,i,p,t){return function(res,text){
			if(l.done)l.done(res,text);
			if(t.useCache)_t.cache[i][p] = text;
			t.frameLoading = false;
		};})(loadObj,id,params, _t), 
		(function(l,i,p,t){return function(res,text){
			if(l.fail)l.fail(res,text);
			t.frameLoading = false;
		};})(loadObj,id,params, _t),
		true);
		a.post(loadObj.url, params);
	};
	_t.prepare = function(id, params){
		_t.enabled = true;
		if(params===undefined){params = id; id = 'default';}
		_t.onLoad[id] = params;
	};
	_t.validateHash = function(hash){return joinHash(splitHash(hash));};
	_t.clearCache = function(id){_t.cache[id] = {}};

})();

onDomReady(function(){ajaxHistory.init()});
/** 
* Message box
**/
var _message_box_guid = 0,
	_message_boxes = [],
	_message_box_shown = false,
	_show_flash_timeout;
function MessageBox(options) {
  var defaults = {
	type: "MESSAGE", // "MESSAGE" || "POPUP"
	hideOnClick: true,
	title: "Alert",
	width: "410px",
	height: "auto",
	hideFlash: true
  };

  options = extend(defaults, options);

  var buttonsCount = 0, body = document.getElementsByTagName('body')[0],
	  transparentBG, boxContainer, boxBG, boxContainer, boxLayout, boxTitle, boxBody, boxControls, buttonYes, buttonNo,
	  guid = _message_box_guid++, isVisible = false;

  transparentBG = document.createElement('div');
  transparentBG.className = 'popup_transparent_bg';
  hide(transparentBG);

  //boxBG = document.createElement('div');
  //boxBG.className = 'popup_box_bg';
  //hide(boxBG);

  transparentBG.innerHTML = '<iframe class="box_frame"></iframe>';
  boxContainer = document.createElement('div');
  boxContainer.className = 'popup_box_container';
  hide(boxContainer);
  boxContainer.innerHTML = '<div class="box_layout"><div class="box_title_wrap"><div class="box_title"></div></div><div class="box_body"></div><div class="box_controls"></div></div>';

  boxFrame = geByClass('box_frame', transparentBG)[0];
  boxLayout = geByClass('box_layout', boxContainer)[0];
  boxTitle = geByClass('box_title', boxContainer)[0];
  boxBody = geByClass('box_body', boxContainer)[0];
  boxControls = geByClass('box_controls', boxContainer)[0];

  transparentBG.style.height = getSize(document)[1] + 'px';
  addEvent(document, 'keydown', function(e) {
	if (e.keyCode == 27) {
	  hideBox();
	}
  });

  onDomReady(function() {
	body.appendChild(transparentBG);
	body.appendChild(boxContainer);
	refreshCoords();
	refreshBox();
  });

  // Refresh box position
  function refreshCoords() {
	var height = window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight);
	containerSize = getSize(boxContainer);
	boxFrame.style.top = 
	boxContainer.style.top = Math.max(document.documentElement.scrollTop,  body.scrollTop) + (height - containerSize[1]) / 3 + 'px';
	boxFrame.style.marginLeft =
	boxContainer.style.marginLeft =  - containerSize[0] / 2 + 'px';
	setStyle(boxFrame, 'width', containerSize[0]);
	setStyle(boxFrame, 'height', containerSize[1]);

  }

  // Add button
  function addButton(options) {
	buttonsCount++;
	if (typeof options != 'object') options = {};
	options = extend({
		label: 'Button' + buttonsCount,
		style: 'button_yes'
	}, options);

	var buttonWrap = document.createElement('div');
	buttonWrap.className = "button_wrap " + options.style;
	buttonWrap.innerHTML = '<div class="box_button" id="button' + guid + '_' + buttonsCount + '">' + options.label + '</div>';
	boxControls.appendChild(buttonWrap);
	addEvent(buttonWrap, 'mouseover', function() {
	  addClass(this.firstChild, 'button_hover');
	});
	addEvent(buttonWrap, 'mouseout', function() {
	  removeClass(this.firstChild, 'button_hover');
	});
	if (isFunction(options.onClick)) {
	  addEvent(buttonWrap, 'click', options.onClick);
	}
	return buttonWrap;
  }

  // Remove buttons
  function removeButtons() {
	buttonsCount = 0;
	boxControls.innerHTML = '';
  }

  // Refresh box properties
  function refreshBox() {
	// Set title
	boxTitle.innerHTML = options.title;

	// Set box dimensions
	boxContainer.style.width = typeof(options.width) == 'string' ? options.width : options.width + 'px';
	boxContainer.style.height = typeof(options.height) == 'string' ? options.height : options.height + 'px';

	// Switch box type
	removeClass(boxContainer, 'box_no_controls');
	removeClass(boxContainer, 'message_box');

	removeEvent(boxContainer, 'click');
	if (options.hideOnClick && options.type == 'POPUP') {
	  addEvent(boxContainer, 'click', function(){
		hideBox();
	  });
	}

	switch (options.type) {
	  case 'POPUP':
		addClass(boxContainer, 'box_no_controls');
		addEvent(transparentBG, 'click', function(){
		  hideBox();
		});
	  break;

	  case 'MESSAGE':
		addClass(boxContainer, 'message_box');
		removeEvent(transparentBG, 'click');
	  break;
	}
  }

  // Show box
  function showBox() {
	if (isVisible) return;
	isVisible = true;
	each(_message_boxes, function(box_guid, box) {
	  if (box_guid != guid) box.hide();
	});
	// Show blocking background
	show(transparentBG);
	// Show box

//	fadeIn(boxContainer, 200);
	show(boxContainer); // AntanubiS - Video wall posting fails with fadeIn =(

	refreshCoords();

	// Hide all flash movies on the page
	if (options.hideFlash) {
	  clearTimeout(_show_flash_timeout);
	  each(body.getElementsByTagName('embed'), function(i, el) {
		el.style.visibility = 'hidden';
	  });
	  each(body.getElementsByTagName('object'), function(i, el) {
		el.style.visibility = 'hidden';
	  });
	}

	if (options.onShow) {
	  options.onShow();
	}
  }
  // Hide box
  function hideBox(speed) {
	if (!isVisible) return;
	isVisible = false;

	var onHide = function () {
	  hide(boxContainer);
	  hide(transparentBG);
	  // Show all flash movies on the page
	  if (options.hideFlash) {
	   if (_show_flash_timeout) clearTimeout(_show_flash_timeout);
	   _show_flash_timeout = setTimeout(function() {
		 each(body.getElementsByTagName('embed'), function(i, el) {
		  el.style.visibility = 'visible';
		 });
		 each(body.getElementsByTagName('object'), function(i, el) {
		  el.style.visibility = 'visible';
		 });
	   }, 50);
	  }
	  if (options.onHide) options.onHide();
	}
	if (speed > 0) {
	  fadeOut(boxContainer, speed, function(){
		onHide(); 
	  });
	} else {
	  onHide();
	}
  }

  var retBox = {
	guid: guid,
	// Show box
	show: function(speed) {
	  showBox(speed); return this;
	},

	// Hide box
	hide: function(speed) {
	  hideBox(speed); return this;
	},

	isVisible: function() {
	  return this.isVisible;
	},

	// Insert html content into the box
	content: function(html) {
	  boxBody.innerHTML = html;
	  refreshCoords();
	  return this;
	},

	// Load html content from URL
	loadContent: function(url, params) {
	  var ajax = new Ajax(function(ajaxObj, responseText) {
		 boxBody.innerHTML = responseText;
		 refreshCoords();
		 if (options.onLoad) options.onLoad(responseText);
	  }, function(ajaxObj, responseText) {
		boxBody.innerHTML = 'Request error occured.';
		if (options.onLoadError) options.onLoadError(responseText);
	  });
	  // Show loader
	  boxBody.innerHTML = '<div class="box_loader"></div>';

	  // Load remote html using get request
	  if (typeof params != 'object') params = {};   
	  ajax.post(url, params);  

	  return this;
	},

	// Add button
	addButton: function(options) {
	  addButton(options);
	  return this;
	},

	// Remove buttons
	removeButtons: function(options) {
	  removeButtons();
	  return this;
	},

	// Update box options
	setOptions: function(newOptions) {
	  options = extend(options, newOptions);
	  refreshBox();
	  return this;
	}
  };
  _message_boxes[guid] = retBox;
  return retBox;
};


</script>


<script type="text/javascript">
var photoBox;

function showPhoto(url, photo_id) {
  pic = new Image(); 
  pic.src = url; 
  if (!pic.width) {
   var coords = durovGetXY(ge('photo'+photo_id));
   ge('imageProgress').style.height = ge('photo'+photo_id).offsetHeight+"px";
   ge('imageProgress').style.left = coords[0]+"px";
   ge('imageProgress').style.top = coords[1]+"px";
   show('imageProgress');
   setTimeout("showPhoto('"+url+"')", 1500);
   return false;
  }
  if (!photoBox) photoBox = new MessageBox({type: 'POPUP', width: 'auto'});
  photoBox.content('<img src="' + url + '" />').show();
  hide('imageProgress');
  return false;
}

</script>

<div class="photos"><a href="#" id="photo2093433" onclick="showPhoto('http://img196.imageshack.us/img196/415/32699664.jpg', 2093433); return false;" class="imageLink"><img src="http://img196.imageshack.us/img196/415/32699664.th.jpg"></a></div>

Edited June 1, 2009 by ELNINO

ELNINO · June 1, 2009

Вот почти один в один кстати lightbox => http://forum.htmlbook.ru/index.php?s=&...st&p=101521

Antuan · August 14, 2009

Извиняюсь за тухлый форум! Но если бы я не сказал данное выражение. Я бы привлек вашего внимания...

Sign In

CSS/JS код для Создания нового окна/слоя

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information