https://quilapayun.com/java/FWDPageThumbs.js

1/* FWDS3DCovPageThumbs */
2(function (window){
3var FWDS3DCovPageThumbs = function(props_obj){
4		
5		var self = this;
6		var prototype = FWDS3DCovPageThumbs.prototype;
7		
8		this.parent = props_obj.parent;
9		this.image_img;
10		
11		this.labels_ar = props_obj.labels;
12		this.imagesPath_ar = props_obj.imagesPath;
13		this.thumbs_ar = [];
14		
15		this.thumbnailBorderColor_str =  props_obj.thumbnailBorderColor;"#FFFFFF";
16		this.textNormalColor_str =  props_obj.textNormalColor; "#666666";
17		this.textSelectedColor_str =  props_obj.textSelectedColor; "#0099ff";
18		this.wiewSampleTextColor_str =  props_obj.wiewSampleTextColor; "#FFFFFF";
19			
20		this.maxWidth = props_obj.maxWidth;
21		this.stageWidth = 0;
22		this.stageHeight = 0;
23		this.totalHeight = 0;
24		this.thumbnailMaxWidth = 180;
25		this.thumbnailMaxHeight = 120;
26		this.spacerH = 50;
27		this.spacerV = 15;
28		this.iconOffsetHeight = 40;
29		this.totalThumbs = this.labels_ar.length;
30		this.thumbnailBorderSize = 4;
31		this.countLoadedThumbs = 0;
32		this.totalRows;
33		this.remainSpace;
34		this.thumbW;
35		this.thumbH;
36		this.stageWidth;
37		this.howManyThumbsToDisplayH;
38		this.howManyThumbsToDisplayV;
39		this.toAddToX;
40		this.curId = 0;
41		this.shadowOffsetX = props_obj.shadowOffsetX;
42		this.shadowOffsetY = props_obj.shadowOffsetY;
43		this.shadowOffsetW = props_obj.shadowOffsetW;
44		this.shadowOffsetH = props_obj.shadowOffsetH;
45		
46		this.loadWithDelayId_to;
47	
48		//##########################################//
49		/* initialize self */
50		//##########################################//
51		self.init = function(){
52			self.setOverflow("visible");
53			self.setupThumbs();
54			self.enableOrDisableThumbs(0);
55			self.parent.appendChild(self.screen);
56			
57			setTimeout(self.positionAndResize, 50);
58		};
59		
60		//###########################################//
61		/* resize and position */
62		//##########################################//
63		this.positionAndResize = function(viewportWidth){	
64			if (!viewportWidth) return;
65			if(self.viewportWidth == viewportWidth) return;
66			
67			self.viewportWidth = viewportWidth;
68			
69			self.stageWidth = viewportWidth > self.maxWidth ? self.maxWidth : viewportWidth;
70		
71			self.positionAndResizeThumbs();
72			self.setX(parseInt((self.viewportWidth - self.stageWidth)/2));
73		};
74		
75		//#############################################//
76		/* setup thumbnails */
77		//#############################################//
78		this.setupThumbs = function()
79		{
80			var thumb;
81			
82			for(var i=0; i<self.totalThumbs; i++)
83			{
84				FWDS3DCovPageThumb.setPrototype();
85				
86				thumb = new FWDS3DCovPageThumb(i, 180, 120, self.imagesPath_ar[i] + "N.jpg", self.imagesPath_ar[i] + "S.jpg");
87				thumb.addListener(FWDS3DCovPageThumb.CLICK, self.onThumbClick);
88				
89				self.thumbs_ar[i] = thumb;
90				self.addChild(thumb);
91			}
92		};
93		
94		this.onThumbClick = function(e)
95		{
96			self.curId = e.id;
97			self.enableOrDisableThumbs();
98			
99			self.dispatchEvent(FWDS3DCovPageThumb.CLICK, {id:self.curId});
100		};
101		
102		//#############################################//
103		/* load images */
104		//#############################################//
105		this.loadImages = function(){
106			if(self.countLoadedThumbs > self.totalThumbs-1) return;
107			
108			if(self.image_img){
109				self.image_img.onload = null;
110				self.image_img.onerror = null;
111			}
112			
113			self.image_img = new Image();
114			self.image_img.onload = self.onImageLoadComplete;
115			self.image_img.src = self.imagesPath_ar[self.countLoadedThumbs];
116		};
117		
118		this.onImageLoadComplete = function(e){
119			var thumb = self.thumbs_ar[self.countLoadedThumbs];
120			
121			thumb.setImage(self.image_img);
122			
123			self.countLoadedThumbs++;
124			self.loadWithDelayId_to = setTimeout(self.loadImages, 40);	
125		};
126		
127		//#############################################//
128		/* resize thumbnails and containers */
129		//#############################################//
130		this.positionAndResizeThumbs = function(animate){
131			
132			var thumb;
133			var newX;
134			var newY;
135			var newSpace = self.spacerH;
136			var totalThumbsWidth;
137			
138			if (self.thumbnailMaxWidth * 2 + self.spacerH > self.stageWidth)
139			{
140				newSpace = self.stageWidth - self.thumbnailMaxWidth * 2;
141			}
142			
143			totalThumbsWidth = self.thumbnailMaxWidth * 2 + newSpace;
144			
145			self.thumbs_ar[0].setX((self.stageWidth - totalThumbsWidth)/2);
146			self.thumbs_ar[0].setY(self.spacerV);
147			
148			self.thumbs_ar[1].setX((self.stageWidth - totalThumbsWidth)/2 + self.thumbnailMaxWidth + newSpace);
149			self.thumbs_ar[1].setY(self.spacerV);
150			
151			self.totalHeight = self.thumbnailMaxHeight + self.spacerV * 2;
152			
153			self.parent.style.height = self.totalHeight + "px";
154		};
155		

156		//#############################################//
157		/* Disable / enable */
158		//#############################################//
159		this.enableOrDisableThumbs = function(){
160			for(var i=0; i<self.totalThumbs; i++){
161				thumb = self.thumbs_ar[i];
162				if(self.curId == i){
163					thumb.disable();
164				}else{
165					thumb.enable();
166				}
167			}
168		};
169		
170	
171		self.init();
172	};
173	
174	/* set prototype */
175	FWDS3DCovPageThumbs.setPrototype = function(){
176		FWDS3DCovPageThumbs.prototype = new FWDS3DCovDisplayObject("div");
177	};
178	
179	FWDS3DCovPageThumbs.CLICK = "onClick";
180
181	FWDS3DCovPageThumbs.prototype = null;
182	window.FWDS3DCovPageThumbs = FWDS3DCovPageThumbs;
183}(window));