/*
 * Rich JavaScript PhotoViewer.js, version 1.0
 * Copyright (c) 2009 Lee Won-Gyoon <mail.kido@gmail.com>
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * For details, see the RichScript web site: http://www.richScript.net/
 * 
*******************************************************************************/

function PhotoViewer (_instanceName) {
	this.instanceName = _instanceName;
	this.vars = {
		photoW : 270
		, photoH : 246
		, textW : 270
		, textH : 42
		, sideW : 276
		, sideH : 252
		, mainW : 290
		, mainH : 299
		, currentIndex : 0
	};
	this.ids = {
		leftArea : this.instanceName + "-leftArea"
		, mainArea : this.instanceName + "-mainArea"
		, rightArea : this.instanceName + "-rightArea"
	};
	this.data = [];
	
	this.scrollToPrev = function() {
		if (this.vars.currentIndex>=0) {
			this.vars.currentIndex--;
			this.scroll();
		} else {
			//alert("");
		}
	};
	
	this.scrollToNext = function() {
		if (this.vars.currentIndex<this.data.length-2) {
			this.vars.currentIndex++;
			this.scroll();
		} else {
			//alert("");
		}
	};
	
	this.scroll = function() {
		$(this.ids.leftArea).moveTo(this.vars.photoW*-1*this.vars.currentIndex,null);
		$(this.ids.mainArea).moveTo(this.vars.photoW*-1*(this.vars.currentIndex+1),null);
		$(this.ids.rightArea).moveTo(this.vars.photoW*-1*(this.vars.currentIndex+2),null);
	};
	
	this.push = function(_photoSrc, _textSrc) {
		this.data.push({
			photo : _photoSrc
			, text : _textSrc
		});
	};
	
	
	this.getHTML = function() {
		var s = '';
		s += '<div class="tour_rolling">\n';
		
		s += '	<div class="rolling_left">\n';
		s += '		<div style="width:'+this.vars.sideW+'px;height:'+this.vars.sideH+'px;padding:2px 3px 2px 3px;background-color:#c4c4c4;">\n';
		s += '			<div style="width:'+this.vars.photoW+'px;height:'+this.vars.photoH+'px;overflow:hidden;position:relative;">\n';
		s += '			<div id="'+this.ids.leftArea+'" moveTo.useMultiCommand="true" style="position:absolute;left:0px;top:0px;">\n';
		s += '				<table cellpadding="0" cellspacing="0" border="0">\n';
		s += '					<tr>\n';
		for (var i=0; i<this.data.length; i++) {
			s += '<td><img src="'+this.data[i].photo+'" width="'+this.vars.photoW+'" height="'+this.vars.photoH+'"></td>\n';
		}
		s += '					</tr>\n';
		s += '				</table>\n';
		s += '			</div>\n';
		s += '			</div>\n';
		s += '		</div>\n';
		s += '		<div class="rolling_btn" onClick="'+this.instanceName+'.scrollToPrev();"><img src="/kor/images/about/tour_btn_left.png" class="png24"><br></div>\n';
		s += '	</div>\n';
		
		s += '	<div class="rolling_view">\n';
		s += '		<div style="width:'+this.vars.mainW+'px;height:'+this.vars.mainH+'px;padding:0px 10px 0px 10px;background-color:#5d9da7;">\n';
		s += '			<div style="width:'+this.vars.photoW+'px;height:'+this.vars.mainH+'px;overflow:hidden;position:relative;">\n';
		s += '			<div id="'+this.ids.mainArea+'" moveTo.useMultiCommand="true" style="position:absolute;left:'+(this.vars.photoW*-1)+'px;top:0px;">\n';
		s += '				<table cellpadding="0" cellspacing="0" border="0">\n';
		s += '					<tr>\n';
		for (var i=0; i<this.data.length; i++) {
			s += '<td valign="top">\n';
			s += '	<div style="width:'+this.vars.photoW+'px;">\n';
			s += '		<div class="view_img"><img src="'+this.data[i].photo+'" width="'+this.vars.photoW+'" height="'+this.vars.photoH+'"></div>\n';
			s += '		<div class="view_txt"><img src="'+this.data[i].text+'" width="'+this.vars.textW+'" height="'+this.vars.textH+'"></div>\n';
			s += '	</div>\n';
			s += '</td>\n';
		}
		s += '					</tr>\n';
		s += '				</table>\n';
		s += '			</div>\n';
		s += '			</div>\n';
		s += '		</div>\n';
		s += '	</div>\n';
		
		s += '	<div class="rolling_right">\n';
		s += '		<div style="width:'+this.vars.sideW+'px;height:'+this.vars.sideH+'px;padding:2px 3px 2px 3px;background-color:#c4c4c4;">\n';
		s += '			<div style="width:'+this.vars.photoW+'px;height:'+this.vars.photoH+'px;overflow:hidden;position:relative;">\n';
		s += '			<div id="'+this.ids.rightArea+'" moveTo.useMultiCommand="true" style="position:absolute;left:'+(this.vars.photoW*-2)+'px;top:0px;">\n';
		s += '				<table cellpadding="0" cellspacing="0" border="0">\n';
		s += '					<tr>\n';
		for (var i=0; i<this.data.length; i++) {
			s += '<td><img src="'+this.data[i].photo+'" width="'+this.vars.photoW+'" height="'+this.vars.photoH+'" class="thumb"></td>\n';
		}
		s += '					</tr>\n';
		s += '				</table>\n';
		s += '			</div>\n';
		s += '			</div>\n';
		s += '		</div>\n';
		s += '		<div class="rolling_btn" onClick="'+this.instanceName+'.scrollToNext();"><img src="/kor/images/about/tour_btn_right.png" class="png24"><br></div>\n';
		s += '	</div>\n';
		
		s += '</div>\n';
		return s;
	};


	
	
	this.print = function() {
		document.write(this.getHTML());
	};

	
	
	this.initialize = function() {
	};
};