/*  main.js
 */


var g={};
$(
    function(){      


//
//        $('body').bind('click', function(e){
//            console.log('click')
//            console.log(e.which)
//            if(e.ctrlKey || e.metaKey){                
//                console.log('e.ctrlKey || e.metaKey')
//            }        
//            if(e.ctrlKey){                
//                console.log('e.ctrlKey')
//            }        
//            if(e.metaKey){                
//                console.log('metaKey')
//            }//e.altKey        
//            if(e.altKey){                
//                console.log('e.altKey')
//            }         
//            if(e.shiftKey){                
//                console.log('e.shiftKey')
//            }                     
//            //    if (window.event) ctrl = event.ctrlKey;
//            if (e) ctrl=(Event.META_MASK || Event.CTRL_MASK)
//            if (ctrl) { 
//                console.log('metaKey is true! You are pressing the Command key.')
//            } else { 
//                console.log('metaKey is false or undefined')
//            } 
//            
//        });

        var myObject = {
            a: {
                one: 1, 
                two: 2, 
                three: 3
            }, 
            b: [1,2,3]
        };
        var recursiveEncoded = $.param(myObject);
        var recursiveDecoded = decodeURIComponent($.param(myObject));

//        console.log(recursiveEncoded);
//        console.log(recursiveDecoded);
//
//        console.log(0)
        var a =  $.param({
            a:2,
            b:"c",
            d:[1,2]
        })

//        console.log(a)

        // configure the global "g" object        
        g={
            userQuery: $('form[data-name="userQuery"]').userQuery(),
            pager: $('div[data-name=pager]').pager( ),
            images:{},
            imageCount:0
        }      
        g.pager.bind('setPage', function(e,pageNumber){
            $.server.getImages();
        });        

        // set up init state
        g.userQuery.find('input[type=text]').val("dog" );
        g.userQuery.find('input[type=text]').focus();

        $.server.getImages();

        $('div[data-name=help]').click(function(){
            if( $( ".info" ).dialog("isOpen")){
                $( ".info" ).dialog("close");
            } else{
                $( ".info" ).dialog("open");
            }
        });

        $( ".info" ).dialog({
            maxWidth:800,
            width:'80%', 
            position:[20,160]
        });
    //        $( ".info" ).hide();
    });
var testData = {};
// $.server
$.server = {
    getImages: function(){ // getIMages conf : configuration
        $.ajax({
            url:"/images",
            dataType:'json', 
            data: {
                "q": g.userQuery.userQuery("getQuery"),
                "start-index": g.pager.pager("getStartIndex"),
                "max-results": 3
            },
            success: function(data){
                testData = data;                
//                console.log('data')
//                console.log(data.feed.openSearch$itemsPerPage)
//                console.log(data.feed.openSearch$totalResults.$t)

                //                for (var i=0 ; i<data.feed.entry.length; i++, g.imageCount++){
                //                }
                //                return;
                // add images to results anel
                for (var i=0 ; i<data.feed.entry.length; i++, g.imageCount++){
                    var imgId =                     g.imageCount
                    g.images[imgId]= data.feed.entry[i];                    
                    
                    $('[data-name=results]').prepend( $('<img>').resultImage({
                        id:imgId
                    }).bind('addImage',function(){
                        $( ".info" ).dialog("close");
                    }) );
                }        

                // set event hadlers/ listeners on the newly made dives

                // pager
                var pWidth = (data.feed.openSearch$totalResults.$t / data.feed.openSearch$itemsPerPage.$t > 20)?20 : Math.floor(data.totalResults / data.itemsPerPage);
                g.pager.pager("generateMenu",{
                    totalPages:Math.ceil(data.feed.openSearch$totalResults.$t/3),// DIVIDE by perPage
                    pagerWidth: pWidth 
                });

                // message
                $('div[data-name="message"]').text("Total Results: "+data.feed.openSearch$totalResults.$t); // g.iFace.message                
            }
        });                   
    }
}