var zoomLoading;
YUI.add('_zoom', function (Y) {

    Y.namespace('my.zoom');
    var _zoom = Y.my.zoom;

    _zoom.gallery = function () {

        this.srcArray = [],
	    this.currentIndex = [],
	    this.galleries = [],
	    this.targetLink = '',
	    this.larrImage = '<img src="/Areas/Site/Scripts/Zoom/left-arrow.jpg" width="43" height="58" />',
	    this.rarrImage = '<img src="/Areas/Site/Scripts/Zoom/right-arrow.jpg" width="43" height="58" />'
        this.shuffle = {};
        this.widgetCreate = false;
        this.firstIndex = true;
        this.lastIndex = false;
        zoomLoading = new Y.my.utils.loadingPanel({ id: 'xxx1-image', delay: 1000, styles: { padding: '5px 15px', width: 'auto', background: '#c00', fontSize: '14px', fontStyle: 'italic', zIndex: 100000} });

    }

    _zoom.gallery.prototype =
	{
	    init: function () {

	        var els = Y.all('a'), obj = this;

	        els.each(

                function () {

                    var link = this, index = els.indexOf(link), cName = link.get('className') ? link.get('className') : false;

                    if (cName && /dotorg-zoom/.test(cName)) {

                        link.set('id', 'dz' + index);

                        var title = link.getAttribute('title') ? link.getAttribute('title') : false,
				            href = link.getAttribute('href') ? link.getAttribute('href') : false,
				            id = link.get('id'),
                            cn = cName;

                        if (!link.attach) link.attach = Y.on('click', function (e) { obj.addZoom(e, link) }, link);
                        obj.srcArray.push([cn, href, title, id]);

                    }
                }
            );

	        for (var i = 0, l = obj.srcArray.length; i < l; i++) {

	            if (/\[/.test(obj.srcArray[i][0])) {

	                if (obj.galleries[obj.srcArray[i][0]]) obj.galleries[obj.srcArray[i][0]].push(obj.srcArray[i]);
	                else obj.galleries[obj.srcArray[i][0]] = [obj.srcArray[i]];

	            }
	        }

	        obj.createTempImage();
	    },

	    createTempImage: function () {

	        var tmpImg = document.createElement('img'),
                tmpImgContainer = document.createElement('div');

	        tmpImgContainer.id = 'xxx-tmp-c';
	        tmpImg.id = 'xxx-tmp-image';
	        document.getElementsByTagName('body')[0].appendChild(tmpImgContainer);
	        tmpImgContainer.appendChild(tmpImg);

	    },

	    addZoom: function (e, link) {

	        e.halt();
	        var cn = link.getAttribute('className'), s = link.getAttribute('href'), t = link.getAttribute('title') ? link.getAttribute('title') : false;
	        this.targetLink = link;
	        this.zoomIt(cn, s, t);

	    },

	    zoomIt: function (cn, href, title) {

	        zoomLoading.show('uploading image...');

	        if (!this.widgetCreate) this.createZoomHtml(title);

	        var obj = this,
                img = Y.one('#xxx-image-pic'),
		        descBclock = Y.one('#xxx-image-desc'),
		        closer = Y.one('#xxx-image-close'),
		        mask = Y.one('#xxx-image-mask');

	        mask.setStyle('display', '');
	        mask.setStyle('visibility', 'visible');

	        img.purge(false);

	        Y.on('load', function () {

	            if (obj.galleries[cn] && (obj.galleries[cn].length > 1)) {

	                obj.initShuffle(obj.galleries[cn], cn, href, descBclock);

	            }
	            obj.resizeZoomImage(img, href);

	        }, img);

	        img.set('src', href);
	        Y.on('click', function () { obj.closeZoom() }, closer);
	        Y.on('keyup', function (e) { if (e.keyCode == 27) obj.closeZoom() }, document.documentElement);

	    },

	    closeZoom: function () {

	        if (Y.one('#xxx-image')) {

	            Y.one('#xxx-image').setStyle('visibility', 'hidden');
	            Y.one('#xxx-image-mask').setStyle('visibility', 'hidden');
	            Y.one('#xxx-image').setStyle('display', 'none');
	            Y.one('#xxx-image-mask').setStyle('display', 'none');
	            Y.one('#xxx-image-pic').set('src', '');

	        }

	    },

	    createZoomHtml: function (desc) {

	        var imageContainer = document.createElement('div'),
		        img = document.createElement('img'),
		        descBclock = document.createElement('div'),
		        closer = document.createElement('div'),
		        body = document.getElementsByTagName('body')[0],
		        mask = document.createElement('div'),
		        html = document.documentElement,
		        scrollFix = html.scrollHeight - html.clientHeight,
		        wh = html.clientHeight + scrollFix;

	        imageContainer.style.visibility = 'hidden';
	        imageContainer.id = 'xxx-image';
	        img.id = 'xxx-image-pic';
	        closer.id = 'xxx-image-close';
	        mask.id = 'xxx-image-mask';
	        mask.style.width = body.offsetWidth + 'px';
	        mask.style.height = wh + 'px';
	        descBclock.id = 'xxx-image-desc';
	        body.appendChild(mask);
	        body.appendChild(imageContainer);
	        imageContainer.appendChild(img);
	        imageContainer.appendChild(descBclock);
	        imageContainer.appendChild(closer);
	        img.style.verticalAlign = 'middle';

	        if (desc) {
	            var descText = document.createElement('div');
	            descText.id = 'xxx-image-desc-text';
	            descBclock.appendChild(descText);
	            descText.appendChild(document.createTextNode(desc));
	        }

	        this.widgetCreate = true;

	    },

	    initShuffle: function (arr, cn, src, arrowContainer) {

	        var obj = this;
	        if (!obj.shuffle[cn]) {

	            obj.shuffle[cn] = true;

	            var larr = document.createElement('div'),
                    rarr = document.createElement('div'),
                    lside = document.createElement('div'),
                    rside = document.createElement('div');

	            arrowContainer.appendChild(larr);
	            arrowContainer.appendChild(rarr);
	            arrowContainer.get('parentNode').appendChild(lside);
	            arrowContainer.get('parentNode').appendChild(rside);

	            larr.id = 'xxx-image-left-arrow';
	            rarr.id = 'xxx-image-right-arrow';
	            lside.id = 'xxx-image-left-side';
	            rside.id = 'xxx-image-right-side';
	            larr.innerHTML = obj.larrImage;
	            rarr.innerHTML = obj.rarrImage;

	            var setupBack = { key: 'back', srcArr: arr, cName: cn },
                    setupFwd = { key: 'fwd', srcArr: arr, cName: cn };

	            larr.attach = Y.on('click', function (e) { obj.shiftPic(setupBack, e) }, larr);
	            lside.attach = Y.on('click', function (e) { obj.shiftPic(setupBack, e) }, lside);
	            rarr.attach = Y.on('click', function (e) { obj.shiftPic(setupFwd, e) }, rarr);
	            rside.attach = Y.on('click', function (e) { obj.shiftPic(setupFwd, e) }, rside);

	            Y.on('keyup', function (e) {

	                switch (e.keyCode) {

	                    case 39: if (!obj.lastIndex) obj.shiftPic(setupFwd, e);
	                        break;
	                    case 37: if (!obj.firstIndex) obj.shiftPic(setupBack, e);
	                        break;

	                }

	            }, document.documentElement)

	        }
	        obj.currentIndex[cn] = obj.getSrcArrayIndex(arr);
	        obj.toggleArrowsStatus(obj.currentIndex[cn], cn, arr);

	    },

	    getSrcArrayIndex: function (arr) {

	        for (var i = 0, len = arr.length; i < len; i++) {

	            if (arr[i][3] == this.targetLink.get('id')) {

	                return i;

	            }

	        }

	    },

	    toggleArrowsStatus: function (indx, cn, arr) {

	        var larr = Y.one('#xxx-image-left-arrow'),
                rarr = Y.one('#xxx-image-right-arrow'),
                lside = Y.one('#xxx-image-left-side'),
                rside = Y.one('#xxx-image-right-side');

	        if (indx == 0) {

	            //larr.setStyle('display', 'none');
	            lside.setStyle('display', 'none');
	            this.firstIndex = true;
	        }
	        else {

	            // larr.setStyle('display', '');
	            lside.setStyle('display', '');
	            this.firstIndex = false;
	        }

	        if (indx == (arr.length - 1)) {

	            // rarr.setStyle('display', 'none');
	            rside.setStyle('display', 'none');
	            this.lastIndex = true;
	        }
	        else {

	            // rarr.setStyle('display', '');
	            rside.setStyle('display', '');
	            this.lastIndex = false;
	        }

	    },

	    shiftPic: function (setup, e) {

	        e.halt();
	        var obj = this,
                img = Y.one('#xxx-image-pic'),
                imgParent = img.get('parentNode'),
                text = Y.one('#xxx-image-desc-text'),
                arr = setup.srcArr, cn = setup.cName, key = setup.key;

	        img.setStyle('visibility', 'hidden');
	        if (text) text.setStyle('visibility', 'hidden');

	        switch (key) {

	            case 'fwd': obj.currentIndex[cn]++
	                break;
	            case 'back': obj.currentIndex[cn]--
	                break;

	        }

	        obj.toggleArrowsStatus(obj.currentIndex[cn], cn, arr);

	        img.purge(false); //remove all events from el

	        Y.on('load', function () {

	            obj.resizeZoomImage(img, arr[obj.currentIndex[cn]][1]);

	            if (text) {
	                text.set('innerHTML', arr[obj.currentIndex[cn]][2]);
	                text.setStyle('visibility', 'visible');
	            }

	        }, img)


	        img.set('src', arr[obj.currentIndex[cn]][1] + '?' + Math.random());

	    },

	    resizeZoomImage: function (img, newSrc) {

	        var obj = this,
                clientWidth = document.documentElement.clientWidth - 108,
                clientHeight = document.documentElement.clientHeight - 108,
                coeff = 1, iw, ih, tempImg = Y.one('#xxx-tmp-image');

	        img.setStyle('visibility', 'hidden');

	        Y.on('load', function () {

	            iw = tempImg.get('offsetWidth');
	            ih = tempImg.get('offsetHeight');
	            if (iw > clientWidth) {

	                ih = ih * clientWidth / iw;
	                iw = clientWidth;
	            }
	            if (ih > clientHeight) {

	                iw = iw * clientHeight / ih;
	                ih = clientHeight;
	            }

	            img.setStyle('width', iw.toFixed());
	            img.setStyle('height', ih.toFixed());

	            img.get('parentNode').setStyle('width', iw.toFixed());
	            img.setStyle('visibility', 'visible');
	            zoomLoading.hide('done');
	            obj.centerZoomImageContainer(img.get('parentNode'));

	            tempImg.set('src', Math.random());

	            if (Y.one('#xxx-image-left-side') && Y.one('#xxx-image-right-side')) {

	                var lside = Y.one('#xxx-image-left-side'),
				        rside = Y.one('#xxx-image-right-side');

	                lside.setStyle('width', Math.floor(iw.toFixed() / 2));
	                lside.setStyle('height', ih.toFixed());

	                rside.setStyle('width', Math.floor(iw.toFixed() / 2));
	                rside.setStyle('height', ih.toFixed());

	            }

	        }, tempImg)



	        tempImg.set('src', newSrc + '?' + Math.random()); //+'&cash='+Math.random();

	    },

	    centerZoomImageContainer: function (div) {

	        var body = document.getElementsByTagName('body')[0],
		        html = document.documentElement,
		        scrollHeightFix, scrollWidthFix;

	        div.setStyle('visibility', 'hidden');
	        div.setStyle('display', '');
	        scrollHeightFix = (Y.UA.webkit) ? body.scrollTop : html.scrollTop;
	        scrollWidthFix = (Y.UA.webkit) ? body.scrollLeft : html.scrollLeft;
	        var top = Math.round((html.clientHeight - div.get('offsetHeight')) / 2) + scrollHeightFix;
	        var left = Math.round((html.clientWidth - div.get('offsetWidth')) / 2) + scrollWidthFix;

	        div.setStyle('left', left);
	        div.setStyle('top', top);
	        div.setStyle('visibility', 'visible');

	    }

	}

}, '0.0.1' /* module version */, {
    requires: ['node', 'yui', 'event-key', '_utils']
});