var _mainImgObj = null;
var _currentIndexPicBlock = null;
var _currentPicBefAftBlock = null;
var _beforeAfterPicsBlock = null;
var _thumbUrl = new String('/project_thumbnail.aspx?image={0}&width=64&height=51&constrain=true');
var _currentSetNo = 1;
var _preloadImg = new Array();

String.prototype.trim = function() {
    a = this.replace(/^\s+/, '');
    return a.replace(/\s+$/, '');
};

function IsPreloaded(imgSrc) {
    for (var i = 0; i < _preloadImg.length; i++) {
        if (_preloadImg[i].src.indexOf(imgSrc) > -1) return true;
    }
    
    return false;
}

function PreloadImageSet(imageSetNo) {
    var currPicSet = projectPicSets[imageSetNo];
    // preload before/after pic sets
    for (var i = 0; i < 2; i++) {
        if (currPicSet[i][0] && !IsPreloaded(currPicSet[i][0])) {
            var image = new Image();
            image.src = currPicSet[i][0];
            image.lat = currPicSet[i][1];
            _preloadImg.push(image);
        }
    }
}

function InitProjectThumbnails() {
    
    // set the size to the image object
    _mainImgObj = $('mainImgPanel').select('[class="img1"]')[0]
    _beforeAfterPicsBlock = $('beforeAfterPics');
    
    _currentIndexPicBlock = $('iRowProjectDetails').select('[class="pictureBlock selected"]')[0]; 
    _currentPicBefAftBlock = _beforeAfterPicsBlock.select('[class="pictureBlock after selected"]')[0];
    
    // attach preload events
    $('iRowProjectDetails').select('.projectThumbnails')[0].select('.pictureBlock').each(
        function(element, index) {
            Event.observe(element, 'mouseover', function(event) {
                PreloadImageSet(index);
            });
        }
    );
    
}

function ChangePictureSet(sender, setNumber, picType) {
    
    var currentSet = null;
    var setPicNo = 1;
    var newPicBlock = $(sender.parentNode.parentNode);
    var isIndexPic = $(newPicBlock.parentNode).hasClassName("projectThumbnails");    
    
    if (!isIndexPic) setNumber = _currentSetNo;
    if (picType.trim() == 'before') setPicNo = 0;
    
    currentSet = (projectPicSets[setNumber-1]);
    
    var newImgSrc = currentSet[setPicNo][0];
    var newImgAltTxt = currentSet[setPicNo][1];
    
    if (_currentIndexPicBlock && _mainImgObj && newImgSrc && _mainImgObj.src.indexOf(newImgSrc) == -1) {
        // remove the pic block selected class only if clicked on the index pic block
        if (isIndexPic) {
            _currentIndexPicBlock.removeClassName("selected");
            _currentIndexPicBlock =  newPicBlock;
        }
        else {
            if (_currentPicBefAftBlock) _currentPicBefAftBlock.removeClassName("selected");
            _currentPicBefAftBlock =  newPicBlock;
        }
        
        // fade the 'before/after' set
        if (_beforeAfterPicsBlock.visible() && isIndexPic) 
                new Effect.Fade(_beforeAfterPicsBlock, {duration: 0.2
                    ,afterFinish: function()
                    {
                        ProcessNewSet(newPicBlock, currentSet, newImgSrc, newImgAltTxt, setNumber, isIndexPic);
                    }
                });
        else ProcessNewSet(newPicBlock, currentSet, newImgSrc, newImgAltTxt, setNumber, isIndexPic);
    }
}

function ProcessNewSet(newPicBlock, currentSet, newImgSrc, newImgSrcAltTxt, setNumber, isIndexPic) {
    // fade out/fade in the picture
        new Effect.Fade(_mainImgObj, {duration: 0.2
            ,beforeStart: function() {
                // assign before / after image set
                _beforeAfterPicsBlock.select('img')[0].src = _thumbUrl.replace('{0}', currentSet[0][0]);
                _beforeAfterPicsBlock.select('img')[0].alt = currentSet[0][1];
                _beforeAfterPicsBlock.select('img')[1].src = _thumbUrl.replace('{0}', currentSet[1][0]);
                _beforeAfterPicsBlock.select('img')[1].alt = currentSet[1][1];
            }
            ,afterFinish: function()
            {
                _mainImgObj.src = newImgSrc;
                _mainImgObj.alt = newImgSrcAltTxt;
                newPicBlock.addClassName("selected");
                //if (_currentPicBefAftBlock) _currentPicBefAftBlock.addClassName("selected");
                new Effect.Appear(_mainImgObj, {duration: 0.2});                
                
                // show the before/after shots if the both pics are available
                if (currentSet[0][0] && currentSet[1][0] && !_beforeAfterPicsBlock.visible()) {
                    
                    // we're showing the frame, so the after element has to be set to default
                    var picsBlocks =_beforeAfterPicsBlock.select(".pictureBlock");
                    
                    _currentPicBefAftBlock.removeClassName("selected");                    
                    if (!picsBlocks[1].hasClassName("selected")) picsBlocks[1].addClassName("selected");
  
                    new Effect.Appear(_beforeAfterPicsBlock, {duration: 0.2});
                }
                
                // remember the last set number
                _currentSetNo = setNumber;
                
                _currentPicBefAftBlock = _beforeAfterPicsBlock.select(".selected")[0];
            }
        });
}

Event.observe(window, 'load', InitProjectThumbnails);