I have not picked a language, because right now I'm still in design. However here is an example, in general, of the layout I want the end product to look. The end goal is to have everything in a wrapper (be it app, exe, linux executable, whatever) that takes every asset needed (be it audio, graphics, fonts, etc) and it's there in a known area the html bit looks in.
Included an example of the approximate layout I want.
Note: the context button area would have other uses, such as 'you have mail' or 'someone is calling you.'
Speaking of, is there a way to have popups that don't completely transition to a new segment? Also is there a way for the stat bar to slide out of the way when not needed and slide back if you hover mouse over/click a button?
Can I do this? If so, How? I'm guessing it can because CSS, but I don't know how.
Comments
Everything you mentioned, in terms of layout, should be relatively easy to achieve with CSS and some coding.
The basic process to build your interface consist of the following steps:
a. Use Javascript to add any extra areas/elements (image, side-bar?, footer?) that the format you choice either does not already have, or does not function the way you want it to. The extra areas/element need to be added outside the area that the selected story format displays the Passage contents, this will allow it to stay unchanged (if needed) while the Reader navigates between passages.
b. Use CSS to position the areas/element in the locations you want them.
c. Create functionality to update the contents of the areas. Some story formats allow you to extend the core macro list easier than others.
It will take a fair amount of effect to do what you want.
opinion: If I personally needed to create a layout like the one in your example I would use SugarCube, because I believe it has more built-in features that would reduce the effort required.