var ProfileSkin = Class.create({
    initialize: function(jsonUrl, sound, language) {
        this.jsonUrl = jsonUrl;
        this.sound = sound;
        this.language = language;
        this.defaultLanguage = 'ENG';
        this.json = {};
        this.getData();
        this.hideElementsInPreview();
    },
    addEventHandler : function (oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
              oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attatchEvent) {
              oTarget.attatchEvent("on" + sEventType, fnHandler);
        } else {
              oTarget["on" + sEventType] = fnHandler;
        }
    },
    hideElementsInPreview: function() {
        if(window.location.search.toQueryParams().mode == "preview") {                                            
            $('stage').hide();
            $('topbar').hide();
            $('page').style.border = 0;
            this.addEventHandler(window, "load", function(){
                 $('footer').hide();
                 $('footer-rating').hide();
           });    
        };
    },    
    getData: function() {
        new Ajax.Request(this.jsonUrl, {
            method: 'get',
            requestHeaders: { Accept: 'application/json' },
            onSuccess: function(transport, json) {                                                                                                 
                this.json = transport.responseText.evalJSON();
                this.setStylesheet();
                this.setStageImage();
                this.setAudioPlayer();
                this.setSkinName();
            }.bind(this),
            onFailure: function()    {         
            } 
        });
    },
    
    setStylesheet: function() {
       document.getElementsByTagName("link")[document.getElementsByTagName("link").length-1].href = this.json.css;
    },
    
    setStageImage: function() {
        
        $('stage').innerHTML = '';
        var stageImage = document.createElement("img");
        
        var stage = eval("this.json.stage ." + this.language);
        if(stage  == undefined) {
            stage  = eval("this.json.stage ." + this.defaultLanguage);
        }
        stageImage.setAttribute("src", stage.src);
        stageImage.setAttribute("alt", stage.title);
        stageImage.setAttribute("title", stage.title);
        stageImage.setAttribute("id", "stageImage");
        $('stage').appendChild(stageImage);
    },
    
    setAudioPlayer: function() {
       var so = new SWFObject("/NOE/media/audioplayer.swf", "audioplayer", "200", "100", "7", this.json.audioplayer.bgColor);
       so.addParam("wmode", "transparent");
       so.addVariable("path", this.sound);       
       so.addVariable("cButton", this.json.audioplayer.cButton);     
       so.addVariable("cShape", this.json.audioplayer.cShape);
       so.addVariable("autoPlay", "true");
       so.write("audioplayer");   
    },
    
    setSkinName: function() {
       var skinName = eval("this.json.title." + this.language);
       if(skinName == undefined) {
           skinName = eval("this.json.title." + this.defaultLanguage);
       } 
       $('my_skin').innerHTML = skinName;  
    }
});



var ProfileEditor = Class.create({
    initialize: function(tabButton, tabDiv, jsonURL, selectedValue, language) {
        this.tabButton = tabButton;
        this.tabDiv = tabDiv;
        this.dropdown = $(this.tabDiv).down('select');
        this.gliderDiv = $(this.tabDiv).down('.glider');
        this.gliderContentDiv = $(this.gliderDiv).down('.scroller .content');
        this.gliderPrev = $(this.tabDiv).down('.gliderPrev img');
        this.gliderNext = $(this.tabDiv).down('.gliderNext img');
        this.jsonUrl = jsonURL;
        this.json = {};
        this.glider = {};
        this.catImages;
        this.selectedItem;
        this.selectedValue = selectedValue;
        this.language = language;
        this.defaultLanguage = 'ENG';
        
        // attach events
        Event.observe(this.tabButton, 'click', this.onTabClicked.bind(this));
        Event.observe(this.dropdown, 'change', this.onCategoryChanged.bind(this));
        Event.observe(this.gliderPrev, 'click', this.onGliderPrevClicked.bind(this));
        Event.observe(this.gliderNext, 'click', this.onGliderNextClicked.bind(this));                                        
        this.getData();
    },
    getData: function() {
        new Ajax.Request(this.jsonUrl, {
            method: 'get',
            requestHeaders: { Accept: 'application/json' },
            onSuccess: function(transport, json) {                                                                                                           
                this.json = transport.responseText.evalJSON();
                this.setTabBackground();
                this.fillDropdown();
                this.createGlider(-1, this.language);
                this.initializeSelectedValues();
            }.bind(this),
            onFailure: function(){
            }
        });
    },
    
    setTabBackground : function() {
        $(this.tabDiv).style.backgroundImage = 'url(' + this.json.background + ')';
    },
    fillDropdown : function() {
        var dropdown = $(this.dropdown);
        
        for (i = 0; i < this.json.category.length; i++) {
            var dropdownLabel = eval("this.json.category[i].name." + this.language);
            dropdown.options[dropdown.length] = new Option(dropdownLabel, i);
        }
    },
    
    createGlider : function(idCategory, language) {
        
        if(language == '') language = 'en';
        
        var image;
        var imageArray = new Array();
        this.glider = null;
        // loading images
        // *** all categories
        if (idCategory == -1)
        {
            for (i = 0; i < this.json.category.length; i++)
            {
                for (j = 0; j < this.json.category[i].image.length; j++)
                {    
                    // necessary for IE > this.json.category[i].image.length is one item bigger than expected (???)
                    if (this.json.category[i].image[j] != null)
                    {
                        var label = eval("this.json.category[i].image[j].label." + language); 
                        if(label == undefined) {
                           label = eval("this.json.category[i].image[j].label." + this.defaultLanguage);
                        } 
                        var imagePath = eval("this.json.category[i].image[j].name." + language);
                        if(imagePath == undefined) {
                           imagePath = eval("this.json.category[i].image[j].name." + this.defaultLanguage);
                        } 
                        
                        image = this.json.category[i].path + imagePath + '.' + this.json.category[i].image[j].type;
                        switch(this.json.type) {
                            case "images":
                              var valueAttr = this.json.category[i].path_big + imagePath + "_big.jpg";
                              break;    
                            case "sounds":
                              var valueAttr = this.json.category[i].path_swf + this.json.category[i].image[j].sound;
                              break;
                            case "themes":
                              var valueAttr = this.json.category[i].path_themes + this.json.category[i].image[j].theme;
                              break;
                            default:
                              var valueAttr = "";
                              break;
                        }
                        
                        imageArray.push('<div class="container"><img class="milky" src="' + image + '" alt="' + label + '" title="' + label + '" index="' + j + '" categoryIndex="' + i + '" elementValue="' + valueAttr  + '" /><p>' + label + '</p></div>');
                    }
                }
            }
        }
        // *** specific category
        else
        {
            for (j = 0; j < this.json.category[idCategory].image.length; j++)
            {
                // necessary for IE > this.json.category[idCategory].image.length is one item bigger than expected (???)
                if (this.json.category[idCategory].image[j] != null)
                {
                    var label = eval("this.json.category[idCategory].image[j].label." + language); 
                    if(label == undefined) {
                       label = eval("this.json.category[idCategory].image[j].label." + this.defaultLanguage);
                    } 
                    var imagePath = eval("this.json.category[idCategory].image[j].name." + language);
                    if(imagePath == undefined) {
                       imagePath = eval("this.json.category[idCategory].image[j].name." + this.defaultLanguage);
                    } 
                    image = this.json.category[idCategory].path + imagePath + '.' + this.json.category[idCategory].image[j].type;
                    
                    switch(this.json.type) {
                        case "images":
                          var valueAttr = this.json.category[idCategory].path_big + imagePath + "_big.jpg";
                          break;    
                        case "sounds":
                          var valueAttr = this.json.category[idCategory].path_swf + this.json.category[idCategory].image[j].sound;
                          break;
                        case "themes":
                          var valueAttr = this.json.category[idCategory].path_themes + this.json.category[idCategory].image[j].theme;
                          break;
                        default:
                          var valueAttr = "";
                          break;
                    }
                    imageArray.push('<div class="container"><img class="milky" src="' + image + '" alt="' + label + '" title="' + label + '" index="' + j + '" categoryIndex="' + idCategory + '" elementValue="' + valueAttr  + '" /><p>' + label + '</p></div>');
                }
            }
        }
        // end of loading images
        // controlling sections
        var iMaxImagesPerSection = 5;
        var iSections = Math.ceil(imageArray.length / iMaxImagesPerSection);
        var iCurrentSection;
        var strImages = '';
        var sectionArray = new Array();
        // *** clear sections first
        $(this.gliderContentDiv).update('');
        // *** displaying images
        for (i = 0; i < iSections; i++)
        {
            iCurrentSection = i + 1;
            strImages = '';
            var iStart = i * iMaxImagesPerSection;
            var iEnd = iCurrentSection * iMaxImagesPerSection;
            if (iEnd > imageArray.length)
                iEnd = imageArray.length;
            // debug: alert(iStart + '; ' + iEnd + '; ' + imageArray.length);    
                
            // get current images
            for (j = iStart; j < iEnd; j++)
            {
                strImages += imageArray[j];
            }
            
            // writing all sections first
            $(this.gliderContentDiv).innerHTML += '<div class="section no' + iCurrentSection + '"></div>';
            // find current section > fill with images
            $(this.gliderContentDiv).down('.section', i).update(strImages);
        }
        // *** end of displaying images
        
        // *** collecting sections for glider > necessary for IE
        for (i = 0; i < iSections; i++)
        {
            sectionArray.push($(this.gliderContentDiv).down('.section', i));
        }
        // *** end of collecting sections for glider
        // end of controlling sections
        // glider
        this.glider = new Glider(this.gliderDiv, this.gliderPrev, this.gliderNext, sectionArray, {duration:0.5});
        this.glider.first();
        // events for category images
        this.addCatImagesEvents();
    },
    
    addCatImagesEvents : function() {
        this.catImages = $$('div#' + this.tabDiv + ' div.section img');
    
        // Mouseover
        this.catImages.invoke('observe', 'mouseover', this.onCatImageOver.bind(this));
        // Mouseout
        this.catImages.invoke('observe', 'mouseout', this.onCatImageOut.bind(this));
        // Click
        this.catImages.invoke('observe', 'click', this.onCatImageClicked.bind(this));
    },
    
    initializeSelectedValues : function() {
       var elementArray = $(this.tabDiv).select('img[elementValue="'+ this.selectedValue +'"]');             
        
       //check if an item was allready selected
       if(elementArray.length == 0){
            var elements = $(this.tabDiv).select('img.milky');
            elements[0].className = '';
            elements[0].setAttribute('selected', true);
            this.setHiddenFields(elements[0]);
        }
        else {
            elementArray[0].setAttribute('selected', true);
            elementArray[0].className = '';
            this.setHiddenFields(elementArray[0]); 
        }
    },
    getSelectedItem : function() {
        //console.log(this.selectedItem);
    },
    
    onTabClicked : function() {
        this.glider.clickTab();
    },
    
    onCategoryChanged : function() {
        currentCategoryId = parseInt($F(this.dropdown));
        this.createGlider(currentCategoryId, this.language);
        
        var elements = $(this.tabDiv).select('img.milky');
        elements[0].className = '';
        elements[0].setAttribute('selected', true);
        this.setHiddenFields(elements[0]);
    },
    onGliderPrevClicked : function() {
        this.glider.previous();
    },
    onGliderNextClicked : function() {
        this.glider.next();
    },
    
    onCatImageOver : function(overEvent) {
        // find sender image
        var overImage = Event.findElement(overEvent, 'img');
        // set hover for sender image
        overImage.removeClassName('milky');
    },
    
    onCatImageOut : function(outEvent) {
        // find sender image
        var outImage = Event.findElement(outEvent, 'img');
        
        // set mouseout for sender image
        if (!outImage.readAttribute('selected'))    {        
            outImage.addClassName('milky');
        }
    },
    
    onCatImageClicked : function(clickEvent) {
        // deselect all images
        for (i = 0; i < this.catImages.length; i++)
        {
            this.catImages[i].addClassName('milky');
            this.catImages[i].removeAttribute('selected');
        }
        // find sender image
        var selectedElement = Event.findElement(clickEvent, 'img');
        // select sender image
        selectedElement.setAttribute('selected', true);
        selectedElement.removeClassName('milky');
        // save selected image
        
        this.setHiddenFields(selectedElement);
    },
    
    setHiddenFields : function(selectedElement) {
        
           switch(this.json.type) {
            case "images":
              $('pp_image').value = selectedElement.readAttribute("elementValue");
              //console.log($('pp_image').value);
              break;    
            case "sounds":
              $('pp_sound').value = selectedElement.readAttribute("elementValue");
              //console.log($('pp_sound').value);
              break;
            case "themes":
              $('pp_theme').value = selectedElement.readAttribute("elementValue");
              //console.log($('pp_theme').value);
              break;
            default:
              break;
        }
    }
});

function toggleOpenProfileTabs(tab) {
    var gliders = $$('#main .profileTab');
    switch(tab.id)
    {
        case 'tab1': //Image
            $('tabs-menu').down('img', 0).src = $('tabs-menu').down('img', 0).readAttribute("srcActive");
            gliders[0].show();
            $('tabs-menu').down('img', 1).src = $('tabs-menu').down('img', 1).readAttribute("srcInactive");
            gliders[1].hide();
            $('tabs-menu').down('img', 2).src = $('tabs-menu').down('img', 2).readAttribute("srcInactive");
            gliders[2].hide();
            break;
        case 'tab2': //Theme
            $('tabs-menu').down('img', 0).src = $('tabs-menu').down('img', 0).readAttribute("srcInactive");
            gliders[0].hide();
            $('tabs-menu').down('img', 1).src = $('tabs-menu').down('img', 1).readAttribute("srcActive");;
            gliders[1].show();
            $('tabs-menu').down('img', 2).src = $('tabs-menu').down('img', 2).readAttribute("srcInactive");
            gliders[2].hide();
            break;
        case 'tab3': //Sound
            $('tabs-menu').down('img', 0).src = $('tabs-menu').down('img', 0).readAttribute("srcInactive");
            gliders[0].hide();
            $('tabs-menu').down('img', 1).src = $('tabs-menu').down('img', 1).readAttribute("srcInactive");
            gliders[1].hide();
            $('tabs-menu').down('img', 2).src = $('tabs-menu').down('img', 2).readAttribute("srcActive");
            gliders[2].show();
            break;
    }
}

function showPreviewLayer(layer, srcURL) {    
    ($F('pp_wishlist') != null) ? wishlistFlag = "true" : wishlistFlag = "false" ;
    $('pp_preview').src = srcURL + "&username=" + $F('pp_userid') + "&image=" + $F('pp_image') + "&sound=" + $F('pp_sound') + "&theme=" + $F('pp_theme') + "&wishlistPublic=" + wishlistFlag;    
    
    // fading the background layer in
    new Effect.Appear('overlayer', {duration:0.6,to:0.5, beforeStart: function() { hideLayerElements() }} );
    layer.style.visibility = 'visible';
    layer.show();
}