/// <reference name="MicrosoftAjax.js"/>
function getNumericStyle(strStyle) {
    var pos = strStyle.indexOf("px");
    if (pos > -1) {
        var num = Number.parseInvariant(strStyle.substr(0, pos));
        return num;
    }
    return -1;
}
function getWindowDimensions() {
    var size = new Object();
    var winWidth, winHeight, d = document;
    if (typeof window.innerWidth != 'undefined') {
        winWidth = window.innerWidth;
        winHeight = window.innerHeight;
    } else {
        if (d.documentElement &&
   typeof d.documentElement.clientWidth != 'undefined' &&
    d.documentElement.clientWidth != 0) {
            winWidth = d.documentElement.clientWidth
            winHeight = d.documentElement.clientHeight
        } else {
            if (d.body &&
    typeof d.body.clientWidth != 'undefined') {
                winWidth = d.body.clientWidth
                winHeight = d.body.clientHeight
            }
        }
    }
    size.width = winWidth;
    size.height = winHeight;
    return size;
}

Type.registerNamespace("VoxWeb.Web");

VoxWeb.Web.ScrollView = function(element) {
    VoxWeb.Web.ScrollView.initializeBase(this, [element]);
    this._scrollLeftHandler = null;
    this._scrollRightHandler = null;
    this._resizeHandler = null;
    this._images = null;
    this._currentimg = null;
    this._totalImgWidth = 0;

    this._direction = null;
    this._normalImageWidth = null;
    this._timerID;
    this._animatedImage;

    this._leftButton = null;
    this._rightButton = null;
    this._rightEnabled = null;
    this._rightDisabled = null;
    this._leftEnabled = null;
    this._leftDisabled = null;

    this._phones = null;
    this._phoneClickHandler = null;
    this._isShowing = false;

    this._FullScreenId = "FullScreenBlock";
    this._FullScreenMsg = "FullScreenMessage";

    this._imagesDisplayed = 3;
}

VoxWeb.Web.ScrollView.prototype = {
    initialize: function() {
        VoxWeb.Web.ScrollView.callBaseMethod(this, 'initialize');
        this._currentimg = 0;

        //attach events
        this._scrollLeftHandler = Function.createDelegate(this, this._scrollLeft);
        this._scrollRightHandler = Function.createDelegate(this, this._scrollRight);
        //this._phoneClickHandler = Function.createDelegate(this, this._showImage)
        this._resizeHandler = Function.createDelegate(this, this._resize);

        $addHandler($get(this._leftButton), 'click', this._scrollRightHandler);
        $addHandler($get(this._rightButton), 'click', this._scrollLeftHandler);
        $addHandler(window, 'resize', this._resizeHandler);

        this._images = this.get_element().getElementsByTagName("DIV");

//        for (var i = 0; i < this._images.length; i++) {
//            var image = this._images[i].getElementsByTagName("IMG");
//            if (image) {
//                image[0].phoneId = i;
//                $addHandler(image[0], 'click', this._phoneClickHandler);
//            }
//        }
        this._phones = Sys.Serialization.JavaScriptSerializer.deserialize(this._phones);

        //set button states
        this._setLeftButtonState(0);
        this._setRightButtonState(1);

        //set object reference to window to allow animate to access it
        window.GliderObjectRef = this;
    },
    dispose: function() {
        //clean up locals
        $removeHandler($get(this._leftButton), 'click', this._scrollRightHandler);
        $removeHandler($get(this._rightButton), 'click', this._scrollLeftHandler);
        $removeHandler(window, 'resize', this._resizeHandler);
//        if (this._images) {
//            for (var i = 0; i < this._images.length; i++) {
//                var image = this._images[i].getElementsByTagName("IMG");
//                if (image) {
//                    $removeHandler(image[0], 'click', this._phoneClickHandler);
//                }
//            }
//        }

        window.GliderObjectRef = null;

        // dispose the base class
        VoxWeb.Web.ScrollView.callBaseMethod(this, 'dispose');
    },

    _close: function() {
        this._isShowing = false;
        var b = $get(window.GliderObjectRef._FullScreenId);
        var m = $get(window.GliderObjectRef._FullScreenMsg);
        if (b) {
            document.body.removeChild(b);
        }
        if (m) {
            document.body.removeChild(m);
        }
    },

    _resize: function() {
        if (this._isShowing) {
            var b = $get(this._FullScreenId);
            var m = $get(this._FullScreenMsg);
            if (b) {
                b.style.width = "100%";
                //b.style.height = "100%";
                b.style.height = getWindowDimensions().height * 2 + "px";
            }
            if (m) {
                m.style.left = (document.body.clientWidth / 2) - (m.clientWidth / 2) + "px";
                m.style.top = (getWindowDimensions().height / 2) - getNumericStyle(m.style.height) / 2 + "px";
            }
        }
    },

    _hover: function(e) {
        try {
            if (e == undefined) {
                e = window.event;
            }
            if (e == undefined) {
                return;
            }
            e.srcElement.style.backgroundImage = "url(/Images/common/close_hvr.png)";
        } catch (ex) {  }
    },

    _nohover: function(e) {
        try {
            if (e == undefined) {
                e = window.event;
            }
            if (e == undefined) {
                return;
            }
            e.srcElement.style.backgroundImage = "url(/Images/common/close_btn.png)";
        } catch (ex) {  }
    },

    _showImage: function(args) {
        var i = args.target.phoneId;
        if (i !== undefined) {
            var phone = document.createElement('div');
            phone.id = this._FullScreenMsg;
            phone.className = "FullScreenMessage";

            //close button
            var closeButton = document.createElement('a');
            closeButton.id = "btnClose";
            closeButton.className = "btnClose";
            closeButton.appendChild(document.createTextNode("close"));
            closeButton.onclick = this._close;
            closeButton.onmouseover = this._hover;
            closeButton.onmouseout = this._nohover;
            phone.appendChild(closeButton);

            //phone name
            var closeHead = document.createElement('h3');
            closeHead.innerHTML = this._phones[i].name;
            phone.appendChild(closeHead);

            //phone image
            var image = document.createElement('img');
            image.src = "../images/download/phones/phone_" + this._phones[i].id + ".jpg"
            image.width = "230";
            image.height = "358";
            image.id = "phoneDisplayImage";
            phone.appendChild(image);

            //copy area
            var copy = document.createElement('div');
            copy.id = "phoneDisplayCopy";
            //            var instruct = document.createElement('h5');
            //            instruct.appendChild(document.createTextNode('If this is your phone:'));
            //            copy.appendChild(instruct);

            //            //download button
            //            var download = document.createElement('a');
            //            download.appendChild(document.createTextNode('Download Microsoft Recite'));
            //            download.id = "btnDownload";
            //            download.href = "download.aspx";
            //            copy.appendChild(download);

            //no match copy
            var nomatch = document.createElement('span');
            nomatch.appendChild(document.createTextNode("If this is not your phone, "));
            var nomatchLink = document.createElement('a');
            nomatchLink.href = "#";
            nomatchLink.id = "phoneDisplayCloseAlt";
            nomatchLink.onclick = this._close;
            nomatchLink.appendChild(document.createTextNode("search again."));
            nomatch.appendChild(nomatchLink);
            copy.appendChild(nomatch);

            phone.appendChild(copy);

            var fullScreenBlock = document.createElement("DIV");
            fullScreenBlock.id = this._FullScreenId;
            fullScreenBlock.className = "FullScreenBlock";
            document.body.appendChild(fullScreenBlock);
            phone.style.height = "460px";
            document.body.appendChild(phone);
            this._isShowing = true;
            this._resize();
        }
        args.stopPropagation();
    },

    _scrollLeft: function() {
        this._direction = 0;
        if (this._timerID != undefined) {
            window.clearInterval(this._timerID);
        }
        if (this._currentimg < this._images.length - this._imagesDisplayed) {
            this._setLeftButtonState(1);
            this._animatedImage = this._images[this._currentimg];
            this._normalImageWidth = this._animatedImage.clientWidth;
            this._timerID = window.setInterval(this._animate, 10);
            this._currentimg++;
            if (this._currentimg == this._images.length - this._imagesDisplayed) {
                this._setRightButtonState(0);
            }
        } else {
            this._setRightButtonState(0);
        }
    },

    _scrollRight: function() {
        this._direction = 1;
        if (this._timerID != undefined) {
            window.clearInterval(this._timerID);
        }
        if (this._currentimg > 0) {
            this._setRightButtonState(1);
            this._normalImageWidth = this._images[this._currentimg].clientWidth;
            this._currentimg--;
            if (this._currentimg == 0) {
                this._setLeftButtonState(0);
            }
            this._animatedImage = this._images[this._currentimg];
            this._timerID = window.setInterval(this._animate, 10);
        } else {
            this._setLeftButtonState(0);
        }
    }
    ,

    _animate: function() {
        if (window.GliderObjectRef._direction == 0) {
//            if (window.GliderObjectRef._normalImageWidth > 0) {
//                window.GliderObjectRef._animatedImage.style.width = window.GliderObjectRef._normalImageWidth + "px";
//                window.GliderObjectRef._normalImageWidth -= 10;
//            } else {
                window.GliderObjectRef._animatedImage.style.display = "none";
                window.clearInterval(window.GliderObjectRef._timerID);
//            }
        } else if (window.GliderObjectRef._direction == 1) {
            var strWidth = window.GliderObjectRef._animatedImage.style.width;
            var currWidth = getNumericStyle(strWidth);
            window.GliderObjectRef._animatedImage.style.display = "";

//            if (currWidth < window.GliderObjectRef._normalImageWidth) {
//                var diff = window.GliderObjectRef._normalImageWidth - currWidth;
//                if (diff > 10) {
//                    currWidth += 10;
//                } else {
//                    currWidth += diff;
//                }
//                window.GliderObjectRef._animatedImage.style.width = currWidth + "px";
//            } else {
                window.clearInterval(window.GliderObjectRef._timerID);
//            }
        }
    },

    _setLeftButtonState: function(state) {
        if (state == 0) {
            //disbaled
            $get(this._leftButton).src = this._leftDisabled;
        } else {
            //enabled
            $get(this._leftButton).src = this._leftEnabled;
        }
    },
    _setRightButtonState: function(state) {
        if (state == 0) {
            //disbaled
            $get(this._rightButton).src = this._rightDisabled;
        } else {
            //enabled
            $get(this._rightButton).src = this._rightEnabled;
        }
    }

}
VoxWeb.Web.ScrollView.registerClass('VoxWeb.Web.ScrollView', Sys.UI.Control);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();