;(function(root, $, undefined){
    
    var Hotspot = function(owner, image, content, type, position) {
        
        // private mappings
        var sizes = [
            {
                width: 200,
                height: 200
            },
            {
                width: 200,
                height: 200
            }
        ];
        
        // public variables
        this.setOwner(owner);
        this.type = type || Hotspot.enums.type.text;
        this.position = position || {x: "250px", y: "250px"};
        this.size = sizes[type];
        this.image = image;
        this.content = content;
        this._cache = null;
        this.$ = $(this);
        this._createHTML();
        this.isOverlayVisible = false;
        this.hasOverlayContentLoaded = false;
        
        var self = this;
        
        $(window).resize($.throttle(50, function(){
        
            if(self.isOverlayVisible) {
                
                if (self.hasOverlayContentLoaded) {
                    self._overlay.css({
                        left: "50%",
                        top: "50%",
                        marginLeft: -(parseInt(self._overlay.outerWidth() / 2, 10)),
                        marginTop: -(parseInt(self._overlay.outerHeight(), 10) / 2),
                        position:"fixed"
                    });
                } else {
                    self._overlay.css({
                        left: "50%",
                        top: "50%",
                        marginLeft: -(parseInt(self._overlay.outerWidth(), 10)),
                        marginTop: -(parseInt(self._overlay.outerHeight(), 10) / 2),
                        position: "fixed"
                    });
                }

            }
            
        }));
        
    };
    
    Hotspot.prototype = {
        
        setOwner: function(owner){
            this._owner = owner.jquery ? owner : $(owner);
        },
        
        _createHTML: function() {
            
            var _this = this;
            
            var container = $("<div/>", {
                "class": "hotspot",
                css: {
                    left: this.position.x,
                    top: this.position.y
                },
                click: function() {
                    if(!_this.isOverlayVisible) {
                        _this.showOverlay();
                    }
                }
            });
            
            var image = $("<img/>", {
                "class": "hotspotImage",
                src: this.image
            });
            
            var overlay = $("<div/>", {
                "class": "hotspotOverlay" + " " + function(typeVal){ 
                    var type = Hotspot.enums.type;
                    for(var i in type)
                        if(type[i] === typeVal)
                            return i;
                }(this.type)
            });
            
            var closeButton = $("<div/>", {
                "class": "close",
                css: {
                    position: "absolute",
                    right: "41px",
                    top: "61px",
                    display:"none"
                },
                data: {"olddisplay": "block"},
                click: function() {
                    if(_this.isOverlayVisible) {
                        _this.hideOverlay();
                    }
                    return false;
                }
            });
            
            this.ui = {};
            this.ui.closeButton = closeButton;
            this._overlay = overlay;
            this._image = image;
            this.html = container;
            
            overlay.append(
                $("<div/>", {"class": "productWrapper first"}),
                $("<div/>", {"class": "productLoader"}),
                $("<div/>", {"class": "productWrapper last"})
            );
            
            overlay.append(closeButton);
            
            container.append(image, overlay);
            
        },
        
        show: function(isInternal) {
            
            if($.browser.msie) {
                this._image.show();
            } else {
                this._image.fadeIn();
            }

            !!!isInternal && B.controller && B.controller.stopTimer();

            !!!isInternal && B.controller && console.log("stopped!");

        },
        
        hide: function() {
    
            if($.browser.msie) {
                this._image.hide();
            } else {
                this._image.fadeOut();
            }
            
        },
        
        completeHide: function() {
            
            if($.browser.msie) {
                this._image.hide();
                this._overlay.hide();
            } else {
                this._image.fadeOut();
                this._overlay.fadeOut();
            }
            
            this.isOverlayVisible = false;
            
        },
        
        _retrieveContent: function() {
            
            if(this.type === Hotspot.enums.type.text) {
                
                return this.content;
            
            } else if (this.type === Hotspot.enums.type.products) {
                
                return this._getProducts();
                
            }
            
        },
        
        _getProducts: function() {
                
                var restClient = new restlikeApi("service", "http://shop.blutsgeschwister.de/maria/www/", "Unknown Exception while retrieval of Products.", 20000);

                var self = this;
		
                restClient.call("getProducts", {'products': self.content}, function(data) {
                    
                    self.hasOverlayContentLoaded = true;
                                     
                    var container = $("<div/>", {
                        "class": "products"
                    });
                                       
                    var i = -1;
                    var len = data.length;
                    var item;
                    while(++i < len) {
                        item = data[i];              
                        container.append($("<a>", {"class":"productWrapper", href: item.link, target: "_blank"}).append($("<div/>", {
                                "class": "product"
                            }).append(
                                $("<img/>", {
                                    src: item.picture
                                }),
                                $("<img/>", {
                                    src: "/mariaWp-content/themes/blutsgeschwister/assets/img/productShadow.png" 
                                }),
                                $("<span/>", {
                                    html: item.name,
                                    css: {
                                        marginTop: "240px"
                                    }
                                }),
                                $("<span/>", {
                                    html: item.color
                                })
                            )
                        ));
                        
                    }
                    
                    container.children()
                        .first()
                            .addClass("first")
                        .end()
                        .last()
                            .addClass("last");
                    
                    if($.browser.msie) {
	
                        self._overlay.hide();
                        self._overlay.css({
                            "display":"inline-block",
                            "width": "auto"
                        });
                            
                            
						self._overlay.children(":not(.close)").remove();
						self._overlay.prepend(container);
                            
						$(window).trigger("resize");
                            
						if($.browser.msie) {
							self._overlay.show();
							self.ui.closeButton.show();
						} else {
							self._overlay.fadeIn();
							self.ui.closeButton.fadeIn();
						}
                            
						self._owner.trigger("hotspotOverlayShow");
						$(window).trigger("resize");
                    
					} else {
						
						self._overlay.fadeOut(500, function(){
                        
							self._overlay.css({
							    "display":"inline-block",
							    "width": "auto"
							});


							self._overlay.children(":not(.close)").remove();
							self._overlay.prepend(container);

							$(window).trigger("resize");

							if($.browser.msie) {
							    self._overlay.show();
							    self.ui.closeButton.show();
							} else {
							    self._overlay.fadeIn();
							    self.ui.closeButton.fadeIn();
							}

							self._owner.trigger("hotspotOverlayShow");
							$(window).trigger("resize");
                        
                        });
                    }
                    
                    
                }, null);
            
        },
        
        showOverlay: function() {
            
            B.controller.stopTimer();
            $(window).trigger("resize");
            
            if($.browser.msie) {
                this._overlay.show();
            } else {
                this._overlay.fadeTo(500, 1);    
            }
            
            
            if(!this.hasOverlayContentLoaded) {
                this._retrieveContent();
            }
            
            this.isOverlayVisible = true;
            this._owner.trigger("hotspotOverlayShow");
            $(window).trigger("resize");
            
        },
        
        hideOverlay: function() {
            
            this.show(true);
            
            if($.browser.msie) {
                this._overlay.hide();
            } else {
                this._overlay.fadeOut();
            }
            
            this.isOverlayVisible = false;
            this._owner.trigger("hotspotOverlayHide");
            
        }
        
    };
    
    Hotspot.enums = {
        
        type: {
            text: 0,
            products: 1
        }
        
    };
    
    // Add Class to Application Scope.
    root.B.Hotspot = Hotspot;
    
})(this, jQuery);