var ProductViewer = new Class({

	options: {
		
	},
	initialize: function(options){
		this.options = options;
		this.product = this.options.product; //this.product = "vista";
        this.currentView = this.options.view; //this.currentView = "bassinet";
        this.currentColor = this.options.color; //this.currentColor = "carlin";		
		
		if(this.product=="vista"){
			this.defaultcolor = "carlin"; //default color where large bw images are stored
			this.thumbs = new Array("bassinet", "default", "side", "sunshade", "raincover", "closeup01", "extra01", "extra02");
		}else if(this.product=="g-lite"){
			this.defaultcolor = "caleigh";
			this.thumbs = new Array("default", "side", "front", "closeup01", "closeup02", "extra01");
		}else if(this.product=="vista-graco-infant-car-seat-adapter"){
			this.defaultcolor = "default";
			this.thumbs = new Array("default", "attached-with-seat", "attached-without-seat");	
		}else if(this.product=="vista-peg-perego-infant-car-seat-adapter"){
			this.defaultcolor = "default";
			this.thumbs = new Array("frame", "attached-with-seat", "attached-without-seat", "default");	
		}else if(this.product=="piggyback"){
			this.defaultcolor = "default";
			this.thumbs = new Array("default");							
		}else if(this.product=="bubble"){
			this.defaultcolor = "default";
			this.thumbs = new Array("default", "bug", "sun-rain", "frame", "package");							
		}else if(this.product=="vista-travel-bag"){
			this.defaultcolor = "default";
			this.thumbs = new Array("default", "strap");							
		}else if(this.product=="g-lite-travel-bag"){
			this.defaultcolor = "default";
			this.thumbs = new Array("default");							
		}else if(this.product=="rain-cover-for-seat"){
			this.defaultcolor = "default";
			this.thumbs = new Array("raincover");							
		}else if(this.product=="g-lite-rain-cover"){
			this.defaultcolor = "denny";
			this.thumbs = new Array("default");		
		}else if(this.product=="bug-sunshade-for-bassinet"){
			this.defaultcolor = "carlin";
			this.thumbs = new Array("default");							
		}else if(this.product=="bug-sunshade-for-seat"){
			this.defaultcolor = "jake";
			this.thumbs = new Array("sunshade");							
		}else if(this.product=="bassinet"){
			this.defaultcolor = "jake";
			this.thumbs = new Array("side");							
		}else if(this.product=="easy-fit-car-and-suv-sunshade"){
			this.defaultcolor = "default";
			this.thumbs = new Array("default", "package");								
		}
		
		
		
		this.bw_images = new Array("raincover", "closeup01", "closeup02", "extra01", "extra02", "strap", "attached-with-seat", "attached-without-seat");
        this.size = "490x350";
        this.baseUrl = "/products/images/items/";
        this.imgExtension = ".jpg";
        this.elementId = "productImage";
		this.fullsize = "enlargebutton";
    },
	
	setInitialImage : function(){
		this.createEnlargebutton();
		this.setView(this.currentView, this.defaultcolor);
		//set initial preview image
		//$(elementId).src = '/products/images/items/vista/fullsize/carlin/sunshade.jpg';//this.createProductImageUrl(this.currentView, this.currentColor);
		//var src = $(elementId).src;
		//alert(src);
	},

    setColor : function(color){
        this.currentColor = color;
		var view = this.currentView;
        //$(this.elementId).src = this.effect('fade').fadeOut();
		$(this.elementId).src = this.createProductImageUrl(view, color);
		this.createEnlargebutton();
		
		//if image is b/w, then grab image from default folder
		if(this.bw_images.contains(view)){
			$(this.fullsize).href = this.baseUrl + this.product + '/fullsize/' + this.defaultcolor + '/' + view + this.imgExtension;
		}else{
			if (color == null){
				$(this.fullsize).href = this.baseUrl + this.product + '/fullsize/' + this.currentView + this.imgExtension;
			}else{
				$(this.fullsize).href = this.baseUrl + this.product + '/fullsize/' + color + '/' + this.currentView + this.imgExtension;
			}
		}
    },

    setView : function(view){
		this.currentView = view;
		var color = this.currentColor;
		//set large image view
		//new Fx.Style($(this.elementId), 'opacity', {wait: false});
        //$(this.elementId).src = this.effect('fade').fadeOut();
		$(this.elementId).src = this.createProductImageUrl(view, color);
		
		//set fullsize view
		var fullsize = $('enlargebutton');
		this.createEnlargebutton();
		
		//set thumbnail opacity
		for(i=0;i<this.thumbs.length;i++){
			var thumbdiv = $(this.thumbs[i]);
			if(this.thumbs[i]==view){
				thumbdiv.style.filter = "alpha(opacity=100)";  //IE
				thumbdiv.style.opacity = 1;	//Mozilla
			}else{
				thumbdiv.style.filter = "alpha(opacity=40)";  //IE
				thumbdiv.style.opacity = .40;	//Mozilla
			}
		}
    },
     
    createProductImageUrl : function (view, color){
		//if image is b/w, then grab image from default folder
		if(this.bw_images.contains(view)){
            return this.baseUrl + this.product + '/' + this.size + '/' + this.defaultcolor + '/' + view + this.imgExtension;
		}else{
	        if (color == null){
	            return this.baseUrl + this.product + '/' + this.size + '/' + 
	                   view + this.imgExtension;
	        }
	        else{
	            return this.baseUrl + this.product + '/' + this.size + '/' + 
	                   color + '/' + view + this.imgExtension;
	        }
		}
    },
	
	createEnlargebutton : function (input){
		var imageshtml = '';
		for(i=0;i<this.thumbs.length;i++){
		
			//check for bw vs color images
			if(this.bw_images.contains(this.thumbs[i])){
				var color = this.defaultcolor; 
			}else{
				var color = this.currentColor;
			}
			
			if(this.thumbs[i] == this.currentView){
				imageshtml = imageshtml+'<a name="fullsize" id="enlargebutton" href="' + this.baseUrl + this.product + '/fullsize/' + color + '/' + this.thumbs[i] + this.imgExtension + '" rel="lightbox[prodview]" title="' + this.product + ' : ' + this.currentView + '">enlarge</a>';
			}else{
				imageshtml = imageshtml+'<a class="hidethis" href="' + this.baseUrl + this.product + '/fullsize/' + color + '/' + this.thumbs[i] + this.imgExtension + '" rel="lightbox[prodview]" title="' + this.product + ' : ' + this.thumbs[i] + '"></a>';
			}		
		}
        //imageshtml = '<a name="fullsize" id="enlargebutton" href="/products/strollers/vista/thumbnail_4_side.jpg" rel="lightbox[prodview]" title="vista : bassinet">enlarge</a>';
        //imageshtml += '<a class="hidethis" href="/products/strollers/vista/image_1_color_4_bassinet.jpg" rel="lightbox[prodview]" title="arek123"></a>';
        //imageshtml += '<a class="hidethis" href="/products/strollers/vista/thumbnail_8_extra02.jpg" rel="lightbox[prodview]" title="arek123"></a>';
        imageshtml = input;
		$('enlarge').setHTML(imageshtml);
        //alert(imageshtml);
		Lightbox.init(); //probably not the best solution, but not sure how else to force slimbox to recheck so group order stays intact.
	}
});

//var productViewer = new ProductViewer({ product: "g-lite", view: "default", color: "caleigh" });
//productViewer.setInitialImage();





/*
ProductViewer.extend({

        effect: function(name, options){
                var fx = (Element.Effects[name] || Element.Effects.style).call(this, name);
                return (options) ? fx.setOptions(options) : fx;
        }

});

Element.Effects = new Abstract({

        'style': function(name) {
                name = name.capitalize();
                var fx = this.$attributes[name] || false;
                if (!fx) fx = this.$attributes[name] = new Fx.Style(this, name, {wait: false});
                return fx;
        },

        'fade': function() {
                var fx = this.$attributes.fade || false;
                if (!this.$attributes.fade){
                        fx = this.$attributes.fade = new Fx.Style(this, 'opacity', {wait: false});
                        $extend(fx, {
                                'hide': fx.set.pass(0, fx),
                                'fadeIn': fx.start.pass(1, fx),
                                'fadeOut': fx.start.pass(0, fx),
                                'toggle': function(){
                                        return this.start(this.element.isVisible() ? 0 : 1);
                                }
                        });
                }
                return fx;
        },

        'slide': function() {
                var fx = this.$attributes.slide || false;
                if (!this.$attributes.slide){
                        fx = new Fx.Slide(this, {wait: false});
                        fx.wrapper.$attributes.slide = this.$attributes.slide = fx;
                }
                return fx;
        },

        'highlight': function() {
                var fx = this.$attributes.highlight || false;
                if (!fx) {
                        fx = this.$attributes.highlight = new Fx.Style(this, 'backgroundColor', {
                                wait: false,
                                backgroundColor: '#fff'
                        });
                        var backgroundColor = this.getStyle('backgroundColor');
                        if (backgroundColor == 'transparent') backgroundColor = false;
                        $extend(fx, {
                                'to': function(value){
                                        return this.start(backgroundColor || this.options.backgroundColor, value);
                                },
                                'from': function(value){
                                        return this.start(value, backgroundColor || this.options.backgroundColor);
                                }
                        }).addEvent('onComplete', function() {
                                this.element.setStyle('backgroundColor', backgroundColor || this.options.backgroundColor);
                        }, true);
                }
                return fx;
        }

});
*/