function setImgSrc(id, src) {
	$(id).src = src;
}

function returnObjPosition(objTarget){
	var pos = Position.cumulativeOffset(objTarget);
	return {x:pos[0], y:pos[1]};
}

function setObjPosition(element,intX,intY) 
{
	strX = String(intX);
	strY = String(intY);
	$(element).setStyle({
		top: intY + (strY.indexOf("px") == -1 ? "px" : ""),
		left: intX + (strX.indexOf("px") == -1 ? "px" : "")
	});
}

var aryImages = new Array();
var iCurrentImg = 0;

function setNextPic()
{
    if(iCurrentImg < aryImages.length-1)
    {
        iCurrentImg++;
        $("MoreInfo_product_image").src=aryImages[iCurrentImg];
    }
}

function setPrevPic()
{
    if(iCurrentImg > 0)
    {
        iCurrentImg--;
        $("MoreInfo_product_image").src=aryImages[iCurrentImg];
    }
}

function showAltPics()
{
    $("divAltView").style.display = "block";
    $("divStandardView").style.display = "none";
}

function showStdView()
{
    $("divStandardView").style.display = "block";
    $("divAltView").style.display = "none";
}


var MoreInfo = Class.create();

MoreInfo.prototype = {

    templates : Object.extend({

       QUICK_LOOK : new Template(
                '<DIV class=acc style="CLEAR: right;">'+
                    '<DIV class=subacc>'+
                '<div id="MoreInfoWindowTop" class="MoreInfoWindowTop"><a href="javascript:moreInfo.closeMoreInfo();"><img src="/images/shared/MoreInfo/MoreInfo_close.gif" alt="close MoreInfo Window" id="MoreInfoClose" onmouseover="setImgSrc(this,\'/images/shared/MoreInfo/MoreInfo_closeHL.gif\');" onmouseout="setImgSrc(this,\'/images/shared/MoreInfo/MoreInfo_close.gif\');" /></a></div>' +
                '<div id="MoreInfoWindowContent" class="MoreInfoWindowContent">' +
                    '<DIV id="divStandardView" style="display:block;">' + 
                        '<TABLE cellSpacing=0 cellPadding=10 width="100%" border=0>' +
                        '<TBODY>' +
                        '<TR>' +
                        '	<TD vAlign=top width=400><B>#{productName}</B>' +
                        '		<TABLE class=roundedBox cellSpacing=0 cellPadding=0 width="100%" align=center border=0>' +
                        '			<TBODY>' +
                        '			<TR>' +
                        '				<TD class=left><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '				<TD class=center><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '				<TD class=right><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '			</TR>' +
                        '			</TBODY>' +
                        '		</TABLE>' +
                        '		<DIV>' +
                        '			<TABLE class=slicedBoxMiddle cellSpacing=0 cellPadding=0 width="100%" align=center border=0>' +
                        '				<TBODY>' +
                        '				<TR>' +
                        '					<TD class=left></TD>' +
                        '					<TD class=center><a href="javascript:moreInfo.goProductPage();"><img src="#{mainImg}" name="MoreInfo_product_image" id="MoreInfo_product_image" width="#{width}" height="#{height}"/></a>' +	
                        '					</TD>' +
                        '					<TD class=right>&nbsp;</TD>' +
                        '				</TR>' +
                        '				</TBODY>' +
                        '			</TABLE>' +
                        '		</DIV>' +
                        '		<DIV>' +
                        '			<TABLE class=slicedBoxBottom cellSpacing=0 cellPadding=0 width="100%" align=center border=0>' +
                        '				<TBODY>' +
                        '				<TR>' +
                        '					<TD class=left><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '					<TD class=center><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '					<TD class=right><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '				</TR>' +
                        '				</TBODY>' +
                        '			</TABLE>' +
                        '		</DIV><br>' +
                        '       <img onclick="javascript:showAltPics();" id="btnShowAltPics" src="/images/shared/MoreInfo/ViewMoreImagesBtnOff.gif" alt="Show more pictures" onmouseover="setImgSrc(this,\'/images/shared/MoreInfo/ViewMoreImagesBtnOn.gif\');" onmouseout="setImgSrc(this,\'/images/shared/MoreInfo/ViewMoreImagesBtnOff.gif\');" border=0 />' +		
                        '	</TD>' +
                        '	<TD vAlign=top><br>#{descriptor}' +
                        '   <BR><BR><img onclick="javascript:moreInfo.goProductPage();" id="btnShowDetails" src="/images/shared/MoreInfo/ViewDetailsOff.gif" alt="Show product details" onmouseover="setImgSrc(this,\'/images/shared/MoreInfo/ViewDetailsOn.gif\');" onmouseout="setImgSrc(this,\'/images/shared/MoreInfo/ViewDetailsOff.gif\');" border=0 />' +
                        '   </TD>' +		
                        '</TR>' +
                        '</TBODY>' +
                        '</TABLE>' +
                    '</DIV>' + 
                    '<DIV id="divAltView" style="display:none">' + 
                        '<TABLE cellSpacing=0 cellPadding=10 width="100%" border=0>' +
                        '<TBODY>' +
                        '<TR>' +
                        '	<TD vAlign=top width=400><B>#{productName}</B>' +
                        '		<TABLE class=roundedBox cellSpacing=0 cellPadding=0 width="100%" align=center border=0>' +
                        '			<TBODY>' +
                        '			<TR>' +
                        '				<TD class=left><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '				<TD class=center><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '				<TD class=right><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '			</TR>' +
                        '			</TBODY>' +
                        '		</TABLE>' +
                        '		<DIV>' +
                        '			<TABLE class=slicedBoxMiddle cellSpacing=0 cellPadding=0 width="100%" align=center border=0>' +
                        '				<TBODY>' +
                        '				<TR>' +
                        '					<TD class=left></TD>' +
                        '					<TD class=center><a href="javascript:moreInfo.goProductPage();"><img src="#{mainImg}" name="MoreInfo_product_image2" id="MoreInfo_product_image2" width="#{width}" height="#{height}"/></a>' +	
                        '					</TD>' +
                        '					<TD class=right>&nbsp;</TD>' +
                        '				</TR>' +
                        '				</TBODY>' +
                        '			</TABLE>' +
                        '		</DIV>' +
                        '		<DIV>' +
                        '			<TABLE class=slicedBoxBottom cellSpacing=0 cellPadding=0 width="100%" align=center border=0>' +
                        '				<TBODY>' +
                        '				<TR>' +
                        '					<TD class=left><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '					<TD class=center><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '					<TD class=right><IMG height=1 src="images/roundedbox/pixel.gif" width=1 border=0> </TD>' +
                        '				</TR>' +
                        '				</TBODY>' +
                        '			</TABLE>' +
                        '		</DIV><br>' +
                        '       <img onclick="javascript:showStdView();" id="btnShowStdView" src="/images/shared/MoreInfo/BackOff.gif" alt="Back to standard view" onmouseover="setImgSrc(this,\'/images/shared/MoreInfo/BackOn.gif\');" onmouseout="setImgSrc(this,\'/images/shared/MoreInfo/BackOff.gif\');" border=0 />' +		
                        '	</TD>' +
                        '	<TD vAlign=top>#{altPicsHtml}' +
                        '   </TD>' +		
                        '</TR>' +
                        '</TBODY>' +
                        '</TABLE>' +
                    '</DIV>' + 
                '</div>' +
                '<div id="MoreInfoWindowBottom" class="MoreInfoWindowBottom"></div>' +
                '</DIV></DIV>' 
                ) 
        }),
        
/**
 * constructor for MoreInfo Class
 */
    initialize : function() 
    {
        this.strProductId = "";
        this.objMoreInfoLauncher = $("MoreInfoLauncher"); 
        this.moreInfoImg = $("MoreInfoLauncherImg"); 
        this.objMoreInfo = $("MoreInfoWindow");
        this.isMoreInfoOpen = false;
    },

    objMoreInfoTarget : {
        strProductId : '',
        strImgFile : '',
        position : '',
        strProductURL : '',
        strDescriptor : '',
        strWebSitePath : '', 
        strAltImageList : '',
        strName : '',
        obj : null
    },

    /**
     * opens MoreInfo launcher when mouseover a product image
     */
    openMoreInfoLauncher : function(strProductId, strWebSitePath, strDescriptor, strAltImageList, strName) 
    {
		var blnOpen = false;
		if (this.isMoreInfoOpen) 
		{
		    if (this.strProductId != strProductId) 
		        blnOpen = true;
		} 
		else 
			blnOpen = true;

		if (blnOpen) 
		{
            var target = this.objMoreInfoTarget;
            if (!this.isMoreInfoOpen) 
                target.obj = $('img_' + strProductId);
                
            if(!target.obj) 
                return;
                
            target.strProductId = strProductId;
            this.strProductId = strProductId;
            target.position = returnObjPosition(target.obj);
            target.strImgFile = target.obj.src;
            target.strProductURL = strWebSitePath + '/Product/' + this.objMoreInfoTarget.strProductId + '.aspx';
            target.strDescriptor = strDescriptor;
            target.strWebSitePath = strWebSitePath;
            target.strAltImageList = strAltImageList;
            target.strName = strName;
                        
			this.objMoreInfoLauncher.setStyle({left: (target.position.x + target.obj.offsetWidth / 2 - 40) + 'px', top: (target.position.y + target.obj.offsetHeight - 30) + 'px', visibility: 'visible'});
		}
	},

    /**
     * close MoreInfo launcher when MoreInfo is opened, or mouseout on product img.
     * @param e
     */
    closeMoreInfoLauncher : function(e) 
    {
        if(e) {
            var ele = e.target || e.fromElement;
            returnObjPosition(ele);
            Element.getDimensions(ele);
            if(Position.within(ele, Event.pointerX(e), Event.pointerY(e))) 
                return;
        }

        this.objMoreInfoLauncher.style.visibility = 'hidden';
        this.moreInfoImg.src = '/images/shared/MoreInfo/MoreInfoBtnOn.gif';
        this.objMoreInfoTarget.strProductId = 0;
    },

    /**
     * opens MoreInfo
     * @param strTarget
     */
    launchMoreInfo : function(strTarget) 
    {
        var strProductId = this.objMoreInfoTarget.strProductId;
		if (strTarget) 
		{
			this.objMoreInfoTarget.position = returnObjPosition($(strTarget));
			this.objMoreInfoTarget.targetImg = $(strTarget);
		}

        this.closeMoreInfoLauncher();
        this.isMoreInfoOpen = true;
        this.loadMoreInfoAnimate();
	}
	,

    /**
     * defines a bound box base on browser dimension and scroll length, so MoreInfo always opens
     * within the window
     */
    setupMoreInfoBoundBox : function() 
    {
        if(!document.body)
            return;
    
        if(document.documentElement.scrollLeft != null)
            this.minX = document.documentElement.scrollLeft;
        else 
            this.minX = window.pageXOffset;
            
        if(document.documentElement.scrollTop != null)  
            this.minY = document.documentElement.scrollTop;
        else
            this.minY = window.pageYOffset;

        if(document.documentElement.clientWidth != null)  
            this.browserW = document.documentElement.clientWidth;
        else
            this.browserW = window.innerWidth;
            
        if(document.documentElement.clientWidth != null)  
    	    this.browserH = document.documentElement.clientHeight;
    	else
            this.browserH = window.innerHeight;
            
	    this.maxX = this.browserW + this.minX;
	    this.maxY = this.browserH + this.minY;
    },
	
    /**
     * opens MoreInfo with scriptaculous fade effect
     */
    loadMoreInfoAnimate : function() {
		this.loadMoreInfo();
	    this.moreInfoHeight = 700;
	    this.moreInfoWidth = 600;
	    this.moreInfoX = this.objMoreInfoTarget.position.x - this.moreInfoWidth * 0.5;
		this.moreInfoY = this.objMoreInfoTarget.position.y - this.moreInfoHeight * 0.5;

	    var x = this.moreInfoX < this.minX ? this.minX + 50 : this.moreInfoX > this.maxX - this.moreInfoWidth ? this.maxX - this.moreInfoWidth - 50 : this.moreInfoX;
	    var y = this.moreInfoY < this.minY ? this.minY + 50 : this.moreInfoY > this.maxY - this.moreInfoHeight? this.maxY - this.moreInfoHeight - 50 : this.moreInfoY;

	    this.objMoreInfo.style.display = 'none';
	    setObjPosition(this.objMoreInfo, x, y);
	    new Effect.Appear(this.objMoreInfo.id, {duration: 0.3});
	},

    /**
     * generates MoreInfo html and initialize default user states
     */
    loadMoreInfo : function() 
    {
        this.objMoreInfo.innerHTML = this.getMoreInfoFrame();
        this.draggable = new Draggable(this.objMoreInfo.id, {handle:'MoreInfoWindowTop'});
	},
	
    /**
     * generates html for MoreInfo
     * @param id
     */
    getMoreInfoFrame : function() 
    {
        var aryTmp = this.objMoreInfoTarget.strAltImageList.split("|");

        var strAltPicsHtml = '<table cellspacing=15 cellpadding=0>';
        strAltPicsHtml += '<tr><td style="border:1px solid #9DC4D8;"><img src="' + this.objMoreInfoTarget.strImgFile + '" border=1 / width=75 onmouseover="setImgSrc(\'MoreInfo_product_image2\',\'' + this.objMoreInfoTarget.strImgFile + '\');"></td></tr>';
        
        iCurrentImg = 0;
        aryImages.length = 0;
        aryImages.push(this.objMoreInfoTarget.strImgFile);

        for(var i=0; i<aryTmp.length;i++)
        {
            if(aryTmp[i].length > 0)
            {
                strAltImg = this.objMoreInfoTarget.strWebSitePath;
                if(aryTmp[i][0] != '/')
                    strAltImg += '/';
                    
                strAltImg +=  aryTmp[i];
                aryImages.push(strAltImg);
                strAltPicsHtml += '<tr><td style="border:1px solid #9DC4D8;"><img src="' + strAltImg + '" border=1 / width=75 onmouseover="setImgSrc(\'MoreInfo_product_image2\',\'' + strAltImg + '\');"></td></tr>';
            }
        }

        strAltPicsHtml += '</table>';
        
        return this.templates.QUICK_LOOK.evaluate({
            mainImg : this.objMoreInfoTarget.strImgFile,
            width : 375,
            height : 375,
            descriptor : this.objMoreInfoTarget.strDescriptor,
            productName : this.objMoreInfoTarget.strName,
            altPicsHtml : strAltPicsHtml
        });
    },
    
    /**
     * helper method to handle MoreInfo after close event
     * @see closeMoreInfo
     */
    closeMoreInfoHelper : function() 
    {
        this.isMoreInfoOpen = false;
    },
    
     /**
     * close MoreInfo with fade effect
     */
    closeMoreInfo : function() {
	    new Effect.Fade(this.objMoreInfo, {
	        afterFinish: this.closeMoreInfoHelper.bind(this), duration: 0.2});
	},

    /**
     * action taken when the product image is clicked on MoreInfo
     */
    goProductPage : function() 
    {
        window.location.href = this.objMoreInfoTarget.strProductURL;
    }

};