var width1=0;
var height1=0;
var lastPanel='#content';
jQuery(function( $ ){
    width1= $(".contentimg").width();
    height1=$("#pane-options").height();
    //  alert("w:"+width1);
    /**
	 * Demo binding and preparation, no need to read this part
	 */
    //borrowed from jQuery easing plugin
    //http://gsgd.co.uk/sandbox/jquery.easing.php
    $.easing.elasout = function(x, t, b, c, d) {
        var s=1.70158;
        var p=0;
        var a=c;
        if (t==0) return b;
        if ((t/=d)==1) return b+c;
        if (!p) p=d*.3;
        if (a < Math.abs(c)) {
            a=c;
            var s=p/4;
        }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    };
    // back links
    $('a.back').click(function(){
        $(this).parents('div.pane').scrollTo( 0, 800, {
            queue:true
        } );
        $(this).parents('div.section').find('span.message').text( this.title );
        return false;
    });
    //just for the example, to stop the click on the links.
    $('ul.links').click(function(e){
        e.preventDefault();
        var link = e.target;
        link.blur();
        if( link.title )
            $(this).parent().find('span.message').text(link.title);
    });
	
    // This one is important, many browsers don't reset scroll on refreshes
    // Reset all scrollable panes to (0,0)
    $('div.pane').scrollTo( 0 );
    // Reset the screen to (0,0)
    $.scrollTo( 0 );
	
    // TOC, shows how to scroll the whole window
    $('#toc a').click(function(){//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
        $.scrollTo( this.hash, 700, {
            easing:'swing'
        });
        $(this.hash).find('span.message').text( this.title );
        return false;
    });
	
    // Target examples bindings
    // THIS DEMO IS NOT INTENDED TO SHOW HOW TO CODE IT
    // JUST THE MULTIPLE OPTIONS. THIS CODE IS UGLY.
    var $paneTarget = $('#pane-target');
	
    $('#relative-selector').click(function(){
        $paneTarget.stop().scrollTo( 'li:eq(14)', 800 );
    });
    $('#jquery-object').click(function(){
        var $target = $paneTarget.find('li:eq(14)');
        $paneTarget.stop().scrollTo( $target , 800 );
    });
    $('#dom-element').click(function(){
        var target = $paneTarget.find('ul').get(0).childNodes[20];
        $paneTarget.stop().scrollTo( target, 800 );
    });
    $('#absolute-number').click(function(){
        $paneTarget.stop().scrollTo( 150, 800 );
    });
    $('#absolute-number-hash').click(function(){
        $paneTarget.stop().scrollTo( {
            top:800,
            left:700
        } , 800 );
    });
    $('#absolute-position').click(function(){
        $paneTarget.stop().scrollTo( '520px', 800 );
    });
    $('#absolute-position-hash').click(function(){
        $paneTarget.stop().scrollTo( {
            top:'110px',
            left:'290px'
        }, 800 );
    });
    $('#relative-position').click(function(){
        $paneTarget.stop().scrollTo( '+=100', 500 );
    });
    $('#relative-position-hash').click(function(){
        $paneTarget.stop().scrollTo( {
            top:'-=100px',
            left:'+=100'
        }, 500 );
    });
	
    $('#percentage-position').click(function(){
        $paneTarget.stop().scrollTo( '50%', 800 );
    });
	
    // Options examples bindings, they will all scroll to the same place, with different options
    function reset_o(){//before each animation, reset to (0,0), skip this.
        $paneOptions.stop(true).attr({
            scrollLeft:0,
            scrollTop:0
        });
    };
    var $paneOptions = $('#pane-options');
	
   


    $('#options-easing2').click(function(){
        reset_o();
        $paneOptions.scrollTo( 'li:eq(2)', 700, {
            easing:'swing'
        } );
    });
    $('#options-easing3').click(function(){
        reset_o();
        $paneOptions.scrollTo( 'li:eq(3)', 700, {
            easing:'swing'
        } );
    });
    $('#options-easing1').click(function(){
        reset_o();
        $paneOptions.scrollTo( 'li:eq(1)', 700, {
            easing:'swing'
        } );
    });
  


    function ajaxedLinks(){
        $('li a').click( function(ev){
            //prevent the default action of the event, this will stop the href in the anchor being followed
            //before the animation has started, u can also use return false;
            // $("#mycarousel").remove();
            ev.preventDefault();
            // $("#content").css('display','block');
 var gotop=$(window).height()-620;
            var self=$(this);
            reset_o();
            var gotoPic=self.attr('goToPic');
            $paneOptions.scrollTo( 'li:eq('+gotoPic+')', 700, {
                easing:'swing'
            } );
            //alert("clk2:"+self.attr('href'));
            // $(this).toggleClass("selected");
            container='#content';
           
            // alert('xa:'+lastPanel);
            if(self.attr('loadto')!=undefined) if (self.attr('loadto')!=''){
                container=self.attr('loadto');
               
            }
            // alert('c1:'+$(container).length);
            if($(container).length==0) container='#content_i';
            //  alert('c2:'+$(container).length);
             
            // alert('xa:'+container);
            $(lastPanel).animate({
                opacity: 0,
                left: self.attr('fromleft'),
                top:self.attr('fromtop')
            // height: 'toggle'
            }, 1000, function() {
                lastPanel=container;
                $(container).load(self.attr('href')+"&ajaxed=true",'',function() {
                    gotoleft='172',
                    gototop='189';
                    if(container=="#gallery") {
                        $("#gallery").show();
                        gotoleft='0';
                        $("#gallery").css('height','585px');
                    }
                    $(container).animate({
                        opacity: 1,
                        left:gotoleft,
                        top:gototop//,
                    //height: 'toggle'
                    }, 1000, function() {

                        if(container!="#gallery") {
                            ///  alert('ox');
                            $("#gallery").html('');
                            $("#gallery").hide();
                            $("#gallery").css('height','1px');
                           
                        }else $("#content").html('');
                    });
                    //	alert('up');
                    updateEventLinks();
                });
            });


        });
		
		

    }
	
    function updateEventLinks(){
        $('p.paginate a').click( function(ev){
            //prevent the default action of the event, this will stop the href in the anchor being followed
            //before the animation has started, u can also use return false;
            // $("#mycarousel").remove();
            ev.preventDefault();
            //	alert('axa');

            var self=$(this);
           
            //alert("clk2:"+self.attr('href'));
            // $(this).toggleClass("selected");
            container='#content';
            if($(container)==undefined) container='#content_i';
            
            //alert('xa:'+container);
            //if(self.attr('loadto')!=undefined) if (self.attr('loadto')!='') container=self.attr('loadto');
            //alert('xa:'+container);
            $(container).animate({
                opacity: 0.2
               
            //  height: 'toggle'
            }, 1000, function() {

                $(container).load(self.attr('href')+"&ajaxed=true",'',function() {
                    // gotoleft='550';
                    //  if(container!="#gallery") //gotoleft='0';
                   
                    $(container).animate({
                        opacity: 0.90
                        
                   
                    //   height: 'toggle'
                    }, 1000);
                    updateEventLinks();
                });

            });
        });
    }
   
    ajaxedLinks();

});
$(window).resize(function() {
    //  $('body').prepend('<div>' + $(window).width() + '</div>');
  //  resizePanels();
});

function resizePanels(){
    var ww=$(window).width();
     var hh=$(window).height();
  /*   if(hh<794){$("#content").css('top', hh-650);
     //alert('opa');
 }
     else $("#content").css('top', 200);*/
    if(ww<1200)
    {

        $(".contentimg").css('width',(ww-200)+'px');
        $("#pane-options").css('width',(ww-200)+'px');
        $("#pane-options").css('height',(6/7)*(ww-200)+'px');
    }else{
        //alert("w:"+width1);
        x=width1;
        $(".contentimg").css('width',width1+'px');
        $("#pane-options").css('width',width1+'px');
        $("#pane-options").css('height',height1+'px');
    }
}
//resizePanels();