var ViewBox = {
	loadStart: function(){
		this.addEvent( window, "load", this.firstInit );
	},
	addEvent: function( elm, event_key, callback ){
		if( window.addEventListener ){
			elm.addEventListener( event_key, callback, false );
		}else if( window.attachEvent ){
			elm.attachEvent( "on"+event_key, callback );
		}
	},
	firstInit: function(){
		var self = ViewBox;
		var viewList = self.getListByClassName( "view-box" );
		self.list = [];
		var size = viewList.length;
		for( var i=0; i<size; i++ ){
			var view = self.getListByClassName( "view-"+i )[0];
			self.list.push( { elm: view } );
		}
		for( var i=0; i<size; i++ ){
			var btn = self.getListByClassName( "view-btn-"+i );
			var size2 = btn.length;
			for( var j=0; j<size2; j++ ){
				btn[j].selfData = self.list[i];
				self.addEvent( btn[j], "click", function( eventInfo ){
					var self = ViewBox;
					var eventAndSelfData = self.getSelfData( eventInfo );
					var obj = eventAndSelfData.selfData;
					if( obj ){
						for( var k=0; k<self.list.length; k++ ){
							self.list[k].elm.style.display = "none";
						}
						obj.elm.style.display = "block";
					}
				} );
			}
			if( i==0 ){
				self.list[i].elm.style.display = "block";
			}else{
				self.list[i].elm.style.display = "none";
			}
		}
	},
	getListByClassName: function( class_name, elm ){
		if( elm ){
			var doms = elm.getElementsByTagName( "*" );
		}else{
			var doms = document.getElementsByTagName( "*" );
		}
		var doms_size = doms.length;
		var classList = [];
		for( var i=0; i<doms_size; i++ ){
			var class_str = doms[ i ].getAttribute( "class" );
			if( !class_str ){
				var class_str = doms[ i ].getAttribute( "className" );
			}
			if( class_str ){
				var class_list = class_str.match( /(\S+)/g );
				for( var j=0; j<class_list.length; j++ ){
					if( class_list[ j ]==class_name ){
						classList.push( doms[ i ] );
					}
				}
			}
		}
		return classList;
	},
	getSelfData: function( evt ){
		if( !evt ) evt = event;
		if( evt.toElement && evt.toElement.selfData ){
			var elm = evt.toElement;
			var self = elm.selfData;
		}else if( evt.srcElement && evt.srcElement.selfData ){
			var elm = evt.srcElement;
			var self = elm.selfData;
		}else if( evt.target && evt.target.selfData ){
			var elm = evt.target;
			var self = elm.selfData;
		}
		return { eventInfo: evt, element: elm, selfData: self };
	}
}
ViewBox.loadStart();
var ViewPop = {
	loadStart: function(){
		this.addEvent( window, "load", this.firstInit );
	},
	addEvent: function( elm, event_key, callback ){
		if( window.addEventListener ){
			elm.addEventListener( event_key, callback, false );
		}else if( window.attachEvent ){
			elm.attachEvent( "on"+event_key, callback );
		}
	},
	firstInit: function(){
		var self = ViewPop;
		var viewList = self.getListByClassName( "cast" );
		self.list = [];
		var size = viewList.length;
		for( var i=0; i<size; i++ ){
			var view = self.getListByClassName( "cast-view", viewList[i] )[0];
			self.list.push( { elm: view } );
		}
		for( var i=0; i<size; i++ ){
			var thum = self.getListByClassName( "cast-thum", viewList[i] )[0];
			var thum_img = thum.getElementsByTagName( "img" )[0];
			thum_img.selfData = self.list[i];
			self.addEvent( thum_img, "click", function( eventInfo ){
				var self = ViewPop;
				var eventAndSelfData = self.getSelfData( eventInfo );
				var obj = eventAndSelfData.selfData;
				if( obj ){
					for( var k=0; k<self.list.length; k++ ){
						self.list[k].elm.style.display = "none";
					}
					obj.elm.style.display = "block";
				}
			} );

			var close = self.getListByClassName( "cast-close", viewList[i] )[0];
			close.selfData = self.list[i];
			self.addEvent( close, "click", function( eventInfo ){
				var self = ViewPop;
				var eventAndSelfData = self.getSelfData( eventInfo );
				var obj = eventAndSelfData.selfData;
				if( obj ){
					for( var k=0; k<self.list.length; k++ ){
						self.list[k].elm.style.display = "none";
					}
				}
			} );
		}
	},
	getListByClassName: function( class_name, elm ){
		if( elm ){
			var doms = elm.getElementsByTagName( "*" );
		}else{
			var doms = document.getElementsByTagName( "*" );
		}
		var doms_size = doms.length;
		var classList = [];
		for( var i=0; i<doms_size; i++ ){
			var class_str = doms[ i ].getAttribute( "class" );
			if( !class_str ){
				var class_str = doms[ i ].getAttribute( "className" );
			}
			if( class_str ){
				var class_list = class_str.match( /(\S+)/g );
				for( var j=0; j<class_list.length; j++ ){
					if( class_list[ j ]==class_name ){
						classList.push( doms[ i ] );
					}
				}
			}
		}
		return classList;
	},
	getSelfData: function( evt ){
		if( !evt ) evt = event;
		if( evt.toElement && evt.toElement.selfData ){
			var elm = evt.toElement;
			var self = elm.selfData;
		}else if( evt.srcElement && evt.srcElement.selfData ){
			var elm = evt.srcElement;
			var self = elm.selfData;
		}else if( evt.target && evt.target.selfData ){
			var elm = evt.target;
			var self = elm.selfData;
		}
		return { eventInfo: evt, element: elm, selfData: self };
	}
}
ViewPop.loadStart();