var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

var TCarGallery = Class.create();

TCarGallery.prototype = {
	initialize: function(selector, opt) {
		this.extOptions = {
			extContentWidth: 340
		};
		this.selector = 'div.'+selector;
		this.selectorArrowLeft = '.'+selector+'_arrow_left';
		this.selectorArrowRight = '.'+selector+'_arrow_right';
		this.selectorTableThumbs = '.tbl_'+selector+'_thumbs';
		this.selectorImageContainer = '.'+selector+'_img';
		for (i in opt) {
			this[i] = opt[i];
		}
		var obj = this;
		$j(this.selectorArrowLeft).click(function(){
			obj.arrowLeftClick();
		}).show();
		$j(this.selectorArrowRight).click(function(){
			obj.arrowRightClick();
		}).show();
		this.images = [];
		$j(this.selector+' div a').each(function(){
			var imgSrc = $j('img', this).attr('src');
			obj.images.push({
				thumb:imgSrc, 
				src:this.href,
				title: this.title,
				imageGroup: this.rel
			});
			this.imageIndex = obj.images.length-1;
			this.onclick = function(){
				obj.aClick(this);
				return false;
			}
		});
		if (!this.images.length) {
			return false;
		}
		if (this.images.length < this.cntThumbsInRow) {
			$j(this.selectorTableThumbs).css('width', (this.images.length*55 + 50)+'px');
		}
		if (typeof this.index == 'number') {
			if (this.index > this.cntVisibleThumbs - 1 ) {
				this.firstThumbIndex = this.index;
			} else {
				this.firstThumbIndex = 0;
			}
		} else {
			this.index = 0;
			this.firstThumbIndex = 0;
		}
		this.showImage();
		this.showThumbs();
		this.updateArrows();
	},
	initContainer: function(){
		if (typeof this.mainImg != 'object') {
			this.mainImg = new Image();
			var imgContainer = $j(this.selectorImageContainer).get(0);
			if (typeof imgContainer == 'object') {
				imgContainer.appendChild(this.mainImg);
			}
			this.mainImg.style.width = this.imgW+'px';
			this.mainImg.style.height = this.imgH+'px';
		}
	},
	setActive: function(){
		$j(this.selector+' div:eq('+this.index+')').addClass('active');
	},
	setInactive: function(){
		$j(this.selector+' div:eq('+this.index+')').removeClass('active');
	},
	setVisible: function(i){
		$j(this.selector+' div:eq('+i+')').addClass('visible');
		var imgThumb = $j(this.selector+' div:eq('+i+') img').get(0);
		var imgThumbSrc = $j(imgThumb).attr('imgsrc');
		if (typeof imgThumbSrc == 'string' && imgThumbSrc != '') {
			var preloadImage = new Image();
			preloadImage.onabort = function(){}
			preloadImage.onerror = function(){}
			preloadImage.onload = function(){
				imgThumb.src = this.src;
				$j(imgThumb).removeAttr('imgsrc');
			}
			imgThumb.src = 'img/loading.gif';
			preloadImage.src = imgThumbSrc;
		}
	},
	setInvisible: function(i){
		$j(this.selector+' div:eq('+i+')').removeClass('visible');
	},
	aClick: function(a){
		this.setInactive();
		this.index = a.imageIndex;
		this.setActive();
		this.showImage();
		this.updateArrows();
	},
	updateArrows: function(){
		if (this.index > 0 ) {
			$j(this.selectorArrowLeft).show();
		} else {
			$j(this.selectorArrowLeft).hide();
		}
		if (this.index < this.images.length - 1) {
			$j(this.selectorArrowRight).show();
		} else {
			$j(this.selectorArrowRight).hide();
		}
	},
	arrowLeftClick:function(){
		if (this.index > 0) {
			this.setInactive();
			this.index--;
			this.setActive();
			if (this.index < this.firstThumbIndex) {
				this.setInvisible(this.firstThumbIndex + this.cntVisibleThumbs - 1);
				this.firstThumbIndex--;
				this.setVisible(this.firstThumbIndex);
			}
			this.showImage();
			this.updateArrows();
		}
	},
	arrowRightClick:function(){
		if (this.index < this.images.length - 1) {
			this.setInactive();
			this.index++;
			this.setActive();
			if (this.index > this.firstThumbIndex + this.cntVisibleThumbs - 1) {
				this.setInvisible(this.firstThumbIndex);
				this.firstThumbIndex++;
				this.setVisible(this.firstThumbIndex + this.cntVisibleThumbs - 1);
			}
			this.showImage();
			this.updateArrows();
		}
	},
	showImage: function() {
		this.initContainer();
		$j(this.selectorImageContainer).addClass('car_gallery_loading');
		this.mainImg.style.display = 'none';
		var obj = this;
		var img = new Image();
		img.onabort = function() {
			$j(obj.selectorImageContainer).removeClass('car_gallery_loading');
		}
		img.onerror = function() {
			$j(obj.selectorImageContainer).removeClass('car_gallery_loading');
		}
		img.onload = function() {
			$j(obj.selectorImageContainer).removeClass('car_gallery_loading');
			obj.mainImg.src = this.src;
			obj.mainImg.style.display = '';
			var k = this.width/this.height;
			obj.mainImg.style.height = parseInt(obj.imgW/k, 10) + 'px';
			obj.mainImg.style.display = '';
			if (typeof obj.enableClickImage == 'boolean' && obj.enableClickImage) {
				obj.mainImg.onclick = function() {
					tb_show(
						obj.images[obj.index].title, 
						obj.formURL.replace('{INDEX}', obj.index).replace('{IMAGE_TYPE}', obj.imgType), 
						obj.images[obj.index].imageGroup
					);
				}
			}
		}
		img.src = this.images[this.index].src;
	},
	showThumbs: function(){
		var i=0;
		for (i = this.firstThumbIndex; i<(this.firstThumbIndex + this.cntVisibleThumbs) && i<this.images.length; i++) {
			this.setVisible(i);
		}
		$j(this.selector+' div:eq('+this.index+')').addClass('active');
	}
}