var UltimateSlideDeckDemo;
(function($){
    UltimateSlideDeckDemo = {
        visible: false,
        namespace: 'ultimate-slidedeck-demo',
        url: "",
        skin: "light",
        navigation: "simple-dots",
        
        maskShow: function(){
            var self = this;
            
            if(!document.getElementById(this.elements.mask_id)){
                var mask = document.createElement('DIV');
                    mask.id = this.elements.mask_id
                document.body.appendChild(mask);
                this.mask = $('#' + this.elements.mask_id);
            }
            
            this.mask.fadeIn(500, function(){
                $('#' + self.elements.container_id).fadeIn(500);
            });
        },
        
        maskHide: function(){
            this.mask.hide();
        },
        
        showLoading: function(){
            $(this.elements.loading).fadeIn(350);
        },
        hideLoading: function(){
            $(this.elements.loading).fadeOut(500);
        },
        
        openDemo: function(url){
            this.visible = true;
            this.maskShow();
            this.updateDemo(url);
            
            $(this.elements.popularButtons).removeClass('active').each(function(){
                if(url.match(/url=([a-zA-Z0-9\-\_\{\}\(\)\.\+\%\/\:\#]+)/)[1] == this.href.match(/url=([a-zA-Z0-9\-\_\{\}\(\)\.\+\%\/\:\#]+)/)[1]){
                    $(this).addClass('active');
                }
            });
        },
        
        hideDemo: function(){
            this.visible = false;
            var url_field = document.getElementById(this.elements.url_id);
            url_field.value = url_field.defaultValue; 
            this.maskHide();
            this.hideLoading();
            $('#' + this.elements.container_id).hide();
        },
        
        updateDemo: function(url){
            var self = this,
                valid = false;
            
            var url_parts = url.split('?')[1].split('&');
            var this_url_parts = {
                skin: this.skin,
                navigation: this.navigation
            };
            for(var k in url_parts){
                var param = url_parts[k].split('=');
                switch(param[0]){
                    case "url":
                        this_url_parts.url = param[1];
                    break;
                    case "skin":
                        this_url_parts.skin = param[1];
                    break;
                    case "navigation":
                        this_url_parts.navigation = param[1];
                    break
                }
            }
            
            for(var k in this_url_parts){
                if(this_url_parts[k] != this[k]){
                    valid = true;
                }
            }
            
            if(valid === true){
                this.showLoading();
            
                for(var k in this_url_parts){
                    this[k] = this_url_parts[k];
                }
                
                // Update form skin and navigation values
                document.getElementById(this.elements.skin_field_id).value = this.skin;
                document.getElementById(this.elements.navigation_field_id).value = this.navigation;
                
                // Update "Popular Blog Feeds" button skin and navigation values
                $(this.elements.popularButtons).each(function(){
                    this.href = this.href.replace(/skin=[a-zA-Z0-9\-]+/, 'skin=' + self.skin);
                    this.href = this.href.replace(/navigation=[a-zA-Z0-9\-]+/, 'navigation=' + self.navigation);
                });
                
                $(this.elements.optionButtons).removeClass('active').each(function(){
                    this.href = this.href.replace(/url\=[a-zA-Z0-9\-\_\{\}\(\)\.\+\%\/\:\#]*/, 'url=' + self.url);
                    if($(this).hasClass('skin')){
                        if($(this).hasClass(self.skin)){
                            $(this).addClass('active');
                        }
                        this.href = this.href.replace(/navigation=[a-zA-Z0-9\-]+/, 'navigation=' + self.navigation);
                    }
                    if($(this).hasClass('navigation')){
                        if($(this).hasClass(self.navigation)){
                            $(this).addClass('active');
                        }
                        this.href = this.href.replace(/skin=[a-zA-Z0-9\-]+/, 'skin=' + self.skin);
                    }
                });
                
                document.getElementById(this.elements.iframe_id).src = url;
            }
        },
        
        initialize: function(){
            var self = this;

            this.elements = {
                buttons: 'a.button.' + this.namespace,
                form: '.feeds-' + this.namespace + ' form',
                loading: '.loading-' + this.namespace,
                popularButtons: '.popular-feeds-' + this.namespace + ' a.button',
                optionButtons: '.options-' + this.namespace + ' a.button',
                container_id: this.namespace,
                iframe_id: 'content-' + this.namespace,
                url_id: 'url-field-' + this.namespace,
                skin_field_id: 'skin-field-' + this.namespace,
                navigation_field_id: 'navigation-field-' + this.namespace,
                mask_id: 'mask-' + this.namespace
            };
            
            $(document).ready(function(){
                // Bind click event to demo launch buttons
                $(self.elements.buttons).bind('click.' + self.namespace, function(event){
                    event.preventDefault();
                    
                    self.openDemo(this.href);
                });
                
                // Bind click event to close button in demo lightbox
                $('#' + self.elements.container_id + " a.close-" + self.namespace).bind('click.' + self.namespace, function(event){
                    event.preventDefault();
                    
                    self.hideDemo();
                });
                
                // Bind submit event to update the demo
                $(self.elements.form).bind('submit.' + self.namespace, function(event){
                    event.preventDefault();
                    var params = $(this).serialize();
                    var url_field = document.getElementById(self.elements.url_id);
                    
                    $(self.elements.popularButtons).removeClass('active');
                    
                    if(url_field.value != url_field.defaultValue){
                        self.updateDemo($(this).attr('action') + "?" + params);
                    }
                });
                
                // Bind click event to "Popular Blog Feeds" buttons 
                $(self.elements.popularButtons).bind('click.' + self.namespace, function(event){
                    event.preventDefault();
                    
                    $(self.elements.popularButtons).removeClass('active');
                    $(this).addClass('active');
                    
                    self.updateDemo(this.href);
                });
                
                // Bind click event to "Popular Blog Feeds" buttons 
                $(self.elements.optionButtons).bind('click.' + self.namespace, function(event){
                    event.preventDefault();
                    
                    $(this).siblings().removeClass('active');
                    $(this).addClass('active');
                    
                    self.updateDemo(this.href);
                });
                
                // Bind text field default value auto replace for "Custom RSS Feed" form
                $(self.elements.form + ' input[type="text"]').bind('focus.' + self.namespace, function(event){
                    if(this.value == this.defaultValue){
                        this.value = "";
                    }
                }).bind('blur.' + self.namespace, function(event){
                    if($.trim(this.value).length == 0){
                        this.value = this.defaultValue;
                    }
                });
                // Bind rollover for "Custom RSS Feed" form submit button
                $(self.elements.form + ' input[type="image"]').hover(function(){
                    this.src = this.src.replace("_i.", "_o.");
                },function(){
                    if (this.src.indexOf("_o.") != -1) {
                        this.src = this.src.replace("_o.", "_i.");
                    } else if (this.src.indexOf("_a.") != -1) {
                        this.src = this.src.replace("_a.", "_i.");
                    }
                }).mousedown(function(){
                    this.src = this.src.replace("_o.","_a.");
                });
            });
        }
    };
    UltimateSlideDeckDemo.initialize();
})(jQuery);