//var urlPrefix = 'http://property.marketingbirmingham.tractivity.co.uk';

var imf = function() {
    /* //////////// ==== private methods ==== //////////// */
    var lf = 0;
    var instances = [];
    /* ===== read file ==== */
    var AJAX = (function(AJAX) {
        return function(url) {
            var ajax = AJAX();

            ajax.open("GET", url, false);
            ajax.send("");
            return ajax;
        };
    })(this.XMLHttpRequest ?
		function() { return new XMLHttpRequest; } :
		function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
	);

    /* ===== custom getElementsByClass ==== */
    function getElementsByClass(object, tag, className) {
        var o = object.getElementsByTagName(tag);
        for (var i = 0, n = o.length, ret = []; i < n; i++)
            if (o[i].className == className) ret.push(o[i]);
        if (ret.length == 1) ret = ret[0];
        return ret;
    }
    /* ===== crossbrowsers addEvent ==== */
    function addEvent(o, e, f) {
        if (window.addEventListener) o.addEventListener(e, f, false);
        else if (window.attachEvent) r = o.attachEvent('on' + e, f);
    }
    /* ===== create image reflexion ==== */
    function createReflexion(cont, img) {
        var flx = false;
        if (document.createElement("canvas").getContext) {
            /* ---- canvas ---- */
            flx = document.createElement("canvas");
            flx.width = img.width;
            flx.height = img.height;
            var context = flx.getContext("2d");
            context.translate(0, img.height);
            context.scale(1, -1);
            context.drawImage(img, 0, 0, img.width, img.height);
            flx.style.opacity = '0.35';
        } else {
            /* ---- DXImageTransform ---- */
            flx = document.createElement('img');
            flx.src = img.src;
            flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
			                   'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
							   (img.height * .25) + ')';
        }
        /* ---- insert Reflexion ---- */
        flx.style.position = 'absolute';
        flx.style.left = '-4000px';
        cont.appendChild(flx);
        return flx;
    }
    /* //////////// ==== ImageFlow Constructor ==== //////////// */
    function ImageFlow(oCont, xmlfile, horizon, size, zoom, border, start, interval) {
        this.diapos = [];
        this.scr = false;
        this.size = size;
        this.zoom = zoom;
        this.horizon = horizon;
        this.bdw = border;
        this.oCont = oCont;
        this.oc = document.getElementById(oCont);
        this.oc2 = document.getElementById(oCont + '2');

        this.text = getElementsByClass(this.oc2, 'div', 'text');
        this.title = getElementsByClass(this.text, 'div', 'title');
        this.legend = getElementsByClass(this.text, 'div', 'legend');        
        this.arL = getElementsByClass(this.oc2, 'img', 'arrow-left');
        this.arR = getElementsByClass(this.oc2, 'img', 'arrow-right');
        this.thickbox = document.getElementById('tblink');

        this.alw = this.arL.width - 5;
        this.arw = this.arR.width - 5;        
        this.arL.parent = this.arR.parent = this;
        this.view = this.back = -1;
        this.time_start = start * 62.5 || 0;
        this.time_inter = interval * 62.5 || 0;
        this.time_out = this.time_start;
        this.time = 0;
        this.time_dir = 1;
        this.resize();
        this.oc.onselectstart = function() { return false; }

        /* ---- parse xml ---- */
        if (AJAX(xmlfile).responseXML.getElementsByTagName("bank").item(0) != null) {
            var bank = AJAX(xmlfile).responseXML.getElementsByTagName("bank").item(0).getElementsByTagName("img");

            this.NF = bank.length;
            for (var i = 0; i < this.NF; i++) {
                var img = bank.item(i);
                var val = function(tag) {
                    var t = img.getElementsByTagName(tag);
                    return (t.length && t[0].firstChild) ? t[0].firstChild.nodeValue : '';
                }
                /* ---- create images ---- */
                this.diapos[i] = new Diapo(this, i, val("src"), val("title"), val("caption"), val("link"), val("target") || '_self', val("propertyID"));
            }


            /* ==== right arrow ==== */
            this.arR.onclick = this.arR.ondblclick = function() {
                if (this.parent.view < this.parent.NF - 1)
                    this.parent.calc(1);
            }
            /* ==== Left arrow ==== */
            this.arL.onclick = this.arL.ondblclick = function() {
                if (this.parent.view > 0)
                    this.parent.calc(-1);
            }
        }
    }
    /* //////////// ==== ImageFlow prototype ==== //////////// */
    ImageFlow.prototype = {
        /* ==== targets ==== */
        calc: function(inc) {
            if (inc) {
                this.view += inc;
                /* ---- stop autoscroll ---- */
                this.time = 0;
                this.time_out = this.time_start;
            }
            var tw = 0;
            var lw = 0;
            var o = this.diapos[this.view];

            if (o && o.loaded) {
                /* ---- reset ---- */
                var ob = this.diapos[this.back];
                if (ob && ob != o) {
                    ob.img.className = 'diapo';
                    ob.z1 = 1;
                }
                /* ---- update legend ---- */
                this.title.innerHTML = o.title;                
                this.thickbox.href = o.link.replace('{0}', o.pID).replace('{1}', o.title);
                
                /* ---- update hyperlink ---- */
                if (o.url) {
                    o.img.className = 'diapo link';
                    window.status = 'hyperlink: ' + o.url;
                } else {
                    o.img.className = 'diapo';
                    window.status = '';
                }
                /* ---- calculate target sizes & positions ---- */
                if (o.r < 1) o.w1 = Math.min(o.iw, this.wh * .8, Math.round(this.ht * this.horizon / o.r)) * o.z1;
                else o.w1 = Math.round(this.ht * this.horizon / o.r) * o.z1;
                var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
                var x = x0 + o.w1 + this.bdw;
                for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
                    if (o.loaded) {
                        o.x1 = x;
                        o.w1 = (this.ht / o.r) * this.size;
                        x += o.w1 + this.bdw;
                        tw += o.w1 + this.bdw;
                    }
                }
                x = x0 - this.bdw;
                for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
                    if (o.loaded) {
                        o.w1 = (this.ht / o.r) * this.size;
                        o.x1 = x - o.w1;
                        x -= o.w1 + this.bdw;
                        tw += o.w1 + this.bdw;
                        lw += o.w1 + this.bdw;
                    }
                }

                /* ---- save preview view ---- */
                this.back = this.view;
            }
        },
        /* ==== mousewheel scrolling ==== */
        scroll: function(sc) {
            if (sc < 0) {
                if (this.view < this.NF - 1) this.calc(1);
            } else {
                if (this.view > 0) this.calc(-1);
            }
        },
        /* ==== resize  ==== */
        resize: function() {
            this.wh = this.oc.clientWidth;
            this.ht = this.oc.clientHeight;

            if (this.wh < 600)
                this.wh = 600;

            if (this.ht < 200);
            this.ht = 200;

            this.calc();
            this.run(true);
        },
        /* ==== animation loop ==== */
        run: function(res) {
            /* ---- move all images ---- */
            var i = this.NF;
            while (i--) this.diapos[i].move(res);
            /* ---- autoscroll ---- */
            if (this.time_out) {
                this.time++;
                if (this.time > this.time_out) {
                    this.view += this.time_dir;
                    if (this.view >= this.NF || this.view < 0) {
                        this.time_dir = -this.time_dir;
                        this.view += this.time_dir * 2;
                    }
                    this.calc();
                    this.time = 0;
                    this.time_out = this.time_inter;
                }
            }
        }
    }
    /* //////////// ==== Diapo Constructor ==== //////////// */
    Diapo = function(parent, N, src, title, text, url, target, pID) {
        this.parent = parent;
        this.loaded = false;
        this.title = title;
        this.text = text;

        this.anchor = document.createElement('a');
        //alert(anchor);

        this.url = url;
        this.target = target;
        this.N = N;
        this.img = document.createElement('img');
        this.img.src = src;
        this.img.parent = this;
        this.img.setAttribute('alt', title);
        this.img.setAttribute('title', title);
        this.img.className = 'diapo';
        this.x0 = this.parent.oc.clientWidth;
        this.x1 = this.x0;
        this.w0 = 0;
        this.w1 = 0;
        this.z1 = 1;
        this.z2 = 0;

        if (this.x0 < 600)
            this.x0 = 600;

        this.anchor.parent = this;

        if (pID > 0) {
            this.anchor.setAttribute('href', urlPrefix + '/PropertyDetails.aspx?PropertyID=' + pID);            
        }

        this.anchor.setAttribute('title', title);
        this.anchor.appendChild(this.img);
        this.parent.oc.appendChild(this.anchor);
        this.img.parent = this;

        this.link = urlPrefix + "/PropertyDetails.aspx?PropertyID={0}";
        this.pID = pID;

        /* ---- display external link ---- */
        if (url) {
            this.img.onmouseover = function() { this.className = 'diapo link'; }
            this.img.onmouseout = function() { this.className = 'diapo'; }
        }
    }
    /* //////////// ==== Diapo prototype ==== //////////// */
    Diapo.prototype = {
        /* ==== HTML rendering ==== */
        move: function(res) {
            var that = this.parent;
            if (this.loaded) {
                var sx = this.x1 - this.x0;
                var sw = this.w1 - this.w0;
                if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
                    /* ---- paint only when moving ---- */
                    this.x0 += sx * .1;
                    this.w0 += sw * .1;
                    var h = this.w0 * this.r;
                    this.z2 = (that.ht * that.horizon + 1 - this.z2 - h) * .5;
                    if (this.x0 < that.wh && this.x0 + this.w0 > 0) {
                        /* ---- paint only visible images ---- */
                        this.visible = true;
                        var o = this.img.style;
                        /* ---- diapo ---- */
                        o.left = Math.round(this.x0) + 'px';
                        o.bottom = Math.floor(that.ht * (1 - that.horizon) + this.z2) + 'px';
                        o.width = Math.round(this.w0) + 'px';
                        o.height = Math.floor(h) + 'px';
                        /* ---- reflexion ---- */

                        if (this.flx) {
                            var o = this.flx.style;
                            o.left = Math.round(this.x0) + 'px';
                            o.top = Math.ceil(that.ht * that.horizon + 1 - this.z2) + 'px';
                            o.width = Math.round(this.w0) + 'px';
                            o.height = Math.floor(h) + 'px';
                        }
                    } else {
                        /* ---- disable invisible images ---- */
                        if (this.visible) {
                            this.visible = false;
                            this.img.style.width = '0px';
                            if (this.flx) this.flx.style.width = '0px';
                        }
                    }
                }
            } else {
                /* ==== image onload ==== */
                if (this.img.complete && this.img.width) {
                    /* ---- get size image ---- */
                    this.iw = this.img.width;
                    this.ih = this.img.height;
                    this.r = this.ih / this.iw;
                    this.loaded = true;
                    /* ---- create reflexion ---- */
                    this.flx = createReflexion(that.oc, this.img);
                    if (that.view < 0) that.view = this.N;
                    else if (this.N == 0) that.view = this.N;
                    that.calc();
                }
            }
        }
    }
    /* //////////// ==== public methods ==== //////////// */
    return {
        /* ==== initialize script ==== */
        create: function(div, xmlfile, horizon, size, zoom, border, start, interval) {
            /* ---- instanciate imageFlow ---- */
            var load = function() {
                var loaded = false;
                var i = instances.length;
                //while (i--) if (instances[i].oCont == div) loaded = true;
                if (!loaded) {
                    /* ---- push new imageFlow instance ---- */
                    instances.push(
						new ImageFlow(div, xmlfile, horizon, size, zoom, border, start, interval)
					);
                    /* ---- init script (once) ---- */
                    if (!imf.initialized) {
                        imf.initialized = true;
                        /* ---- window resize event ---- */
                        addEvent(window, 'resize', function() {
                            var i = instances.length;
                            while (i--) instances[i].resize();
                        });

                        /* ---- set interval loop ---- */
                        setInterval(function() {
                            var i = instances.length;
                            while (i--) instances[i].run();
                        }, 16);
                    }
                }
            }
            /* ---- window onload event ---- */
            //load();
            var amIAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
            if (amIAsyncPostback) { load(); }
            else { addEvent(window, 'load', function() { load(); }); };
        }
    }
} ();

/* ==== create imageFlow ==== */
//          div ID, imagesbank, horizon, size, zoom, border, autoscroll_start, autoscroll_interval
//imf.create("imageFlow", '/Controls/Gallery/GetImageXml.ashx', 0.75, 0.15, 1.8, 10, 8, 4);