/*!
 * @author Gproxy Design Inc.
 * @copyright (c) 2009, Gproxy Design Inc. All rights reserved.
 * @version 1.0
 *
 * Gproxy doesn't allow to copy or change this code without Gproxy authorization.
 * See http://www.gproxy.com/licenses/license01.pdf for the full license governing this code.
 */

var strCurrentThumb = 'thumb-li-0';
var strCurrentImage = 'image-li-0';
var strCurrentEnLarge = 'enlarge-li-0';

function magicZoom(options){
    // this set width, height, position and distance of zoom div 
    var settings = {
        xzoom: 230, //zoomed div default width
        yzoom: 230, //zoomed div default height
        offset: 105, //zoomed div default offset
        position: "right", //zoomed div default position,offset position is to the right of the image
        id: "img"
    };
    if (options) {
        $j.extend(settings, options);
    }
    
    $j(settings.id).each(function(index, el){
        $j(el).hover(function(){
            var imageLeft = $j(this).get(0).offsetLeft;
            var imageRight = $j(this).get(0).offsetRight;
            var imageTop = $j(this).get(0).offsetTop;
            var imageWidth = $j(this).get(0).offsetWidth;
            var imageHeight = $j(this).get(0).offsetHeight;
            var strNewEnLargeId = $j(this).attr('id').replace('image-', 'enlarge-');
            var bigimage = $j('#' + strNewEnLargeId).attr("src");
            
			if (bigimage.search(/x.gif/gi) != -1 || bigimage === '' || bigimage === null) {
				bigimage = $j(this).attr('src');
			}
				
            if ($j("div.zoomdiv").get().length == 0) {
                $j(this).after("<div class='zoomdiv' style='text-align: center;vertical-align:middle;'><img class='bigimg' src='" + bigimage + "'/></div>");
            }
            if (settings.position == "right") {
                leftpos = imageLeft + imageWidth + settings.offset;
            }
            else {
                leftpos = imageLeft - settings.xzoom - settings.offset;
            }
            $j("div.zoomdiv").css({
                top: imageTop,
                left: leftpos
            });
            $j("div.zoomdiv").width(settings.xzoom);
            $j("div.zoomdiv").height(settings.yzoom);
            $j("div.zoomdiv").show();
            $j(document.body).mousemove(function(e){
                var bigwidth = $j(".bigimg").get(0).offsetWidth;
                var bigheight = $j(".bigimg").get(0).offsetHeight;
                var scaley = 'x';
                var scalex = 'y';
                if (isNaN(scalex) | isNaN(scaley)) {
                    var scalex = Math.round(bigwidth / imageWidth);
                    var scaley = Math.round(bigheight / imageHeight);
                }
                mouse = new MouseEvent(e);
                // this set scale of height and widht of zoom div (aligns the image to zoom div, and depends of zoom image size)
                scrolly = mouse.y - imageTop - ($j("div.zoomdiv").height() * 1 / scaley) / 4;
                $j("div.zoomdiv").get(0).scrollTop = scrolly * scaley;
                scrollx = mouse.x - imageLeft - ($j("div.zoomdiv").width() * 1 / scalex) / 4;
                $j("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex;
            });
        }, function(){
            $j("div.zoomdiv").hide();
            $j(document.body).unbind("mousemove");
            $j(".lenszoom").remove();
            $j("div.zoomdiv").remove();
        });
    });
}

function MouseEvent(e){
    this.x = e.pageX;
    this.y = e.pageY;
}

function imbCreateGallery(arrThumbs, arrImages, arrEnLarge, strThumbsCnt, strImagesCnt, strEnLargeCnt, strAjaxLoaderCnt, zoomOptions){
    var objLi = null;
    var objImg = null;
    var objLink = null;
	if (arrThumbs.length > 1){
	    for (var i = 0; i < arrThumbs.length; i++) {
	        objLi = $j('<li>');
	        objLink = $j("<a>").attr({
	            href: "#",
	            id: 'thumb-link-' + i.toString()
	        });
	        objLink.click(function(e){
	            imbDisplayEnLarge($j(this).attr('id'), 'enlarge-li-');
	        });
	        
	        objLink.hover(function(e){
	            $j(this).children().addClass('thumb-on');
	            $j(this).children().removeClass('thumb-off');
	            imbDisplayImage($j(this).attr('id'), 'image-li-');
	        },
			function(){
				$j(this).children().addClass('thumb-off');
	            $j(this).children().removeClass('thumb-on');
			}	
			);	        
	        objImg = $j('<img>');
	        objImg.addClass('thumb-off');
	        objImg.attr({
	            src: arrThumbs[i],
	            id: 'thumb-' + i.toString()
	        });
	        objLink.append(objImg);
	        objLi.append(objLink).appendTo('#' + strThumbsCnt);
	    }
	}else{
		$j('#image-0').click(function(e){
			imbDisplayEnLarge('thumb-link-0', 'enlarge-li-');
		});
	}
    $j(window).load(function(){
        $j('#' + strAjaxLoaderCnt).fadeOut(500, function(){
            $j('#' + strThumbsCnt).fadeIn(500);
            
        });
        for (var k = 1; k < arrImages.length; k++) {
            objLi = $j("<li>").attr({
                id: 'image-li-' + k.toString()
            });
            objImg = $j('<img>');
            objImg.attr({
                src: arrImages[k],
                id: 'image-' + k.toString()
            });
            objImg.addClass('image-on');
            objLi.addClass('image-off');
            objLi.append(objImg).appendTo('#' + strImagesCnt);
        }
        for (var j = 0; j < arrEnLarge.length; j++) {
            objLi = $j("<li>").attr({
                id: 'enlarge-li-' + j.toString()
            });
            objImg = $j('<img>');
            objImg.attr({
                src: arrEnLarge[j],
                id: 'enlarge-' + j.toString()
            });
            objLi.addClass('enlarge-off');
            objLi.append(objImg).appendTo('#' + strEnLargeCnt);
        }
		magicZoom(zoomOptions);
    });
    $j("#pop").hide();
}

function imbDisplayImage(strObjId, strImageCnt){
    var strNewImageId = strObjId.replace('thumb-link-', strImageCnt);
	var strImageSrc = $j('#' + strNewImageId + ' img').attr('src');	
    if (strNewImageId != strCurrentImage) {				
		if (strImageSrc.search(/x.gif/gi) == -1 && strImageSrc !== '' && strImageSrc !== null) {			
			$j('#image-cnt li').css('display','none');			
			//$j('#' + strNewImageId).fadeIn(500);
			$j('#' + strNewImageId).show();
			/*
			$j('#' + strCurrentImage).fadeOut(500, function(){				
			});
			*/
			strCurrentImage = strNewImageId;
		}
    }
    
}

function imbDisplayEnLarge(strObjId, strImageCnt){
    var strNewImageId = strObjId.replace('thumb-link-', strImageCnt);
    var strLargeImageSrc = $j('#' + strNewImageId + ' img').attr('src');
    var intRand = Math.round(Math.random() * 1000);
    
    $j('.popup').hide();    
    $j('.bgpopup').remove();
    $j('.popup .popup-wrap .popup-image img').remove();    
  
	if (strLargeImageSrc.search(/x.gif/gi) != -1 || strLargeImageSrc === '' || strLargeImageSrc === null) {
		strObjId = strObjId.replace('thumb-link-','image-li-');
		strLargeImageSrc = $j('#' + strObjId + ' img').attr('src');
	}	
    $j('body').append('<div class="bgpopup"></div>');
    $j('body .bgpopup').fadeTo(0, 0.5);
    $j('<img />').attr('src', strLargeImageSrc + '&rand=' + intRand).load(function(){
        $j('.popup .popup-wrap .popup-image').append($j(this));
        $j('.popup').show(400, function(){
            img_w = $j('.popup .popup-wrap .popup-image img').attr('width');
            img_h = $j('.popup .popup-wrap .popup-image img').attr('height');
            $j('.popup .popup-wrap').css('width', img_w + 'px');
            $j('.popup .popup-wrap').css('height', img_h + 'px');
            $j('.popup').css('width', (img_w + 2) + 'px');
            $j('.popup').css('height', (img_h + 2) + 'px');
            $j('.popup').css('margin-left', '-' + ((img_w + 2) / 2) + 'px');
            $j('.popup').css('margin-top', '-' + ((img_h + 2) / 2) + 'px');
        });
    });
    $j('.popup .popup-wrap .popup-image img').error(function(){
        $j('.popup').hide(400);
        $j('.bgpopup').fadeTo(400, 0, function(){
            $j('.bgpopup').remove();
            $j('.popup .popup-wrap .popup-image img').remove();
        });
    });
    	    
    $j('.popup, .popup-close').click(function(){
        $j('.popup').hide(400);
        $j('.bgpopup').fadeTo(400, 0, function(){
            $j('.bgpopup').remove();
            $j('.popup .popup-wrap .popup-image img').remove();
        });
    });    
}