/**
* ViewLarger - Handles functions which are specific to View Larger/Alt View Pop-Ups
* @constructor
* @author Unknown
* @date 12/04/2007
*/
var viewLarger = Object.extend(new ProductThumbs('viewLarger'), {
    type: 'viewLarger',
    p1type : 'large',
    THUMBSTAG : new Template( '<img class="#{className}" onclick="viewLarger.setLargeImage(this, true);" onmouseover="viewLarger.chgPreviewImg(this, \'over\', true);" onmouseout="viewLarger.chgPreviewImg(this, \'out\');" index="#{index}" alt="#{altText}" id="thumbImage#{index}#{id}" src="#{src}" />'),
    THUMB_WIDTH : 38,
    THUMB_HEIGHT : 38,
	/**
 	* Templates - HTML Templates for ViewLarger Popup
 	* @constructor
 	* This is a method of class ViewLarger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	*/
    Templates : {
    	/**
 		* GROUP_HEADER - Header Text
 		* This is a method of class Templates
 		* Modified:  Keo 12/14/07 - Added Comments
 		* @author Unkown
 		*/
        GROUP_HEADER : new Template('<h2 class="imageSetHeader">#{name}</h2>'),
        /**
 		* THUMB_NAME - Product Name
 		* This is a method of class Templates
 		* Modified:  Keo 12/14/07 - Added Comments
 		* @author Unkown
 		*/
        THUMB_NAME : new Template('<p id="thumbName">#{name}</p>'),
        /**
 		* COLOR_INST - Color Instruction
 		* This is a method of class Templates
 		* Modified:  Keo 12/14/07 - Added Comments
 		* @author Unkown
 		*/
        COLOR_INST : new Template('<div id="colorInst">#{instruction}</div>'),
    	/**
 		* SWATCH - Color Swatch Detail
 		* This is a method of class Templates
 		* Modified:  Keo 12/14/07 - Added Comments
 		* @author Unkown
 		*/
        SWATCH : new Template('<label for="colorSwatch_#{index}" class="cssHide" >#{label} #{altText}</label><input type="image" class="#{className}" id="colorSwatch_#{index}" onClick="viewLarger.setSwatchColor(this, #{index});" onMouseOver="viewLarger.swatchMouseOver(this ,#{index});" onMouseOut="viewLarger.swatchMouseOut(this, #{index});"  src="#{path}" width="#{swatchSize}" height="#{swatchSize}" alt="#{altText}"/>')
    },
	/**
 	* loadDomObjMap - Gets the Hash Key and assigning it as DOM id's
 	* This is a method of class ViewLarger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	*/
    loadDomObjMap : function(map) {
        var obj = this;
        map.keys().each(function(key) {
            obj[key] = $(map[key]);
        });
    },
	/**
 	* ProductImagesDomObjMap - Preparing obj and mapping of html elements and id's
 	* This is a method of class ViewLarger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	*/
    ProductImagesDomObjMap : $H({
        objProductName:'productName',
        objProductNameText:'productName',
        objThumbs:'imageThumbs',
        objLargeImageArea:'mainImage',
        bgImg:'mainImage',
        p1Image : 'mainImage',
        objColorSwatchArea:'colorSwatches',
        thumbHeader : 'thumbHeader'
    }),
	/**
 	* generateSwatchesHelper - Get the swatch information and construct the proper HTML
 	* This is a method of class ViewLarger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	* @returns constructed html array of available colors
 	*/
    generateSwatchesHelper : function(array, swatch, index) {
        array.push(this.Templates.SWATCH.evaluate({
                    index : index,
                    className : index == this.selectedColor ? 'selected' : 'normal',
                    path : swatch.src,
                    altText : swatch.altText,
                    swatchSize : brandConst.INTCOLORSWATCHWIDTH[this.brandCode]
                }));
        return array;
    },
	/**
 	* setSwatchColor - Sets the selected color and name in ViewLarger
 	* This is a method of class ViewLArger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	*/
    setSwatchColor : function(btn, i) {
        var swatch = this.objV.ProductImages.swatch[i];
        if (i != this.selectedColor && swatch) {
            this.setColor(i, swatch);
            this.selectedSwatch.className = 'normal';
            this.selectedSwatch = btn;
            btn.className = 'selected';
        }
        this.objColorName.innerHTML = this.objV.arrayVariantStyleColors[this.selectedColor].strColorName;
    },
	/**
 	* swatchMouseOver - Sets the mouseover color and name in ViewLarger
 	* This is a method of class ViewLArger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	*/
    swatchMouseOver : function(btn, index) {
        if (index != this.selectedColor) {
            this.swatchOver(index);
            btn.className = 'selected';
            this.objColorName.innerHTML = this.objV.arrayVariantStyleColors[index].strColorName;
        }
    },
	/**
 	* swatchMouseOut - Sets the mouseout color and name in ViewLarger
 	* This is a method of class ViewLArger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	*/
    swatchMouseOut : function(btn, index) {
        if (index != this.selectedColor) {
            this.swatchOut(index);
            btn.className = 'normal';
            this.objColorName.innerHTML = this.objV.arrayVariantStyleColors[this.selectedColor].strColorName;
        }
    },
	/**
 	* generateSwatches - Add the constructed HTML from  generateSwatchesHelper and assign selected color
 	* This is a method of class ViewLarger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	*/
    generateSwatches : function() {
        var html = [this.Templates.COLOR_INST.evaluate({instruction:this.strColorSelectInstruction})];
        html.push('<div id="colorName">' + this.objV.arrayVariantStyleColors[this.selectedColor].strColorName + '</div>');
        this.objV.ProductImages.swatch.inject(html, this.generateSwatchesHelper.bind(this));
        this.objColorSwatchArea.innerHTML = html.join('');
        this.selectedSwatch = $('colorSwatch_' + this.selectedColor);
        this.objColorName = $('colorName');

        this.thumbHeader.innerHTML = this.strMoreViewsHeaderText||'More Views';
    },
	/**
 	* loadParentData - Gets the data from the parent and create accessible objV, objP
 	* This is a method of class ViewLarger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	*/
    loadParentData : function(parent) {
        this.objV = Object.extend({}, this.parent.objV);
        this.objP = Object.extend({}, this.parent.objP);
        this.selectedColor = parent.selectedColor || 0;
        this.setProductNameText = parent.setProductNameText;
        this.getProductNameText = parent.getProductNameText;
    },
	/**
 	* loadProductImages - Prepare the images and elements of the page
 	* This is a method of class ViewLarger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	*/
    loadProductImages : function() {
        this.setProductNameText();
        this.generateThumbs(true);
        this.setLargeImage(this.p1);
        this.generateSwatches();
        if(!(reportingService||{}).isActive){
        	omni.setMoreViews(this.objP.strProductId);
        } else {
        	this.setReportingService(this.type, this.parent);
        }
        
    },
	/**
 	* initializeProductImages - Init handler for ViewLarger Pop Up
 	* This is a method of class ViewLarger
 	* Modified:  Keo 12/03/07 - Added Comments
 	* @author Unkown
 	*/
    initializeProductImages : function() {
        var parentWindow = window.opener;
        this.parent = parentWindow[parentWindow.GID.Browse.Pops[this.name].app];
        this.brandCode = this.parent.brandCode;
        this.loadParentData(this.parent);
        this.viewLength = brandConst.perspViewLength[this.brandCode];
        this.showOutfitThumb = false;
        this.app = this;

        this.loadDomObjMap(this.ProductImagesDomObjMap);
        this.loadProductImages();
    },
    setReportingService : function (viewType, app) {
        if(!(reportingService||{}).isActive) return;
        reportingService.controller.viewManagers[(viewType||this.type) + 'ViewManager'].controller.getReportRequest(app);
    }
});

if(!(reportingService||{}).isActive){
	omni.strViewType = "productImageLoader";
}
Event.observe(window, 'load', viewLarger.initializeProductImages.bind(viewLarger));


