var layout = {
    id:'',
    tp:'',
    template_position:'',
    loadReady:function(){
            var optionName = $("#layout_id").val();
            var optionValue = optionName.split("-");
            var total = $("[name="+optionValue[0]+"Opt]").length;            
            for(var i =0;i<total;i++){
                if($("[name="+optionValue[0]+"Opt]:eq("+i+")").val()==optionName){
                    $("[name="+optionValue[0]+"Opt]:eq("+i+")").attr("checked", "checked");
                    if(i==0) layout.tp = i;
                    else layout.tp = i-1;
                    layout.template_position = layout.tp;  
                }                
            }
 
            $("select[name=layout_select]").val(optionValue[0]);
            if(optionValue[0] != 'basic'){
                $(".or-not#"+optionValue[0]).show(layout.slideShow(optionValue[0]));                
            }else{
                $(".or-not#"+optionValue[0]).show();
                $('#savelayout_button').hide();
                $('#savelayoutbasic_button').show();
            }            
            layout.optionLayout(optionValue[0]);
            $("#chooseLayout").val($("#layout_id").val());           
            $("select[name=layout_select]").change(function () {            
              var str = "";
              $("select[name=layout_select] option:selected").each(function () {
                    layout.tp = '';                                   
                    str = $(this).attr("value");                  
                    if(str != 'basic'){
                        $(".or-not#"+str).show(layout.slideShow(str));
                        $('#savelayout_button').show();
                        $('#savelayoutbasic_button').hide();
                    }else {
                        $(".or-not#"+str).show();
                        $('#savelayout_button').hide();
                        $('#savelayoutbasic_button').show(); 
                    }
                    if(optionValue[0]!=str){                        
                       $("[name="+str+"Opt]:eq(0)").attr("checked", "checked");
                       $("#chooseLayout").val($("[name="+str+"Opt]:eq(0):checked").val());
                    }else{
                       layout.tp = layout.template_position; 
                       $(".or-not#"+optionValue[0]).show(layout.slideShow(optionValue[0]));
                       $("#chooseLayout").val($("#layout_id").val());
                    } 
                    $(".or-not").not("#"+str).hide();
                    //$(".or-not#"+str).show(layout.slideShow(str));
                  });
                   layout.id = str;
                   layout.optionLayout(str);
             /* if(str != 'none'){
                  $('#savelayout_button').attr("disabled",false);
                 
              }else{
                   $('#savelayout_button').attr("disabled","disabled");
              }*/ 
            })           
            $('#savelayout_button').click(layout.saveLayout);
            $('#savelayoutbasic_button').click(layout.saveLayout);
            if(button.lang=='en'){
                if($('#font_id').val()=="none"||$('#font_id').val()=="")$('#font_select option:eq(0)').attr("selected", "selected");
                else $('#font_select').val($('#font_id').val());
            }else{
                 if($('#font_id').val()=="none"||$('#font_id').val()=="")$('#font_select option:eq(1)').attr("selected", "selected");
                else $('#font_select').val($('#font_id').val());
            }
                        
            if($('#size_id').val()!=0)$('#fontsize_select').val($('#size_id').val());
            else $('#fontsize_select').val(12);
            //console.log( $('#font_select option:eq(4)').attr("selected", "selected"));
    },
    
    optionLayout:function(name){
            $("[name="+name+"Opt]").change(function(){
                    $("#chooseLayout").val($("[name="+name+"Opt]:checked").val());
            });
    
   } ,    
    saveLayout:function(){
            var layoutId = layout.id;
            switch(button.lang){
                       case'th':
                            var success_title = 'ประกาศ';
                            var success_word = 'บันทึกข้อมูลเรียบร้อยแล้ว';
                       break;
                       
                       case'en':
                            var success_title = 'Success';
                            var success_word = 'Resume Updated';
                       break;
            }
            $.ajax({
                url:'modules/layout/changeLayoutSub.php',
                cache: false,
                data:{'resumeId':$("#resId").val(), 'layoutId':$("#chooseLayout").val(), 'font':$("#font_select").val(), 'size':$("#fontsize_select").val()},
                type:'POST',
                success:function(data){
                    var html = data.split(":");
                    $("a.click-to-change").empty().text(layout.upperCase(html[1]));                    
                    if(parseInt(html[0])==1)$(".showPicture").css("display", "block");
                    else $(".showPicture").css("display", "none");
                    alert(success_word);                   
                }
            });
            $("#fancy_content").click($.fn.fancybox.close);
    },
    slideShow:function(str){           
            var currentPosition = 0;
              var slideWidth = 150;
              var slides = $('.or-not#'+str+' .slide');
              var numberOfSlides = slides.length;              
              // Remove scrollbar in JS
              //$('#slidesContainer').css('overflow', 'hidden');
              $('.or-not#'+str+' .slideContent').css('overflow', 'hidden');

              // Wrap all .slides with #slideInner div
              slides
                .wrapAll('<div id="slideInner'+str+'"></div>')
                // Float left to display horizontally, readjust .slides width
                .css({
                  'float' : 'left',
                  'width' : slideWidth,
                  'height' : 150,
                  'font-size' : '12px',
                  'margin-top' : '10px'
                });

              // Set #slideInner width equal to total width of all slides
              $('#slideInner'+str+'').css('width', slideWidth * numberOfSlides);
             
              // Insert controls in the DOM
              //$('#slideshow')
              $('.or-not#'+str)
                .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
                .append('<span class="control" id="rightControl">Clicking moves right</span>');
                
              // Hide left arrow control on first load
              if(layout.tp != ''){
                 manageControls(layout.tp);
                 currentPosition = layout.tp;
                 $('#slideInner'+str+'').animate({
                  'marginLeft' : slideWidth*(-layout.tp)
                });
              }else manageControls(currentPosition);
                             
              // Create event listeners for .controls clicks
              $('#'+str+' .control')
                .bind('click', function(){
                // Determine new position
                currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;                
                //alert(currentPosition);    // 0,1,2,3
                
                // Hide / show controls
                manageControls(currentPosition);
                // Move slideInner using margin-left
                $('#slideInner'+str+'').animate({
                  'marginLeft' : slideWidth*(-currentPosition)
                });
              });
             
              // manageControls: Hides and Shows controls depending on currentPosition
              function manageControls(position){
                  //console.log(position);
                    // Hide left arrow if position is first slide
                    if(position==0){ 
                        $('#'+str+' #leftControl').hide();
                        $('#slideInner'+str+'').animate({
                          'marginLeft' : slideWidth*(0)
                        }); 
                    } else{ 
                        $('#'+str+' #leftControl').show(); 
                    }
                    if(position==-1)$('#'+str+' #leftControl').hide();
                    // Hide right arrow if position is last slide
                    if(position==numberOfSlides-2){
                        $('#'+str+' #rightControl').hide(); 
                    } else{
                        $('#'+str+' #rightControl').show(); 
                    }
              }
    },
    
    upperCase:function(string){
        var newString = '';
        var arrayName = string.split('-');
        var total = arrayName.length;
        for(var i=0;i<total;i++){
            newString += arrayName[i].substr(0, 1).toUpperCase()+ arrayName[i].substr(1);
            
            if(i<total-1){
                newString += '-';
            }
        }
        return newString;
    }
}